【HTML5】一个适用于任何项目的HTML5基础模板
概述
当你学习 HTML5 并把新技术添加到自己的工具箱时，你很可能会想要搭建自己的样板，这样你就可以开展自己所有的基于 HTML5 的项目。我们鼓励这种做法，并且你也可以考虑使用一种在线资源作为你基础 HTML5 样板的出发点。
然而，在这个项目中，我们想要从头开始构建我们的代码，并且在进行的过程中解释每一个部分。当然，我们痴心妄想打算用一个哪怕荒诞不实际或粗陋的示例网站来包含所有的新元素或新技术都是不可能的，因此，我们也将解释不适合该项目的一些新特性。通过这种方式，你在决定如何搭建自己的 HTML5 和 CSS3 网站或网页应用时会有一系列熟悉的选择，所以你可以把这本书作为一系列技术的快速参考。
让我们以一个 HTML5 的网页骨架为例：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!doctype html>
<html lang="en"> <head> <meta charset="utf-8">
<title>The HTML5 Herald</title> <meta name="description" content="The HTML5 Herald"> <meta name="author" content="SitePoint">
<link rel="stylesheet" href="css/styles.css?v=1.0">
<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head>
<body> <script src="js/scripts.js"></script> </body> </html> |
最基本的模板已经就位，我们现在就来检验下标签中的重要部分以及它们与之前的 HTML 相比的可能不同。
文档类型声明
首先，我们有文档类型声明（Document Type Declaration, 或者 doctype）。这是告诉浏览器或者其他解析器文档类型的简单方法。在 HTML 文件中，它可以表现 HTML 文件的特定版本或风格。很多年前，文档类型声明简直一团糟，既不美观也很难记忆。比如 XHTML 1.0 Strict：
|
1 2 3 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
再比如 HTML4 Transitional：
|
1 2 3 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
尽管文档开头的一长串文本对我们并没有什么坏处（除了需要浏览器使用者下载额外字节的数据外），但 HTML5 已经拔除了这个眼中钉。现在你只需这样：
|
1 2 |
<!doctype html>
|
简单，而且切中要点。文档类型声明可以大写，可以小写，也可以大小写混用。你会明显发现声明中去掉了“5”。虽然当前网页标签的重点是人们所知的 HTML5，但它真的只是过去 HTML 标准的演化而已，并且未来的规范也只会是现今规范的发展而已。
因为浏览器常常被要求能够支持所有存在的网页内容，文档类型声明中并没有相关内容来告诉它们应该支持给定文档中的哪些功能。换句话说，单独的文档类型声明并不会使你的页面兼容 HTML5。这事实上由浏览器来完成，事实上，你可以使用一种老的文档类型声明加上 HTML5 的新元素，网页会显示出和使用 HTML5 的文档类型声明一样的效果。
html 元素
HTML 文档中紧接着是 html 元素，它在 HTML5 中没有明显变化。我们的示例中加入了具有 en 值的 lang 属性，用来说明文档的语言是英语。在基于XHTML的语法中，你会被要求加入一个 xmlns 属性。而在 HTML5 中就不再需要这样了，并且即便是 lang 属性对于验证文档或保证功能正确也不是必需的。
下面是我们到目前为止的所有内容，包括结束标签 </html>。
|
1 2 3 5 |
<!doctype html> <html lang="en">
</html> |
head 元素
我们页面的下一个部分是 <head> 部分。<head> 内的第一行用来定义文档的字符编码，这是另一个从 XHTML 和 HTML4 中简化出来的元素，并且是一个优选功能，不过推荐使用。过去，你可能需要这样写：
|
1 2 |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
HTML5 通过减少字符编码 <meta> 标签到最低限度来改善这一点：
|
12
|
<meta charset="utf-8"> |
几乎所有的情况你都可以在文档中使用 utf-8 值。字符编码的完整解释超出了本章的范围，而且它可能也不会那么让你感兴趣。不过，如果你想深入研究一点，你可以读读W3C和WHATWG的相关话题。
注释：编码声明
为了保证所有的浏览器可以正确读出字符编码，整个字符编码声明必须被包括在某处文档的512个字符之内。它也应该出现在任何基于内容的元素之前（比如后面在我们的示例网站上的 <title> 元素）。
关于这个主题我们还有很多可以写，但为了让你不打瞌睡，我们这些细节上放你一马！现在，我们的文档能接受这个简化的声明，并进入我们文档的下一部分：
|
1 2 3 4 6
|
<title>The HTML5 Herald</title> <meta name="description" content="The HTML5 Herald"> <meta name="author" content="SitePoint">
<link rel="stylesheet" href="css/styles.css?v=1.0">
|
在这些内容中，HTML5 与以前没什么不同，页面标题（head里面唯一的强制性元素）和它一贯的声明相同，并且我们加入的meta标签仅仅是用来指明安排位置的可选的示例；你爱在这里放多少 meta 元素都没问题。
这个块标记的关键部分是样式表，包括加入习惯的 link 元素在内。相比于 href 和 rel，link并没有被要求额外的属性。type 属性（在旧版 html 中非常普遍）并不是必须的，其实过去也并不需要它来指示样式表的内容类型。
公平的游戏场所
我们标记的下一个元素在介绍前需要一点背景知识。HTML5 包含了很多新的元素，比如 article 和 section，这些我们后面会涉及。你也许认为旧版浏览器对这些元素的支持会成为主要问题，但你错了。这是因为实际上大多数浏览器不在乎你使用了什么标签。如果你的 HTML 文件中有一个 recipe标签（甚至 ziggy 标签），并且你的 CSS 关联了这个元素的一些样式，几乎所有的浏览器都会像完全正常一样继续进行，运行你的样式没有任何抱怨。
当然，这样一个假设的文件将无法验证，并可能有可访问性问题，但它在几乎所有的浏览器都能正确渲染，除了 IE 的旧版。在 9 版本之前，IE 阻止未识别元素的样式接受。这些神秘要素被渲染引擎看成“未知元素”，让你无法改变他们的外观或行为方式。这不仅包括我们想象的元素，也包括在这些浏览器的版本被开发前未被定义的任何元素。那就是（你猜对了）HTML5 元素。
好消息是，在作者写作的时候，大部分人已经使用 IE 9 或更高的版本，极少数正在使用 9 版本，所以对于大部分开发者而言这不再是一个大的问题；然而，如果你的观众中大部分使用 IE8 或更早的版本，你将不得不采取行动确保你的设计不会崩溃。
幸运的是，有一个解决方式：一个由 Jhon Resig 开发的非常简单的 Javascript 组件。被 Sjoerd Visscher 的一个想法所启发，它可以使新的 HTML5 元素在旧版本的 IE 设置样式。
我们已经在我们的标记中包含了这个被传统注释包围的所谓的“ HTML5 shiv ”。有条件的评论是在Internet Explorer9 和更早版本实现了一个专有功能。他们有为你提供目标的特定版本的浏览器脚本或风格的能力。下面的条件注释告诉浏览器封闭的标记应该只出现于浏览用户使用 Internet Explorer9 之前版本的网页：
|
1 2 3 4 |
<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
|
应该注意的是,如果你正在使用一个 JavaScript 库，用于处理 HTML5 特性或新 API,它很有能已经有了 HTML5 能力的脚本呈现；在这种情况下，可以删除参考脚本。Modernizr 就可以当成一个例子，一个检测现代 HTML 和 CSS 样式的 Javascript 库。它会给你选择加入代码使 IE 更老的版本能够使用 HTML5 元素，所以 shiv 将会是多余的。我们在 Appendix A 中可以更加了解Modernizr 。
注释：不是所有人都能从 HTML5 Shiv 得益
当然，依然有一些用户不能获益于 HTML5 shiv：那些由于某种原因禁用 Javascript 或者使用 IE8 或者更低版本浏览器的人。作为网页设计师，我们一直被告知，我们网站的内容应该为所有的用户所接受，甚至是那些没有 Javascript 的。但这并不像看上去的那么坏。大量研究表明，禁用 Javascript 的用户的数量低的不足以引起关注，尤其是当你把这其中又会有几人使用 IE8 或更低版本这个因素考虑进去。
在2013年10月公布的一个研究中，英国政府数字服务部门表示浏览英国政府网络服务的用户禁用 Javascript 或者不能使用的占1.1 %。另一个由雅虎开发者网络开展的研究（2010年10月公布），表明禁用 JavaScript 的用户数量占世界总流通量的1 %左右。
余下的众所周知
看看我们起始结构的剩余部分，我们有常见的 body 元素以及它附近的标签以及紧接着的 html 标签，我们还有一个内部 script 元素与 Javascript 文件有关。
很像之前讨论过的 link 标签，<script> 标签不需要你去声明 type 属性。如果你曾经写过 XHTML，你可能记得你的 script 标签长这样：
|
2
|
<script src="js/scripts.js" type="text/javascript"></script>
|
事实上，因为 Javascript 是唯一一个真正用于 Web 的脚本语言，并且因为所有的浏览器都会假设你在使用 Javascript 即使你没有明确的声明这一事实，type 属性在 HTML5 中不是必需的：
|
12
|
<script src="js/scripts.js"></script> |
我们已经把脚本元素在页面的底部，以符合嵌入JavaScript的最佳实践。这与页面的加载速度有关。当浏览器遇到一个脚本，它解析脚本时将暂停下载和渲染页面的其余部分。这会导致当大量脚本在页面顶部比任何内容先出现时页面下载明显慢得多。这就是为什么大多数脚本应该被放置在页面底部，这样它们仅仅在其余页面都被下载完后才会被解析。
- 赞
