HTML5之HTML元素扩充(上)—新增加的元素及使用概述
日期：2014-05-17 浏览次数：20608 次
HTML5之HTML元素扩展(上)—新增加的元素及使用概述
考虑我们开发一个页面的过程：
1.设计页面的结构 - HTML：这个过程是使用各种HTML元素构建网页的结构。
2.设计页面的外观 - CSS：这个过程是使用CSS去改善网页的外观。
3.设计页面的行为 - Javascript：这个过程是给网页的元素赋予一定的行为。
上面这些除了CSS外，HTML5在另外两个方面都不同程度的进行了扩充。这个系列是集中在第一个方面。在前面，我们已经学习了复杂的canvas和svg元素，下面的章节会总结其他HTML5增加的元素。
结构型元素
HTML5中加入了全新的结构型元素，例如页眉header，页脚footer，导航nav，内容article，章节section等。含义如下图所示：
除了这种整个页面的结构型元素，html5也加入了块级别的语义元素，例如辅助元素aside，图像元素figure，细节描述元素details等。这些元素除了更能显示页面的布局含义外，与普通的div并没有其它的区别，仍然需要靠CSS去展示这些元素。这里就是简单看一个小例子：
复制代码代码如下:
<html>
<head>
<title>Dxy 博客 </title>
</head>
<body>
<header>
<h1><a href="http://www.cnblogs.com/dxy1982/%22%3Edxy1982 博客</a></h1>
</header>
<section>
<article>
<h2><a href="http://www.cnblogs.com/dxy1982/">文章1</a></h2>
<p>简介</p>
</article>
<article>
<h2><a href="http://www.cnblogs.com/dxy1982/">文章2</a></h2>
<p>简介</p>
</article>
<nav>
<a href="http://www.cnblogs.com/dxy1982/">博客</a>
</nav>
</section>
<nav>
<ul>
<li><h2>信息</h2>
<ul>
<li><a href="http://www.cnblogs.com/dxy1982/">政策</a></li>
<li><a href="http://www.cnblogs.com/dxy1982/">列表</a></li>
</ul></li>
<li><h2>文章</h2>
<ul>
<li><a href='/blog/2007/04/'>1月份</a></li>
<li><a href='/blog/2007/03/'>2月份</a></li>
</ul>
</li>
</ul>
</nav>
<footer>
<p>Copyright 2012 dxy1982</p>
</footer>
</body>
</html>
虽然这些元素使用起来都比较简单，但还是需要注意几点：
1. 不要使用section作为div的替代品
section并不是样式容器。section元素表示的是内容中用来帮助构建文档概要的语义部分。它应该包含一个头部。它通常是最为article的部分存在(当然article作为它的部分也是可以的)。如果你想找一个用作页面容器的元素或者是需要额外的样式容器，还是继续使用div吧。
2. 只在需要的时候使用header和hgroup
写不需要写的标签是毫无意义的。header和hgroup的使用场景通常如下：
? header元素表示的是一组介绍性或者导航性质的辅助文字，经常用作section的头部。
? 当头部有多层结构时，比如有子头部，副标题，各种标识文字等，使用hgroup将h1-h6元素组合起来作为section的头部。
这里如果header或hgroup只有少数头部元素，不如就去掉这2个鸡肋标签吧，例如：
复制代码代码如下:
<article>
<header>
<h1>My best blog post</h1>
</header>
<!-- Article content -->
</article>
直接修改成：
复制代码代码如下:
<article>
<h1>My best blog post</h1>
<!-- Article content -->
</article>
同样的道理：
复制代码代码如下:
<header>
<hgroup>
<h1>My best blog post</h1>
</hgroup>
<p>by Rich Clark</p>
</header>
直接改成：
复制代码代码如下:
<header>
<h1>My best blog post</h1>
<p>by Rich Clark</p>
</header>
3. 不要滥用nav
nav元素表示页面中链接到其他页面或者本页面其他部分的区块；包含导航链接的区块。
但是不是所有页面上的链接都需要放在nav元素中——这个元素本意是用作主要的导航区块。举个具体的例子，在footer中经常会有众多的链接，比如服务条款，主页，版权声明页等等。footer元素自身已经足以应付这些情况，虽然nav元素也可以用在这里，但通常我们认为是不必要的。
4. 不要滥用figure
figure应该是“一些流动的内容，有时候会有包含于自身的标题说明。一般在文档流中会作为独立的单元引用。”这正是figure的最佳适用场景——它可以从主内容页移动到sidebar中，而不影响文档流。figure只应该被引用在文档中，或者被section元素围绕。
如果纯粹只是为了呈现的图(比如logo)，也不在文档其他地方引用，也没有移动位置的需要，那就绝对不要使用figure。
5. 不要使用不必要的type属性
在HTML5中，script和style元素不再需要type属性。当然写上并没有什么问题，只不过从最佳实践的角度，是不需要写的。
音频元素
audio元素用于标识声音内容，比如说音乐或是任何的其他音频流。该元素支持的格式如下表所示：
IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
Ogg Vorbis √ √ √
MP3 √ √ √
Wav √ √ √
audio标签有一些属性用来控制音频的内容、何时以及如何播放等方面的情况，这些属性分别是：src(文件名)、preload(在页面加载时加载)、controls(显示控制)、loop(循环)和autoplay(自动播放)
考虑我们开发一个页面的过程：
1.设计页面的结构 - HTML：这个过程是使用各种HTML元素构建网页的结构。
2.设计页面的外观 - CSS：这个过程是使用CSS去改善网页的外观。
3.设计页面的行为 - Javascript：这个过程是给网页的元素赋予一定的行为。
上面这些除了CSS外，HTML5在另外两个方面都不同程度的进行了扩充。这个系列是集中在第一个方面。在前面，我们已经学习了复杂的canvas和svg元素，下面的章节会总结其他HTML5增加的元素。
结构型元素
HTML5中加入了全新的结构型元素，例如页眉header，页脚footer，导航nav，内容article，章节section等。含义如下图所示：
除了这种整个页面的结构型元素，html5也加入了块级别的语义元素，例如辅助元素aside，图像元素figure，细节描述元素details等。这些元素除了更能显示页面的布局含义外，与普通的div并没有其它的区别，仍然需要靠CSS去展示这些元素。这里就是简单看一个小例子：
复制代码代码如下:
<html>
<head>
<title>Dxy 博客 </title>
</head>
<body>
<header>
<h1><a href="http://www.cnblogs.com/dxy1982/%22%3Edxy1982 博客</a></h1>
</header>
<section>
<article>
<h2><a href="http://www.cnblogs.com/dxy1982/">文章1</a></h2>
<p>简介</p>
</article>
<article>
<h2><a href="http://www.cnblogs.com/dxy1982/">文章2</a></h2>
<p>简介</p>
</article>
<nav>
<a href="http://www.cnblogs.com/dxy1982/">博客</a>
</nav>
</section>
<nav>
<ul>
<li><h2>信息</h2>
<ul>
<li><a href="http://www.cnblogs.com/dxy1982/">政策</a></li>
<li><a href="http://www.cnblogs.com/dxy1982/">列表</a></li>
</ul></li>
<li><h2>文章</h2>
<ul>
<li><a href='/blog/2007/04/'>1月份</a></li>
<li><a href='/blog/2007/03/'>2月份</a></li>
</ul>
</li>
</ul>
</nav>
<footer>
<p>Copyright 2012 dxy1982</p>
</footer>
</body>
</html>
虽然这些元素使用起来都比较简单，但还是需要注意几点：
1. 不要使用section作为div的替代品
section并不是样式容器。section元素表示的是内容中用来帮助构建文档概要的语义部分。它应该包含一个头部。它通常是最为article的部分存在(当然article作为它的部分也是可以的)。如果你想找一个用作页面容器的元素或者是需要额外的样式容器，还是继续使用div吧。
2. 只在需要的时候使用header和hgroup
写不需要写的标签是毫无意义的。header和hgroup的使用场景通常如下：
? header元素表示的是一组介绍性或者导航性质的辅助文字，经常用作section的头部。
? 当头部有多层结构时，比如有子头部，副标题，各种标识文字等，使用hgroup将h1-h6元素组合起来作为section的头部。
这里如果header或hgroup只有少数头部元素，不如就去掉这2个鸡肋标签吧，例如：
复制代码代码如下:
<article>
<header>
<h1>My best blog post</h1>
</header>
<!-- Article content -->
</article>
直接修改成：
复制代码代码如下:
<article>
<h1>My best blog post</h1>
<!-- Article content -->
</article>
同样的道理：
复制代码代码如下:
<header>
<hgroup>
<h1>My best blog post</h1>
</hgroup>
<p>by Rich Clark</p>
</header>
直接改成：
复制代码代码如下:
<header>
<h1>My best blog post</h1>
<p>by Rich Clark</p>
</header>
3. 不要滥用nav
nav元素表示页面中链接到其他页面或者本页面其他部分的区块；包含导航链接的区块。
但是不是所有页面上的链接都需要放在nav元素中——这个元素本意是用作主要的导航区块。举个具体的例子，在footer中经常会有众多的链接，比如服务条款，主页，版权声明页等等。footer元素自身已经足以应付这些情况，虽然nav元素也可以用在这里，但通常我们认为是不必要的。
4. 不要滥用figure
figure应该是“一些流动的内容，有时候会有包含于自身的标题说明。一般在文档流中会作为独立的单元引用。”这正是figure的最佳适用场景——它可以从主内容页移动到sidebar中，而不影响文档流。figure只应该被引用在文档中，或者被section元素围绕。
如果纯粹只是为了呈现的图(比如logo)，也不在文档其他地方引用，也没有移动位置的需要，那就绝对不要使用figure。
5. 不要使用不必要的type属性
在HTML5中，script和style元素不再需要type属性。当然写上并没有什么问题，只不过从最佳实践的角度，是不需要写的。
音频元素
audio元素用于标识声音内容，比如说音乐或是任何的其他音频流。该元素支持的格式如下表所示：
IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
Ogg Vorbis √ √ √
MP3 √ √ √
Wav √ √ √
audio标签有一些属性用来控制音频的内容、何时以及如何播放等方面的情况，这些属性分别是：src(文件名)、preload(在页面加载时加载)、controls(显示控制)、loop(循环)和autoplay(自动播放)
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
