<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<base href="http://www.w3school.com.cn"/>
<style type="text/css">
#tb {
margin: 10px;
padding: 20px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 22px;
color: #36C;
}
</style>
</head>
<body>
<table id="tb" border="1" style="background-color:#FFC;width:100%;">
<tr>
<td style="background-color:#0F3"><b>datalist/select标签</b></td>
</tr>
<tr>
<td><label id="city">Choose any city</label>
<input list="cityname" id="city" name="city">
<datalist id="cityname">
<option value="Qingdao">Qingdao</option>
<option value="Suzhou">Suzhou</option>
<option value="Wuxi">Wuxi</option>
<option value="Xian">Xian</option>
<option value="Hangzhou">Hangzhou</option>
</datalist>
<br>
<br>
<label id="city1">Choose any city</label>
<select>
<option value="Qingdao">Qingdao</option>
<option value="Suzhou">Suzhou</option>
<option value="Wuxi">Wuxi</option>
<option value="Xian">Xian</option>
<option value="Hangzhou">Hangzhou</option>
</select>
<br>
<p><b>注释：</b> datalist类似于选择器，需要与input连用，在input的输入框中会出现可选择的输入，但也可以自己随意输入，而select是一个纯粹的选择器，不可以输入，只可以选择已经事先约定好的可选项 </td>
</tr>
<tr>
<td style="background-color:#0F3"><b>dialog标签</b>
<dialog open>这是打开的对话窗口</dialog></td>
</tr>
<tr>
<td><br>
<br>
<br>
<p><b>注释：</b>只有 Chrome 和 Safari 6 和支持 dialog 标签。</p></td>
</tr>
<tr>
<td style="background-color:#0F3"><b>embed标签</b></td>
</tr>
<tr>
<td><embed src="/i/helloworld.swf";height="20px";/>
<br>
<p><b>注释：</b>定义嵌入的内容，比如插件。它是HTML5中的新标签</p></td>
</tr>
<tr>
<td style="background-color:#0F3"><b>fieldset标签</b></td>
</tr>
<tr>
<td><form style="text-align:left">
<fieldset>
<legend >个人信息</legend>
姓名：
<input type="text"/>
<br>
出生日期：
<input type="date"/>
<br>
联系电话：
<input type="tel"/>
<br>
邮箱：
<input type="url" />
<br>
自我介绍：
<input type="text" />
<br>
<input type="submit" value="提交"/>
</fieldset>
</form>
<br>
<p><b>注释：</b>fieldset元素可将表单内相关元素分组。它将表单内容的一部分打包，生成一组相关表单的字段。当一组表单元素放到fieldset标签内时，浏览器会以特殊的方式来显示它们。它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。
fieldset 标签没有必需的或唯一的属性。legend标签为 fieldset 元素定义标题。 </p></td>
</tr>
<tr>
<td style="background-color:#0F3"><b>figcaption标签</b></td>
</tr>
<tr>
<td><p>探访上海绝美春天----上海鲜花港，中国的“库肯霍夫公园”。500多个品种、320万株的郁金香，铺泻于林间小路、玉立在清水湖畔、簇拥在鲜花大道，多彩的花魁组合凸显浓郁异国风情。郁金香是“胜利”、“美好”、“凯旋”的象征；荷兰人把郁金香看作是所有花卉中最美丽的一种，外形典雅、花色纯正、色彩繁多，誉为“花中皇后”，因此视它为国花。.</p>
<figure> <img src="/i/eg_tulip.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>上海鲜花港 - 郁金香.</figcaption>
</figure>
<br>
<p><b>注释：</b>figcaption标签，定义figure元素(图像、图表、照片、代码等等)的标题，它是HTML5 中的新标签。
另注：figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。 </p></td>
</tr>
<tr>
<td style="background-color:#0F3"><b>main标签</b></td>
</tr>
<tr>
<td><main>
<h1>Web Browsers</h1>
<p>Google Chrome、Firefox 以及 Internet Explorer 是目前最流行的浏览器。</p>
<article>
<h1>Google Chrome</h1>
<p>Google Chrome 是由 Google 开发的一款免费的开源 web 浏览器，于 2008 年发布。</p>
</article>
<article>
<h1>Internet Explorer</h1>
<p>Internet Explorer 由微软开发的一款免费的 web 浏览器，发布于 1995 年。</p>
</article>
<article>
<h1>Mozilla Firefox</h1>
<p>Firefox 是一款来自 Mozilla 的免费开源 web 浏览器，发布于 2004 年。</p>
</article>
<br>
<p><b>注释:</b>标签规定文档的主要内容。main元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容，比如侧栏、导航栏、版权信息、站点标志或搜索表单。在一个文档中，不能出现一个以上的 main 元素。main元素不能是以下元素的后代：article、aside、footer、header 或 nav。它是html5中的新标签</p>
</main></td>
</tr>
</table>
</body>
</html>
