![Java Web从入门到精通(第3版)](https://wfqqreader-1252317822.image.myqcloud.com/cover/416/31794416/b_31794416.jpg)
2.2 HTML5新增内容
自从2010年HTML5正式推出,就以一种惊人的速度被迅速地推广,世界各知名浏览器厂商也对HTML5有很好的支持。例如,微软就对下一代IE 9做了标准上的改进,使其能够支持HTML5。而且HTML5还有一个特点就是在老版本的浏览器上也可以正常运行。本节将为大家介绍与HTML4相比HTML5新增的元素与属性。
注意
HTML5的出现代表着Web开发进入了一个新的时代,但是并不表示现在用HTML4开发的网站要重新创建。因为HTML5内部功能并不是革命性的,而是发展性的。这正是HTML5兼容性的体现。
2.2.1 新增的元素
在HTML5中,新增了以下元素。
<section>元素
<section>元素表示页面中的一个区域,例如章节、页眉、页脚或页面中的其他部分。可以与h1、h2、h3、h4等元素结合起来使用,标示文档结构。
【例2.12】 应用<section>标记在页面中定义一个区域。
![](https://epubservercos.yuewen.com/3A7F3C/17214367504799006/epubprivate/OEBPS/Images/figer812.jpg?sign=1739278511-LcFFL6x2xBLmsoQvnubiSz4xbOENhLQ9-0-64f4587d993a6465737305c24d83bf04)
上面这段代码相当于在HTML4中使用<div>标记在页面中定义一个区域。
<article>元素
<article>元素表示页面中的一块与上下文不相关的独立内容,例如博客中的一篇文章、一段用户评论等。除了内容部分,一个<article>元素通常有自己的标题、脚注等内容。
【例2.13】 应用<article>元素在页面中定义一个区域。
![](https://epubservercos.yuewen.com/3A7F3C/17214367504799006/epubprivate/OEBPS/Images/figer813.jpg?sign=1739278511-qS8cRbt04jSkTn2tCWGlmW1yznIV6D6z-0-8175304563c22a39ee13f9c2507662fd)
<header>元素
<header>元素表示页面中一个内容区域或整个页面的标题。在例2.13中就为大家演示了<header>元素的应用。
<footer>元素
<footer>元素表示整个页面或页面中一个内容区域块的脚注。例如日期、作者信息等,在例2.13中就为大家演示了<footer>元素的应用。
<aside>元素
<aside>元素用来表示当前页面或文章的附属信息部分。可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条等信息。
【例2.14】 应用<aside>元素定义页面侧栏。(实例位置:资源包\TM\sl\2\9)
![](https://epubservercos.yuewen.com/3A7F3C/17214367504799006/epubprivate/OEBPS/Images/figer814.jpg?sign=1739278511-dEIDmucsEgXCnvoPZaBvrtRtMaMr1SsV-0-54b3dbd4823c907e5c8f8d8d6f9fd4fe)
页面运行结果如图2.16所示。
![](https://epubservercos.yuewen.com/3A7F3C/17214367504799006/epubprivate/OEBPS/Images/figer815.jpg?sign=1739278511-jpmOYFDY12vcXUd0M5f9Tcz3J59XlpO1-0-a7d6ea42ab83b279f1ab7ebe8f171b4c)
图2.16 在页面中添加的侧栏
2.2.2 新增的input元素类型
HTML5中新增了很多input元素类型,这些新增元素的添加可以使程序员更加方便地创建页面。HTML5新增的input元素类型如下。
email
将input元素的类型设置为email,表示文本框必须输入Email地址。
url
url表示必须输入URL地址。
number
number表示必须输入数值的文本框。
range
range表示必须输入一定范围内数字值的文本框。