3-4 保持原始文件樣式<pre>元素

這個元素內(nèi)的內(nèi)容在瀏覽器中呈現(xiàn)的效果將與其在編輯程序時所看到的相同，常用在顯示詩詞或是程序語言的源代碼，在網(wǎng)頁內(nèi)保留空格和換行。

程序?qū)嵗齝h3_5.html：將編輯器內(nèi)呈現(xiàn)的李白詩原始樣貌呈現(xiàn)在瀏覽器內(nèi)。

執(zhí)行結(jié)果

3-5 水平線<hr>元素

這個元素也沒有結(jié)束標(biāo)記，主要用在主題發(fā)生變化時，輸出為一條水平線。

程序?qū)嵗齝h3_6.html：輸出水平線。

執(zhí)行結(jié)果

3-6 段落<p>元素

程序ch3_6.html不是一個好的HTML5程序，因為HTML5希望每一個文字段落皆是有內(nèi)涵的，皆使用段落元素來標(biāo)記，而不希望文檔版式中有未經(jīng)元素注明的數(shù)據(jù)。

一般短段落可用<p>元素標(biāo)記出來。

程序?qū)嵗齝h3_7.html：將<p>元素應(yīng)用在ch3_6.html中，將詩的內(nèi)容標(biāo)記為段落。

執(zhí)行結(jié)果

3-7 文件某個區(qū)域<section>元素

通常使用此元素在文件中標(biāo)記某一個區(qū)域，在此區(qū)域內(nèi)會有一個或多個標(biāo)題。在實用上，通常會將段落數(shù)據(jù)或是小標(biāo)題數(shù)據(jù)放在此元素內(nèi)。

程序?qū)嵗齝h3_8.html：使用<section>元素標(biāo)注文件某一區(qū)段的應(yīng)用。

執(zhí)行結(jié)果

<section>元素算是HTML的區(qū)塊級元素，在這種層級元素內(nèi)的標(biāo)題會被自動降一級輸出，所以雖然程序第11行和第19行是h1級標(biāo)題，但輸出時是以h2標(biāo)題顯示大小。

一般簡單的網(wǎng)頁版面配置可參考下圖。我們可以將程序?qū)嵗齝h3_8.html內(nèi)的兩個<section>元素當(dāng)作文本區(qū)，第8行和第9行的數(shù)據(jù)則當(dāng)作網(wǎng)頁的頁首區(qū)。從網(wǎng)頁語意上講，上述程序最大的缺點是，我們沒有將它的標(biāo)題標(biāo)示出來。HTML5提供了功能來標(biāo)示網(wǎng)頁的標(biāo)題區(qū)，標(biāo)題區(qū)也可稱為頁首區(qū)，這將在下一小節(jié)說明。

3-8 頁首<header>元素

Header區(qū)又稱文件頁首區(qū)，指的是網(wǎng)頁或文件上方的區(qū)域，可參考3-7節(jié)簡單網(wǎng)頁版面配置圖，通常會將網(wǎng)頁大標(biāo)題、簡單批注說明等數(shù)據(jù)放在此區(qū)。

程序?qū)嵗齝h3_9.html：重新設(shè)計實例ch3_8.html，主要是增加頁首標(biāo)記。

執(zhí)行結(jié)果

ch3_9.html的執(zhí)行結(jié)果與ch3_8.html相同，所以不再列出，這個程序的最大特點是程序的語意非常清楚。