2.1 HTML5基本概念

XHTML（eXtensible HyperText Markup Language，可扩展的超文本标签语言）是一种基于XML（eXtensible Markup Language，可扩展的标签语言）与HTML（HyperText Markup Language，超文本标签语言）的新型标签语言和结构语言。

2.1.1 HTML5简介

HTML是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言，主要用于描述超文本中内容的显示方式。2014年10月29日，万维网联盟宣布，经过几乎8年的艰辛努力，HTML5标准规范终于制定完成了，并已公开发布。HTML5将会取代1999年制定的HTML 4.01、XHTML 1.0标准，期待可以在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求，为桌面和移动平台带来无缝衔接的丰富内容。

HTML是一种标记语言，标记语言经过浏览器的解释和编译，虽然它本身不能显示在浏览器中，但在浏览器中可以正确显示HTML标记的内容。HTML语言从1.0至5.0经历了巨大的变化，从单一的文本显示功能到图文并茂的多媒体显示功能，许多特性经过多年的完善，已经成为一种非常完善的标记语言。

使用XHTML语言创建的文档，其扩展名与由HTML创建的文档相同，既可以是.htm，也可以是.html。

目前，所有的网页浏览器都可以完全解析XHTML文档，并显示出来。一个典型的XHTML文档由各种以尖括号“<>”括住的标签组成，主要包括DTD（Document Type Definition，文档类型声明）、HTML命名空间等两个部分。其结构如下所示。

在上面的代码中，主要包括“<!DOCTYPE……dtd">”部分为文档的DTD，其他则为HTML命名空间部分，也就是XHTML的根标签。HTML的命名空间部分（html根标签）还包括文档头（head标签）和文档主体（body标签）部分。

文档头的作用是提供网页文档的媒体标签（meta标签）、标题标签（title标签），以及加载的各种外部描述性文档（style标签）或脚本文档（script标签）等。而文档的主体部分则用于存储各种显示于网页中的数据。

使用XHTML语言，用户可以方便地将各种文本、图像、音频、视频和动画嵌入到网页中，并交由浏览器显示，但却不能直接对这些网页标签进行描述和排版。因此，使用XHTML编写的网页文档结构更加规范，体积更小，代码也更加精炼，更容易被搜索引擎检索。基于这些优点，XHTML迅速取代了传统的HTML，成为网络中应用最广泛的结构语言。

2.1.2 HTML5文档类型

HTML文件包括标题、段落、列表、表格、绘制的图形，以及各种嵌入对象，其基本结构如下所示。

相比HTML语言，XHTML语言更加严谨和规范，因此，W3C对XHTML进行了一定程度的修改，将XHTML文档分为3种类型，即过渡型、严格型和框架型。

1. 过渡型

过渡型的XHTML文档为考虑到大多数网页设计者的习惯，允许使用部分描述性的HTML标签，对网页中的内容进行描述。在采用过渡型的XHTML文档中，通过DTD标识其类型。

2. 严格型

严格型的XHTML文档完全符合结构与表现分离的原则，通过严谨的结构以及代码规范来实现网页数据的结构框架。在严格型的网页文档中，任何对网页标签的描述都必须通过CSS等描述性内容实现。严格型的网页文档本身不对描述性的标签进行支持，其DTD内容如下所示。

3. 框架型

框架型的XHTML文档主要应用于各种框架网页中，其对描述性标签的支持程度与过渡型的XHTML文档类似，都支持一定程度的描述性标签，其DTD内容如下所示。

2.1.3 页面构成

在HTML5中引入的规划网页的新标签。创建的网页将会有高层设计，页面的设计包含了一个Header区、一个Navigation区、一个包含了3个Section区和一个Aside区的Article区，以及最后的一个Footer区，如下图所示。

1. Header区

Header区包含了页面标题和副标题，<header>标签用来创建页面的Header区的内容。

除了网页本身之外，<header>标签还可以包含关于<section>和<article>的公开信息。这里创建的网页有该页面的一个Header区（这在高层设计中有给出），以及一个位于Article和Section区内部的Header区。

2. Navigation区

用户可以使用<nav>标签来创建页面的Navigation区。<nav>标签定义了一个用于导航的区域，<nav>标签应该用做主站点的导航，而不是用来放置被包含在页面的其他区域中的链接。

3. Article和Section区

页面包含了一个Article区，该区域存放了页面的实际内容。使用<article>标签来创建这一区域，该标签定义的内容可独立于页面中的其他内容使用。

Article区包含了3个Section区，可使用<section>标签来创建这几个区域。<section>包含了Web内容的相关组件区域，<section>标签和<article>标签，可以包含页眉、页脚，或是其他需要用来完成该部分内容的组件。

<section>标签用于分组的内容，<section>标签和<article>标签通常以一个<header>为开始，并以一个<footer>结束，标签的内容则放在这两者之间。

<section>标签也可以包含<article>标签，就像<article>标签可以包含<section>标签一样。

<section>和<article>标签，以及<header>和<footer>标签都可以包含<figure>标签，用来加入图像、图表和照片。

<figure>标签可以包含<figcaption>，该标签相应地包含了包含在<figure>标签中的图形的标题，其允许用户输入描述，把图形和内容更加紧密地关联起来。

4. Aside区

Aside区可通过使用<aside>标签来创建。这一标签被看作是用来存放补充内容的地方，这些内容不是其所补充的一篇连续文章的组成部分。在杂志上，插入语（Aside）通常被用来突出文章本身所制造的一个观点。<aside>标签包含的内容可被删除，而这不会影响到包含了该内容的文章、章节或是页面所要传达的信息。

5. Footer区

<footer>标签包含了与页面、文章或是部分内容有关的信息，例如文章的作者或是日期。