HTML5
article
-- 解释
article标签装载显示一个独立的文章内容。例如一篇完整的论坛帖子，一则网站新闻，一篇博客文章等等，一个用户评论等等 artilce可以嵌套，则内层的artilce对外层的article标签有隶属的关系。例如，一个博客文章，可以用article显示，然后一
些评论可以以article的形式嵌入其中。
-- 示列
<article>
<h1>文章标题</h1>
这是一篇文章
<article>评论1...</article>
<article>评论2...</article>
</article>
section
-- 解释
section 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
-- 示列
<body>
<section>
<h1>章节一</h1>
<p>详细内容...</p>
</section>
<section>
<h1>章节二</h1>
<p>详细内容...</p>
</section>
</body>
aside
-- 解释
aside 用来装载非正文类的内容。例如广告，成组的链接，侧边栏等等。
-- 示列
<body>
<aside>
热门文章
</aside>
<aside>
广告
</aside>
<article>
<h1>文章标题</h1>
这是一篇文章
<article>评论1...</article>
<article>评论2...</article>
</article>
</body>
hgroup
-- 解释
hgroup 标签用于对网页或区段的标题元素（h1-h6）进行组合。例如，在一个区段中你有连续的h系列的标签元素，则可以用hgroup将他们括起来。
-- 示列
<hgroup>
<h1>The reality dysfunction</h1>
<h2>Space is not the only void</h2>
</hgroup> <hgroup>
<h1>Dr. Strangelove</h1>
<h2>Or: How I Learned to Stop Worrying and Love the Bomb</h2>
</hgroup>
header
-- 解释
header 标签定义文档的页面组合，通常是一些引导和导航信息。
-- 示列
<header>
<p>this is the page Logo</p>
<nav>this is page navigation</nav>
</header>
footer
-- 解释
footer 标签定义 section 或 document 的页脚。在典型情况下，该元素会包含创作者的姓名、文档的创作日期以及/或者联系信息。
-- 示列
<footer> © 2012 Baidu 使用百度前必读 京ICP证030173号 </footer>
nav
-- 解释
nav 标签定义显示导航链接不是所有的成组的超级链接都需要放在nav标签里。nav标签里应该放入一些当前页面的主要导航链接。 例如在页脚显示一个站点的导航链接（如首页，服务信息页面，版权信息页面等等），就可以使用nav标签，当然，这不是必须的。
-- 示列
<nav>
<ul>
<li><a href=”articles.html”>Index of all
articles</a></li>
<li><a href=”today.html”>Things sheeple need to wake up for today</a></li>
<li><a href=”successes.html”>Sheeple we have managed to
wake</a></li>
</ul>
</nav>
time
-- 解释
time 标签定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的。该元素能够以机器可读的方式对日期和时间进行编码，这样，
举例说，用户代理能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。
-- 示列
<p>我们在每天早上 <time>9:00</time> 开始营业。</p>
<p>我在 <time
datetime="2008-02-14">情人节</time> 有个约会。</p>
mark
-- 解释
mark 标签定义带有记号的文本。请在需要突出显示文本时使用
<mark> 标签。
-- 示列
<p>Do not forget to
buy <mark>milk</mark> today.</p>
figure
-- 解释
figure标签规定独立的流内容（图像、图表、照片、代码等等）。figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。
-- 示列
<p>黄浦江上的的卢浦大桥</p> <img
src="shanghai_lupu_bridge.jpg" width="350"
height="234" /> </figure>
figcaption
-- 解释
figcaption 标签定义 figure 元素的标题（caption）。"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。
-- 示列
<figure> <figcaption>黄浦江上的的卢浦大桥</figcaption> <img src="shanghai_lupu_bridge.jpg"
width="350" height="234" /> </figure>
contextmenu+menu
-- 解释
contextmenu 添加到系统右键菜单 [貌似这个功能只有firefox支持，很悲催的]
-- 示列
<div>添加到系统右键菜单< contextmenu=mymenu
/div> <menu type="context" id="mymenu" />
HTML5表单
此类型要求输入格式正确的email地址,否则浏览器是不允许提交的,并会有一个错误信息提示.此类型在Opera中必须指定name值,否则无效果.
<input type=email >
url
要求输入格式正确的URL地址,Opera中会自动在开始处添加http://.
<input type=url >
number
要求输入格式数字，默认会有上下两个按钮，opera支持更好
<input type=number >
tel
此类型要求输入一个电话号码,但实际上它并没有特殊的验证,与text类型没什么区别.
<input type=tel >
range
此类型将显示一个可拖动的滑块条,并可通过设定max/min/step值限定拖动范围.拖动时会反馈给value一个值.
<input type=range min=20 max=100 step=2 >
color
此类型表单,可让用户通过颜色选择器选择一个颜色值,并反馈到value中,可以设置默认值
<input type=color value=#ff0000 >
date, time, datetime, datetime-local, month, week
这一系列是很酷的一个类型,完全解决了烦琐的JS日历控件问题.但目前MS只有Opera/Chrome新版本支持,且展示效果也不一样.
- <input type=date >
- <input type=time >
- <input type=datetime >
- <input type=datetime-local >
- <input type=month >
- <input type=week >
time
<input type=time >
datetime
<input type=datetime >
datetime-local
<input type=datetime-local >
month
<input type=month >
week
<input type=week >
search
此类型表示输入的将是一个搜索关键字,通过results=s 或者 x-webkit-speech 可显示一个搜索小图标. [在chrome下才能看得见]
<input type=search results=s >
required
表单验证属性为require类型时,若输入值为空,则拒绝提交,并会有一个提示.这个很有用.并且可以用于textarea以及hidden/image/submit类型.
<input type=text required >
pattern
pattern类型为正则验证,可以完成各种复杂的验证.这两种类型在Opera中必须指定name值,否则无效果.
<input type=email required pattern=\w+@[a-z0-9]+\.[a-z]+/g >
placeholder
这是一个很实用的属性,免去了用JS去实现点击清除表单初始值.浏览器支持也还不错,标准浏览器都能很好的支持.
<input type=text placeholder="your message" >
autofocus
默认聚焦属性,可在页面加载时聚焦到一个表单控件,类似于JS的focus().
<input type=text autofacus="true" >
list
该属性需要与datalist属性共用,datalist是对选择框的记忆,而list属性可以为选择框自定义记忆的内容.
- <input type="text" list="ilist">
- <datalist id="ilist">
- <option label="a" value="a">aaaaa</option>
- <option label="b" value="b">bbbbb</option>
- <option label="c" value="c">ccccc</option>
- </datalist>
autocomplete
此属性是为表单提供自动完成功能.如果该属性为打开状态可很好地自动完成.一般来说,此属性必须启动浏览器的自动完成功能.
<input type=text autocomplete="on" >
keygen
keygen 标签规定用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器。所有主流浏览器都支持 keygen 标签，除了 Internet Explorer 和 Safari。
<keygen name="keygen" />
datalist
datalist 标签定义选项列表。与 input 元素配合使用该元素，来定义 input 可能的值。datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。 用 input 元素的 list 属性来绑定 datalist。
<label for="search">搜索引擎</label>
<input type="url" name="search" id="search"
list="searchlist" autocomplete="on"
pattern="https?://.+" />
<datalist id="searchlist">
<option value="http://www.baidu.com/"
>
<option value="http://www.google.com/"
>
<option value="http://www.sogou.com/"
>
</datalist>
output
output 标签定义不同类型的输出，比如脚本的输出。
演示地址：http://www.w3school.com.cn/tiy/t.asp?f=html5_output
meter
meter 标签定义度量衡。仅用于已知最大和最小值的度量。
演示地址：http://www.w3school.com.cn/tiy/t.asp?f=html5_meter
progress
progress 标签定义运行中的进度（进程）。可以使用 progress 标签来显示 JavaScript 中耗费时间的函数的进度。
演示地址：http://www.w3school.com.cn/tiy/t.asp?f=html5_progress
contenteditable
此属性可以让摸个元素里面的文本节点或值变为可编辑
<p contenteditable="true" >可以编辑的内容</p>
