2.2 HTML 5新增内容
视频讲解：光盘\TM\lx\2\02 HTML 5新增内容．mp4
自从2010年HTML 5正式推出以来，就以一种惊人的速度被迅速地推广，世界各知名浏览器厂商也对HTML 5有很好的支持。例如，微软就对IE 9做了标准上的改进，使其能够支持HTML 5。而且HTML 5还有一个特点，就是在老版本的浏览器上也可以正常运行。本节将为大家介绍与HTML 4相比，HTML 5新增的元素与属性。
注意
HTML 5的出现代表着Web开发进入了一个新的时代。但这并不表示现在用HTML 4开发的网站要重新创建，因为HTML 5内部功能并不是革命性的，而是发展性的。这正是HTML 5兼容性的表现。
2.2.1 新增的元素
在HTML 5中新增了以下元素。
<section>元素
<section>元素表示页面中的一个区域，例如章节、页眉、页脚或页面中的其他部分。可以与h1、h2、h3、h4等元素结合起来使用，标示文档结构。
【例2.12】应用<section>标记在页面中定义一个区域。代码如下：
<section>
<h2>section标记的使用</h2>
<p>完成百分比：100%</p>
<input type="button" value="请单击"/>
</section>
上面这段代码相当于在HTML 4中使用<div>标记在页面中定义了一个区域。
<article>元素
<article>元素表示页面中的一块与上下文不相关的独立内容，例如博客中的一篇文章、一段用户评论等。除了内容部分，一个<article>元素通常有自己的标题、脚注等内容。
【例2.13】应用<article>元素在页面中定义一个区域。代码如下：
<article>
<header>
<h1>苹果美容</h1>
</header>
<p>苹果素有"水果之王"的美称，它含有丰富的维生素C，能让皮肤细嫩、柔滑而白皙。苹果面膜的做法很简
单，将苹果去皮去核切块后放入搅拌机中搅成泥状，干性皮肤的美眉在苹果泥中加入新鲜的牛奶或蜂蜜，油性皮
肤的美眉则可加入少量蛋清，搅拌均匀后涂在脸上，敷10～15分钟后洗净，你会发现肤色有明显变化哦。</p>
<footer>
<p>2016-9-27</p>
</footer>
</article>
<header>元素
<header>元素表示页面中一个内容区域或整个页面的标题。在例2.13中就为大家演示了<header>元素的应用。
<footer>元素
<footer>元素表示整个页面或页面中一个内容区域块的脚注，例如日期、作者信息等。在例2.13中就为大家演示了<footer>元素的应用。
<aside>元素
<aside>元素用来表示当前页面或文章的附属信息部分，可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条等信息。
【例2.14】应用<aside>元素定义页面侧栏。（实例位置：光盘\TM\sl\2\9）
关键代码如下：
<aside>
<nav>
<h2>侧栏</h2>
<ul>
<li>
<a href="#">明日图书</a> 2017-2-27
</li>
<li>
<a href="#">明日软件</a> 2017-2-27
</li>
<li>
<a href="#">编程词典</a> 2017-2-27
</li>
</ul>
</nav>
</aside>
图2.16 在页面中添加的侧栏
页面运行结果如图2.16所示。
2.2.2 新增的input元素类型
HTML 5中新增了很多input元素类型，这些新增的元素可以使程序员更加方便地创建页面。HTML 5新增的input元素类型如下：
email
将input元素的类型设置为email，表示文本框必须输入E-mail地址。
url
url表示必须输入URL地址。
number
number表示必须输入数值的文本框。
range
range表示必须输入一定范围内数值的文本框。