第一章 1.6 HTML5 的新功能(一)

在讨论 HTML5 编程之前，让我们快速预览一下 HTML5 的新功能。

1.6.1新的 DOCTYPE 和字符集

首先，根据 HTML5 设计准则的第 3 条——化繁为简，Web 页面的 DOCTYPE 被极大地简化了。以下面这段 HTML4 DOCTYPE 代码为例进行对比：
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” ”http://www.w3.org/TR/html4/loose.dtd”>
谁能记得住？所以在新建页面的时候，我们往往只能通过复制粘贴的方式添加这么长的DOCTYPE，同时脑子里还不确定复制的对不对。HTML5 干净利索地解决了这个问题：
<!DOCTYPE html>
现在的 DOCTYPE 好记多了。跟 DOCTYPE 一样，字符集的声明也被简化了。过去是这样的：
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
现在成了：
<meta charset=”utf-8″>
使用新的 DOCTYPE 后，浏览器默认以标准模式（standards mode）显示页面。例如， Firefox用打开一个 HTML5 页面，然后点击“ 工具➤页面信息” （Tools ➤ Page Info），会看 到图 1-1 所示的画面。示例页面是以标准模式显示的。使用 HTML5 的 DOCTYPE 会触发浏览器以标准兼容模式显示页面。众所周知，Web 页面有多种显示模式，比如怪异模式（Quirks） 近标准模式、（Almost Standards）以及标准模式（Standards）。其中标准模式也被称为非怪异模式（no-quirks） 浏览器会根据 DOCTYPE 来识别该使用哪种模式，。以及使用什么规则来验证页面。在怪异模式下，浏览器会尽量不中断页面显示，即使没有完全通过验证也会将其显示出来。HTML5 引入了新的标记元素和其他机制（随后会详细讨论），因此如果坚持使用已废弃的元素，那么页面将无法通过验证。

1.6.2 新元素和旧元素

HTML5 引入了很多新的标记元素，根据内容类型的不同，这些元素被分成了 7 大类。见表1-1。

HTML5的内容类型

内容类型描述
内嵌 向文档中添加其他类型的内容，例如audio、video、canvas和iframe等
流 在文档和应用的body中使用的元素，例如form、h1和small等
标题 段落标题，例如h1、h2和hgroup等
交互 与用户交互的内容，例如音频和视频的控件、button和texta
元数据 通常出现在页面的head中，设置页面其他部分的表现和行为，例如script、style
短语 文本和文本标记元素，例如mark、kbd、sub和sup等
片段 用于定义页面片段的元素，例如article、aside和title等

上述所有类型的元素都可以通过 CSS 来设定样式。此外，虽然其中一些元素，如 canvas、audio 和 video，在使用时往往需要其他 API 来配合，以实现细粒度控制，但它们同样可以直接使用。我们在后续章节中详细讨论这类元素 API。限于篇幅，本书讨论的内容无法涵盖所有新元素，不过片段类元素是全新的，我们会在下一节讨论，而 canvas、audio 和 video 作为 HTML5 新增的元素也会在后续章节中详细讨论。

同样地，对于旧的标签元素，网上的资料已经很多了，我们不会把所有旧的标签元素都罗列出来。不过需要注意的是，HTML5 中移除了很多在行内设样式的标记元素，如 big、center、font 和 basefont 等，以鼓励开发人员使用 CSS。

1.6.3 语义化标记

片段类的内容类型包含许多 HTML5 元素。HTML5 定义了一种新的语义化标记来描述元素的内容。虽然语义化标记不会让你马上感受到有什么好处，但是它可以简化 HTML 页面设计，并且将来搜索引擎在抓取和索引网页的时候，也绝对会利用到这些元素的优势。前面我们说过，HTML5 的宗旨之一就是存在即合理。Google 分析了上百万的页面，从中发现了 DIV 标签的通用 ID 名称重复量很大。例如，很多开发人员喜欢使用 DIV id=”footer”来标记页脚内容，所以 HTML5 引入了一组新的片段类元素，在目前主流的浏览器中已经可以用了。

 1-2 HTML5中新的片段类元素

元素名描述
header 标记头部区域的内容（用于整个页面或页面中的一块区域）
footer 标记脚部区域的内容（用于整个页面或页面中的一块区
section Web页面中的一块区域
article 独立的文章内
aside 相关内容或者引文
nav 导航类辅助内容

上面所有的元素都能用 CSS 设定样式。之前说到了 HTML5 效率优先的设计理念，它推崇表现和内容的分离，所以在 HTML5 的实际编程中，开发人员必须使用 CSS 来定义样式。代码清单1-1 是一个 HTML5 页面的概貌，其中使用了新的 DOCTYPE、字符集和语义化标记元素——新的片段类元素。示例代码对应的源码在 code/intro 文件夹中。

代码清单 1-1 HTML5 示例页面

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8" >
 5 <title>HTML5</title>
 6 <link rel="stylesheet" href="html5.css">
 7 </head>
 8 <body>
 9 <header>
10     <h1>Header</h1>
11     <h2>Subtitle</h2>
12     <h4>HTML5 Rocks!</h4>
13 </header>
14 <div id="container">
15     <nav>
16         <h3>Nav</h3>
17         <a href="http://www.example.com">Link 1</a> 
18         <a href="http://www.example.com">Link 2</a>
19         <a href="http://www.example.com">Link 3</a>
20     </nav>
21     <section>
22         <article>
23             <header>
24                 <h1>Article Header</h1>
25             </header>
26             <p>Lorem ipsum dolor HTML5 nunc aut nunquam sit amet, consectetur adipiscing elit. Vivamus at est eros, vel fringilla urna.</p>
27             <p>Per inceptos himenaeos. Quisque feugiat, justo at vehicula pellentesque, turpis lorem dictum nunc.</p>
28             <footer>
29                 <h2>Article Footer</h2>
30             </footer>
31         </article>
32         <article>
33             <header>
34                 <h1>Article Header</h1>
35             </header>
36             <p>HTML5: "Lorem ipsum dolor nunc aut nunquam sit amet, consectetur adipiscing elit. Vivamus at est eros, vel fringilla urna. Pellentesque odio</p>
37             <footer>
38                 <h2>Article Footer</h2>
39             </footer>
40         </article>
41     </section>
42     <aside>
43         <h3>Aside</h3>
44         <p>HTML5: "Lorem ipsum dolor nunc aut nunquam sit amet, consectetur adipiscing elit. Vivamus at est eros, vel fringilla urna. Pellentesque odio rhoncus</p>
45     </aside>
46     <footer>
47         <h2>Footer</h2>
48     </footer>
49 </div>
50 </body>
51 </html>

没有样式的页面看起来有些枯燥乏味。代码清单1-2是一些可以用来设置内容样式的 CSS 代码。需要注意的是，这份样式表使用了 CSS3的一些新特性，比如圆角（border-radius）和旋转变换（transform:rotate();）。CSS3同 HTML5一样也正在开发过程中，并且为了便于浏览器逐步支持，也采用了模块化的方式发布子规范（例如变换（transformation） 动画、（animation）和过渡（transition）分别对应不同的子规范）。

CSS3 的规范很可能还会变动，CSS3 中的功能也处于实验期，因此为了避免命名空间冲突，这些功能都会加上浏览器厂商的前缀。要显示圆角、渐变（gradients）、阴影（shadows）和变形（transformations）的话，需要在声明的部分加上前缀：-moz-（Mozilla 浏览器）、o-（Opera 浏览器）和-webkit-（Safari 和 Chrome 等基于 WebKit 核心的浏览器）。代码清单 1-2 HTML5 页面对应的 CSS 文件

body {
 background-color:#CCCCCC;
 font-family:Geneva, Arial, Helvetica, sans-serif;
 margin: 0px auto;
 max-width:900px;
 border:solid;
 border-color:#FFFFFF;
}
header {
 background-color: #F47D31;
 display:block;
 color:#FFFFFF;
 text-align:center;
}
header h2 {
 margin: 0px;
}
h1 {
 font-size: 72px;
 margin: 0px;
}
h2 {
 font-size: 24px;
 margin: 0px;
 text-align:center;
 color: #F47D31;
}
h3 {
 font-size: 18px;
 margin: 0px;
 text-align:center;
 color: #F47D31;
}
h4 {
 color: #F47D31;
 background-color: #fff;
 -webkit-box-shadow: 2px 2px 20px #888;
 -webkit-transform: rotate(-45deg);
 -moz-box-shadow: 2px 2px 20px #888;
 -moz-transform: rotate(-45deg);
 position: absolute;
 padding: 0px 150px;
 top: 50px;
 left: -120px;
 text-align:center;
}
nav {
 display:block;
 width:25%;
 float:left;
}
nav a:link, nav a:visited {
 display: block;
 border-bottom: 3px solid #fff;
 padding: 10px;
 text-decoration: none;
 font-weight: bold;
 margin: 5px;
}
nav a:hover {
 color: white;
 background-color: #F47D31;
}
nav h3 {
 margin: 15px;
 color: white;
}
#container {
 background-color: #888;
}
section {
 display:block;
 width:50%;
 float:left;
}
article {
 background-color: #eee;
 display:block;
 margin: 10px;
 padding: 10px;
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 border-radius: 10px;
 -webkit-box-shadow: 2px 2px 20px #888;
 -webkit-transform: rotate(-10deg);
 -moz-box-shadow: 2px 2px 20px #888;
 -moz-transform: rotate(-10deg);
}
article header {
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 border-radius: 10px;
 padding: 5px;
}
article footer {
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 border-radius: 10px;
 padding: 5px;
}
article h1 {
 font-size: 18px;
}
aside {
 display:block;
 width:25%;
 float:left;
}
aside h3 {
 margin: 15px;
 color: white;
}
aside p {
 margin: 15px;
 color: white;
 font-weight: bold;
 font-style: italic;
}
footer {
 clear: both;
 display: block;
 background-color: #F47D31;
 color:#FFFFFF;
 text-align:center;
 padding: 15px;
}
footer h2 {
 font-size: 14px;
 color: white;
}
/* links */
a {
 color: #F47D31;
}
a:hover {
 text-decoration: underline;
}

图 1-2 是代码清单 1-1 中的页面应用了 CSS（包括部分 CSS3）之后的显示效果。其实并不能把这个页面当成所谓的典型 HTML5 页面。因为计划赶不上变化，这个示例使用了很多新标签只是为了演示而已。
1
最后需要说明的是，看起来好像浏览器是因为识别了新的元素，所以显示出了对应的内容。其实不然，事实上这些元素很可能是先被重命名为了 foo 或者 bar，然后再应用样式，最后才显示出来的（当然，对于搜索引擎优化来说没有任何好处）。IE 是个特例，因为 IE 需要将这些元素都作为 DOM 的一部分，所以要想在 IE 中看到这些元素，必须用编程的方式把它们插入 DOM中，然后再以块元素（block element）的形式显示出来。

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/bjmumu/p/3924059.html