2.1 HTML5基本概念

XHTML（eXtensible HyperText Markup Language，可擴(kuò)展的超文本標(biāo)簽語言）是一種基于XML（eXtensible Markup Language，可擴(kuò)展的標(biāo)簽語言）與HTML（HyperText Markup Language，超文本標(biāo)簽語言）的新型標(biāo)簽語言和結(jié)構(gòu)語言。

2.1.1 HTML5簡介

HTML是萬維網(wǎng)的核心語言、標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用超文本標(biāo)記語言，主要用于描述超文本中內(nèi)容的顯示方式。2014年10月29日，萬維網(wǎng)聯(lián)盟宣布，經(jīng)過幾乎8年的艱辛努力，HTML5標(biāo)準(zhǔn)規(guī)范終于制定完成了，并已公開發(fā)布。HTML5將會取代1999年制定的HTML 4.01、XHTML 1.0標(biāo)準(zhǔn)，期待可以在互聯(lián)網(wǎng)應(yīng)用迅速發(fā)展的時候，使網(wǎng)絡(luò)標(biāo)準(zhǔn)達(dá)到符合當(dāng)代的網(wǎng)絡(luò)需求，為桌面和移動平臺帶來無縫銜接的豐富內(nèi)容。

HTML是一種標(biāo)記語言，標(biāo)記語言經(jīng)過瀏覽器的解釋和編譯，雖然它本身不能顯示在瀏覽器中，但在瀏覽器中可以正確顯示HTML標(biāo)記的內(nèi)容。HTML語言從1.0至5.0經(jīng)歷了巨大的變化，從單一的文本顯示功能到圖文并茂的多媒體顯示功能，許多特性經(jīng)過多年的完善，已經(jīng)成為一種非常完善的標(biāo)記語言。

使用XHTML語言創(chuàng)建的文檔，其擴(kuò)展名與由HTML創(chuàng)建的文檔相同，既可以是.htm，也可以是.html。

目前，所有的網(wǎng)頁瀏覽器都可以完全解析XHTML文檔，并顯示出來。一個典型的XHTML文檔由各種以尖括號“<>”括住的標(biāo)簽組成，主要包括DTD（Document Type Definition，文檔類型聲明）、HTML命名空間等兩個部分。其結(jié)構(gòu)如下所示。

在上面的代碼中，主要包括“<!DOCTYPE……dtd">”部分為文檔的DTD，其他則為HTML命名空間部分，也就是XHTML的根標(biāo)簽。HTML的命名空間部分（html根標(biāo)簽）還包括文檔頭（head標(biāo)簽）和文檔主體（body標(biāo)簽）部分。

文檔頭的作用是提供網(wǎng)頁文檔的媒體標(biāo)簽（meta標(biāo)簽）、標(biāo)題標(biāo)簽（title標(biāo)簽），以及加載的各種外部描述性文檔（style標(biāo)簽）或腳本文檔（script標(biāo)簽）等。而文檔的主體部分則用于存儲各種顯示于網(wǎng)頁中的數(shù)據(jù)。

使用XHTML語言，用戶可以方便地將各種文本、圖像、音頻、視頻和動畫嵌入到網(wǎng)頁中，并交由瀏覽器顯示，但卻不能直接對這些網(wǎng)頁標(biāo)簽進(jìn)行描述和排版。因此，使用XHTML編寫的網(wǎng)頁文檔結(jié)構(gòu)更加規(guī)范，體積更小，代碼也更加精煉，更容易被搜索引擎檢索。基于這些優(yōu)點(diǎn)，XHTML迅速取代了傳統(tǒng)的HTML，成為網(wǎng)絡(luò)中應(yīng)用最廣泛的結(jié)構(gòu)語言。

2.1.2 HTML5文檔類型

HTML文件包括標(biāo)題、段落、列表、表格、繪制的圖形，以及各種嵌入對象，其基本結(jié)構(gòu)如下所示。

相比HTML語言，XHTML語言更加嚴(yán)謹(jǐn)和規(guī)范，因此，W3C對XHTML進(jìn)行了一定程度的修改，將XHTML文檔分為3種類型，即過渡型、嚴(yán)格型和框架型。

1. 過渡型

過渡型的XHTML文檔為考慮到大多數(shù)網(wǎng)頁設(shè)計(jì)者的習(xí)慣，允許使用部分描述性的HTML標(biāo)簽，對網(wǎng)頁中的內(nèi)容進(jìn)行描述。在采用過渡型的XHTML文檔中，通過DTD標(biāo)識其類型。

2. 嚴(yán)格型

嚴(yán)格型的XHTML文檔完全符合結(jié)構(gòu)與表現(xiàn)分離的原則，通過嚴(yán)謹(jǐn)?shù)慕Y(jié)構(gòu)以及代碼規(guī)范來實(shí)現(xiàn)網(wǎng)頁數(shù)據(jù)的結(jié)構(gòu)框架。在嚴(yán)格型的網(wǎng)頁文檔中，任何對網(wǎng)頁標(biāo)簽的描述都必須通過CSS等描述性內(nèi)容實(shí)現(xiàn)。嚴(yán)格型的網(wǎng)頁文檔本身不對描述性的標(biāo)簽進(jìn)行支持，其DTD內(nèi)容如下所示。

3. 框架型

框架型的XHTML文檔主要應(yīng)用于各種框架網(wǎng)頁中，其對描述性標(biāo)簽的支持程度與過渡型的XHTML文檔類似，都支持一定程度的描述性標(biāo)簽，其DTD內(nèi)容如下所示。

2.1.3 頁面構(gòu)成

在HTML5中引入的規(guī)劃網(wǎng)頁的新標(biāo)簽。創(chuàng)建的網(wǎng)頁將會有高層設(shè)計(jì)，頁面的設(shè)計(jì)包含了一個Header區(qū)、一個Navigation區(qū)、一個包含了3個Section區(qū)和一個Aside區(qū)的Article區(qū)，以及最后的一個Footer區(qū)，如下圖所示。

1. Header區(qū)

Header區(qū)包含了頁面標(biāo)題和副標(biāo)題，<header>標(biāo)簽用來創(chuàng)建頁面的Header區(qū)的內(nèi)容。

除了網(wǎng)頁本身之外，<header>標(biāo)簽還可以包含關(guān)于<section>和<article>的公開信息。這里創(chuàng)建的網(wǎng)頁有該頁面的一個Header區(qū)（這在高層設(shè)計(jì)中有給出），以及一個位于Article和Section區(qū)內(nèi)部的Header區(qū)。

2. Navigation區(qū)

用戶可以使用<nav>標(biāo)簽來創(chuàng)建頁面的Navigation區(qū)。<nav>標(biāo)簽定義了一個用于導(dǎo)航的區(qū)域，<nav>標(biāo)簽應(yīng)該用做主站點(diǎn)的導(dǎo)航，而不是用來放置被包含在頁面的其他區(qū)域中的鏈接。

3. Article和Section區(qū)

頁面包含了一個Article區(qū)，該區(qū)域存放了頁面的實(shí)際內(nèi)容。使用<article>標(biāo)簽來創(chuàng)建這一區(qū)域，該標(biāo)簽定義的內(nèi)容可獨(dú)立于頁面中的其他內(nèi)容使用。

Article區(qū)包含了3個Section區(qū)，可使用<section>標(biāo)簽來創(chuàng)建這幾個區(qū)域。<section>包含了Web內(nèi)容的相關(guān)組件區(qū)域，<section>標(biāo)簽和<article>標(biāo)簽，可以包含頁眉、頁腳，或是其他需要用來完成該部分內(nèi)容的組件。

<section>標(biāo)簽用于分組的內(nèi)容，<section>標(biāo)簽和<article>標(biāo)簽通常以一個<header>為開始，并以一個<footer>結(jié)束，標(biāo)簽的內(nèi)容則放在這兩者之間。

<section>標(biāo)簽也可以包含<article>標(biāo)簽，就像<article>標(biāo)簽可以包含<section>標(biāo)簽一樣。

<section>和<article>標(biāo)簽，以及<header>和<footer>標(biāo)簽都可以包含<figure>標(biāo)簽，用來加入圖像、圖表和照片。

<figure>標(biāo)簽可以包含<figcaption>，該標(biāo)簽相應(yīng)地包含了包含在<figure>標(biāo)簽中的圖形的標(biāo)題，其允許用戶輸入描述，把圖形和內(nèi)容更加緊密地關(guān)聯(lián)起來。

4. Aside區(qū)

Aside區(qū)可通過使用<aside>標(biāo)簽來創(chuàng)建。這一標(biāo)簽被看作是用來存放補(bǔ)充內(nèi)容的地方，這些內(nèi)容不是其所補(bǔ)充的一篇連續(xù)文章的組成部分。在雜志上，插入語（Aside）通常被用來突出文章本身所制造的一個觀點(diǎn)。<aside>標(biāo)簽包含的內(nèi)容可被刪除，而這不會影響到包含了該內(nèi)容的文章、章節(jié)或是頁面所要傳達(dá)的信息。

5. Footer區(qū)

<footer>標(biāo)簽包含了與頁面、文章或是部分內(nèi)容有關(guān)的信息，例如文章的作者或是日期。