HTML5的新标签
首先，来看一段HTML4中常见的JavaScript代码
<form>
<p><label>UserName:<input name="search" type="text" id="search"></label></p>
<script>document.getElementById('search').focus();</script>
</form>
在HTML5中，这段代码将会以怎样的形式出现呢？
<form>
<p>
<label>UserName:<input type="text" name="search" autofocus /></laabel>
</p>
</form>
区别：在HTML4中的一段JavaScript代码，在HTML5中消失了，取而代之的是一个在HTML5中新出现的属性。
我们都知道，HTML4中最常见的页面结构通常采用div+css的方式进行页面布局，参考如下代码：
<html>
<head>
<title>HTML</title>
<style type="text/css">
#header, #nav, #footer {
height: 20px;
width: 400px;
background-color: #595959;
text-align: center;
color: #fff;
line-height: 20px;
}
#nav, #footer {
margin-top: 10px;
margin-bottom: 10px;
}
.article, #side-bar {
display: inline-block;
width: 198px;
height: 100px;
background-color: #595959;
text-align: center;
color: #fff;
line-height: 20px;
vertical-align: top;
}
.section {
height: 60px;
background-color: #3b3b3b;
margin: 10px;
text-align: center;
color: #fff;
line-height: 20px;
}
</style>
</head>
<body>
<div id="header"><div id="header"></div></div>
<div id="nav"><div id="nav"></div></div>
<div class="article">
<div class="article"></div>
<div class="section"><div class="section"></div></div>
</div>
<div id="side-bar"><div id="side-bar"></div></div>
<div id="footer"><div id="footer"></div></div>
</body>
</html>
代码执行效果图如下：
那么在HTML5中，我们会用怎样的页面代码来描述同样的结构呢？参考如下代码：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>HTML5</title> <style> header, nav, article, aside, footer { background-color: #595959; color: #fff; text-align: center; line-height: 20px; } header, nav, footer { height:20px; width:400px; margin-bottom:10px; } article, aside { width:198px; height:100px; display:inline-block; vertical-align:top; margin-bottom:10px; } section { height:60px; background-color:#3b3b3b; margin:10px; } </style> </head> <body> <header><header></header> <nav><nav></nav> <article> <article> <section><section></section> </article> <aside><aside></aside> <footer><footer></footer> </body> </html>
实际代码执行效果如下：
区别：HTML4中常见的用div来划分页面结构的方法，到了HTML5中，别一种HTML5中新出现的标签给替代了。
从上面的两个示例比较可以看出，相对于HTML4，HTML5能够创建更简单的Web程序，书写出更简洁的HTML代码，下面我们就逐一介绍HTML5中新增的元素。
HTML5中新增的结构标签：
<section>
<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。section元素用于对网站或应用程序中页面上的内容进行分块。一个section元素通常由内容及其标题组成。但section元素并非一个普通的容器元素；当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div而非section元素。
<section> <h1>PRC</h1> <p>The People's Republic of China was born in 1949...</p> </section>
效果图如下：
<article>
<article> 标签规定独立的自包含内容。article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。
一篇文章应有其自身的意义，应该有可能独立于站点的其余部分对其进行分发。
<article> 元素的潜在来源：
- 论坛帖子
- 报纸文章
- 博客条目
- 用户评论
<article> <h1>Internet Explorer 9</h1> <p>Windows Internet Explorer 9（简称 IE9）于 2011 年 3 月 14 日发布.....</p> </article>
效果图如下：
乍看起来，貌似article和section标签基本一样啊，事实上，在HTML5中，article元素可以看成是一种特殊种类的section元素，它比section元素更强调独立性。那么我们应该什么时候使用article标签，什么时候使用section标签呢？请参考如下几条规则：
- 不要将section元素用作设置样式的页面容器，那是div元素的工作。
- 如果article元素，aside元素或nav元素更符合使用条件，不要使用section元素。
- 不要为没有标题的内容区块使用section元素。
- section元素强调分段或分块，article元素强调独立性。即如果一块内容相对来说比较独立、完整的时候，应该使用article元素，如果想将一块内容分成几段的时候，应该使用section元素。
举例说明一下
<article> <h1>苹果</h1> <p><b>苹果</b>,植物类水果，多次花果...</p> <section> <h2>红富士</h2> <p>红富士是从普通富士的芽（枝）变中选育出的着色系富士的统称...</p> </section> <section> <h2>国光</h2> <p>国光苹果品，又名小国光、万寿。原产美国，1600年发现的偶然实生苗...</p> </section> </article>
由于该代码段中描述的内容首先是一段独立的、完整的内容，因此使用article元素，明显看出改内容分为了三段，每一段都有一个独立的标题，因此使用了两个section元素，第一段其实也应该包含在section元素中，但由于其结构清晰，分析器可以识别第一段内容在一个section元素中，所以将第一个section元素略，但如果第一个section元素里还包括子section元素或子article元素，那么就必须写明第一个section元素了。
示例二
<section> <h1>水果</h1> <article> <h1>苹果</h1> <p><b>苹果</b>,植物类水果，多次花果...</p> </article> <article> <h1>橘子</h1> <p>。。。。。。。。</p> </article> </section>
该代码描述的是文章的一段，因此最初没有使用article（article强调独立，完整），在这段中有几块独立的内容，因此，嵌入了几个独立的article元素。
<nav>
<nav> 标签定义导航链接的部分。nav元素是一个可以用作页面导航的链接组，但并不是所有的链接组都要被放进nav元素，只需将主要的、基本的链接组放进nav元素。
<nav> <a href="http://www.baidu.com">Baidu</a> <a href="http://cn.bing.com/?FORM=HPCNEN">Bing</a> </nav>
<aside>
aside元素用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其他类似的有别于主要内容的部分。
aside元素主要有一下两种使用方法：
- 被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是当前文章相关的参考资料、名字解释，等等。
- 在article元素之外使用，作为页面或站点全局的附属信息部分。最典型的形式是侧边栏。
<!DOCTYPE HTML> <html> <body> <p>Me and my family visited The Epcot center this summer.</p> <aside> <h4>Epcot Center</h4> The Epcot Center is a theme park in Disney World, Florida. </aside> </body> </html>
HTML5新增的非主体结构标签：
<header>
<header> 标签定义文档的页眉（介绍信息）。header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但也可以包含其他内容，例如数据表格、搜索表单或相关的logo图片。
强调：一个网页内并未限制header元素的个数，可以拥有多个，可以为每个内容区块加一个header元素。
<header>
<h1>网页标题</h1>
</header>
<article>
<header>
<h1>文章标题</h1>
</header>
<p>文章正文</p>
</article>
根据最新的W3C HTML5标准，header元素通常包括至少一个heading元素（h1-h6），也可以包括hgroup元素，table或form，nav元素等。
<footer>
<footer> 标签定义文档或节的页脚。
<footer> 元素应当含有其包含元素的信息。
页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。
您可以在一个文档中使用多个 <footer> 元素。
<footer>
<ul>
<li>版权信息</li>
<li>站点地图</li>
<li>联系方式</li>
</ul>
</footer>
<hgroup>
<hgroup> 标签用于对网页或区段（section）的标题进行组合。如果文章只有一个主标题，是不需要hgroup元素的。
<article>
<header>
<hgroup>
<h1>文章主标题</h1>
<h1>文章子标题</h1>
</hgroup>
<p>2015年6月25日</p>
</header>
</article>
<address>
address元素用来在文档中呈现联系信息，包括文档作者或文档维护者的名字、他们的网站链接、电子邮箱、真实地址、电话号码等。
<address>
<a href="http:www.baidu.com">百度</a>
</address>
<output>
<output> 标签定义不同类型的输出，比如计算结果或脚本的输出，值得注意的是，output元素必须从属与某个表单，也就是说，必需将它书写在表单内部，或者对它添加form属性。
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0 <input type="range" id="a" value="50">100 +<input type="number" id="b" value="50"> =<output name="x" for="a b"></output> </form>
注：IE不支持output元素。
<figcaption>和<figure>
<figcaption> 标签定义 figure 元素的标题（caption）。<figure> 标签规定独立的流内容（图像、图表、照片、代码等等）。figure元素是一种元素的组合，带有可选标题。用来表示网页上一块独立的内容，将其从网页上移除后不会对网页上的其他内容产生任何影响。
<figure> <p>黄浦江上的的卢浦大桥</p> <img src="shanghai_lupu_bridge.jpg" width="350" height="234" /> </figure>
<figure> <figcaption>黄浦江上的的卢浦大桥</figcaption> <img src="shanghai_lupu_bridge.jpg" width="350" height="234" /> </figure>
<details>
<details> 标签用于描述文档或文档某个部分的细节。detail元素提供了一种替代JavaScript的、将画面上局部区域进行展开或收缩的办法，目前只有chrome浏览器支持他。
<details> <summary>Copyright 2011.</summary> <p>All pages and graphics on this web site are the property of W3School.</p> </details>
<mark>
<mark> 标签定义带有记号的文本。请在需要突出显示文本时使用 <m> 标签。
<p>Do not forget to buy <mark>milk</mark> today.</p>
<progress>
<progress> 标签标示任务的进度（进程），这个进度可以是不确定的，只是表示进度正在进行，但是不清楚还有多少工作量没有完成，也可以用0到某个大数字之间的数字来表示精确的进度完成情况（譬如百分比）。
<progress value="22" max="100"></progress>
注：IE9级以前的浏览器不支持该标签。
<meter>
<meter> 标签定义已知范围或分数值内的标量测量。也被称为 gauge（尺度）。
例子：磁盘用量、查询结果的相关性，等等。
<meter value="3" min="0" max="10">十分之三</meter> <meter value="0.6">60%</meter>
IE不支持该元素，但是如果添加如下代码IE 6/7/8可以支持。
<!--[if IE]> <script src="http://HTML 5shiv.googlecode.com/svn/trunk/HTML 5.js"></script> <![endif]-->
<command>
command 元素表示用户能够调用的命令。
<command> 标签可以定义命令按钮，比如单选按钮、复选框或按钮。
只有当 command 元素位于 menu 元素内时，该元素才是可见的。否则不会显示这个元素，但是可以用它规定键盘快捷键。
没有浏览器支持 <command> 标签。
只有 Internet Explorer 9 （更早或更晚的版本都不支持）支持 <command> 标签。不做介绍。
未完待续。。。。