共计 3667 个字符，预计需要花费 10 分钟才能阅读完成。
这篇文章的内容主要围绕如何构建 HTML 5 Web 页面进行讲述，文章内容清晰易懂，条理清晰，非常适合新手学习，值得大家去阅读。感兴趣的朋友可以跟随丸趣 TV 小编一起阅读吧。希望大家通过这篇文章有所收获！
HTML 5 是时下 Web 开发领域炒得火热的一个术语，是的，很多人都看好它，也有很多业内知名公司开始正式使用 HTML 5 重新构建自己的网站，如 YouTube 开始使用 HTML 5 视频，Google 已经弃用自家的 Gears，开始全面拥抱 HTML 5 实现离线解决方案，各大浏览器厂家也纷纷开始支持 HTML 5，连被人诟病的微软也声称要在 IE 9 中增加对 HTML 5 的支持。
HTML 5 有何不同？
首先我们要明白 HTML 5 是新的语义结构标记，包括画布，离线存储规范和一些新的内联语义标记，但由于客观原因（主要是浏览器支持的原因），我们不得不限制标记的讨论范围，如画布，离线存储，原生视频或地理定位 API 等，还不是所有的浏览器都支持。
由于新的 HTML 5 标记大都是结构性的，它们的行为与块元素有些类似，为了帮助大家加深对 HTML 5 的理解，我将在下面的内容使用一些新的结构元素。
每个人都应该记住的 doctype（文档类型）
要创建 HTML 5 Web 页面的第一件事情是使用新的 doctype，你一定记住了 HTML 4 或 XHTML 1.x 的 doctype，当我们要从旧的文档通过复制粘贴到新的文档中，必须要修改 doctype，请记住，下面就是 HTML 5 的 doctype：
1
!DOCTYPE html
还是很容易记住吧，而且也不区分大小写，与现在广泛使用的版本要简单得多了，而且保持了向后兼容。
语义结构
在深入标记前，我们先初略看一下一个 Web 页面的大致结构吧。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
html
head
…stuff…
/head
body
p id= header
h2 My Site /h2
/p
p id= nav
ul
li Home /li
li About /li
li Contact /li
/ul
/p
p id=content
h2 My Article /h2
p … /p
/p
p id= footer
p … /p
/p
/body
/html
在上面的例子中，我为所有 DIV 标记增加了 ID，相信大多数 Web 设计师都很熟悉这种做法了，这么做有两个目的，首先，ID 提供了一个钩子，通过它可以对页面的特定部分应用样式，其次，ID 作为一种原始的，伪语义结构，智能解析器将查找标签上的 ID 属性，并尝试猜测其含义，但这是一件很困难的事情，因为每个网站的 ID 可能都不一样。
于是就有了增加新标签的想法，HTML 5 的创造者们就设计了一些新的元素，下面我们就来看看 HTML 5 中新增的一些关键的结构性标记。
◆ header
这个标记计划用来描述一节或一个完整 Web 页面的介绍性信息，header 标记可以包括所有的通常放在页面头部的标志，如果你在页面中使用了 p id= header，它将被 header 取代。
◆ nav
这个元素的含义就不说了，你的导航元素就放在这里，如主站点导航，但在某些情况下也可能有页面导航元素，HTML 5 的创建人 WHATWG 最近修改了 nav 的解释，展示了如何在一个页面上使用两次.
简单说来，如果你在页面中使用了 p id= nav 标记来容纳导航元素，那么你可以使用 nav 进行替换。
◆ section
这个可能是最模糊不清的标记了，按照 HTML 5 规范的解释，一个 section 是一个有主题的内容组，前面通常有一个 header 标记，后面通常跟一个 footer 标记，如果需要，section 也可以嵌套使用。
在我们上面的例子中，标记为“content”的 DIV 是 section 的一个很好候选者，在这个 section 中，根据内容的不同，我们可能有更多的 section。
◆ article
根据 WHATWG 的注释，article 元素是将 section 进行打包形成一个文档或网站独立的部分，例如一篇杂志或报纸文章，或一篇博客文章。
记住，在一个页面中可以有多个 article 元素，例如一个博客首页可能会有 10 多个 article 元素，article 也可以进入 section 元素，因此你在嵌套使用时需要小心，可能一不小心就会出错。
◆ aside
另一个模糊不清的标记是 aside，这个元素表现的是与文档主要文本流无关的内容，也就是相当于一个括号备注，脚注，引用，注释，或者说是类似于侧边栏的东西，根据 WHATWG 的注释，aside 可以用于所有这些情况。
◆ footer
Footer 的含义也非常清楚，它可以用在 section 中，也可以用于一个页面的底部。
全部放在一起
现在我们全部使用新标记重写前面的示例页面。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
!DOCTYPE html
html
head
…stuff…
/head
body
header
h2 My Site /h2
/header
nav
ul
li Home /li
li About /li
li Contact /li
/ul
/nav
section
h2 My Article /h2
article
p … /p
/article
/section
footer
p … /p
/footer
/body
/html
是不是更干净，更易于理解呢？我们可以把 h2 My Article /h2 打包到 header 标记中。另外请注意，我们可以在 article 元素下再增加一个 footer 元素，用来容纳如翻页导航，相关文章或其它内容。
新标记的样式
在大多数浏览器中，你只需要如往常一样对元素使用样式，但是请一定要对每个元素加上 display:block; 规则，随着时间的推移，浏览器对 HTML 5 新元素的支持越来越标准后，就可以不使用了。
下面我们队 header 应用一些样式：
1
2
3
4
5
header {
display: block;
font-size: 36px;
font-weight: bold;
}
记住，你现在仍然可以在这些元素上添加 class 和 ID 属性，因此，如果你想对导航小节单独使用一个样式，你可以向下面这样增加一个 class 或 ID 属性：
1
nav >
然后再应用一个样式：
1
2
3
nav.main-menu {
font-size: 18px;
}
与旧浏览器的兼容
这些样式都不能在 IE 6 下使用，如果你坚持要保持与旧浏览器兼容，也是有补救办法的，IE 6 可以解析这些标记，但不能应用样式，解决办法就是使用 JavaScript，使用 createElement 方法就可以让 IE 支持 HTML 5 标记的样式了，你可以在 HTML 5 文件的头部包括这段代码，也可以保存到一个独立文件中，然后进行引用。
1
2
3
4
5
6
7
8
script
document.createElement(header
document.createElement(nav
document.createElement(section
document.createElement(article
document.createElement(aside
document.createElement(footer
/script
你可能要问，为什么没有给这段脚本指定 MIME 类型呢？在 HTML 5 中无需指定了，在 HTML 5 中，所有的脚本都假设是 type= text/javascript，因此不必再多此一举了。
虽然 IE 的问题得到了解决，但据我所知，Firefox 2 中的 Gecko 渲染引擎仍然存在一个 bug，解决办法有两个，但这两个办法都不是很理想，考虑到 Firefox 2 的使用人数已经很少，你可以完全忽视这个 bug。
现在你已经可以使用 HTML 5 了，但应该使用吗？
答案很简单：是的！
但这也要根据网站的性质做出调整，例如，假设你要重构 CNN 主页，那可能不太现实，最好还是等浏览器的支持更好一些再说，但如果你是在翻新你的博客系统，那么你可以一试，如果你使用的 WordPress，目前已经出现了一些插件可以帮助你，这里就有一个 HTML 5 的 WordPress 主题。
你也可以去 HTML 5 画廊（http://html5gallery.com/）瞧瞧，因为它全部是用 HTML 5 构建的，可以看看其源码，加深对 HTML 5 标记的理解。还可以继续关注 51CTO.com 的 HTML 5 专题，我们会持续更新关于 HTML 5 的技术应用和资讯报道。
如果你还有点犹豫不决，那你去看看 Google 的主页，已经是 HTML 5 了，保险一点的话，你可以使用 JavaScript 声明这些新标记进行使用。HTML 5 的标记远不止这些，希望本文能消除你的疑虑，大胆使用 HTML 5，只有使用的人多了，这个规范才能真正见效。
感谢你的阅读，相信你对“如何构建 HTML 5 Web 页面”这一问题有一定的了解，快去动手实践吧，如果想了解更多相关知识点，可以关注丸趣 TV 网站！丸趣 TV 小编会继续为大家带来更好的文章！
