用 HTML 5 中的结构元素构建一个博客网站

本节主要介绍一个使用 HTML 5 中的各种结构元素来构建博客网站的案例，旨在通过该

案例使读者触类旁通，充分了解 HTML 5 中的各种结构元素的作用、使用场合及使用方法，

从而构建出与之相类似的、结构分明的、语义清晰的 HTML 5 网站。

在介绍具体案例之前，先概要介绍一下 HTML 5 中的网页结构与 HTML 4 中的网页结构

的区别；HTML 5 中添加了哪些结构元素，这些结构元素的作用与使用场合是什么；HTML 5

中的网页大纲是什么，这些结构元素会在网页大纲的生成过程中起到什么样的作用，一份网

页大纲是根据什么原则生成的。

另外，本节所介绍的知识点均为概要介绍，详细理论知识请参阅笔者所著的《HTML 5

与 CSS 3 权威指南》 一书。

 

1.1.1　案例知识点

 

1. HTML 4 中表达文档结构的方法

一般来说，人们在书写包括 HTML 在内的文档时，习惯上按照类似于“章→节→小节”

这样的层次结构来进行。在 HTML 4 网页文档中，为了描述这样的层次结构，一般使用标题

元素（h1 ～ h6）。

例如，在 HTML 4 之前，为了在页面中表达“章→节→小节”这样的三层结构，一般采

用如代码清单 1-1 所示的代码进行书写。

 

代码清单 1-1　HTML 4 之前的文档结构的表示方法

1 HTML5 的基础知识

1.1 HTML5 概述

（1.1 的正文）

1.1.1 HTML5 是什么？

（1.1.1 的正文）

1.1.2 HTML5 中的新增API

（1.1.2 的正文）

1.2 HTML5 快速入门

（1.2 的正文）

1.2.1 HTML 与XHTML

（1.2.1 的正文）