HTML5和CSS課程(6)
導語
從今日起計劃推出系列課程《HTML5和CSS課程》。內(nèi)容來源于《HTML5與CSS3基礎教程（第8版）》。如果你喜歡看書，請購買正版書籍。以下內(nèi)容均來源于對該本書的解讀。
創(chuàng)建分級標題
HTML 提供了六級標題用于創(chuàng)建頁面信息的層級關系。使用 h1、 h2、 h3、 h4、 h5 或h6 元素對各級標題進行標記，其中 h1 是最高級別的標題， h2 是 h1 的子標題， h3 是 h2 的子標題，以此類推。當你在編寫網(wǎng)頁內(nèi)容時，會根據(jù)需要為內(nèi)容的每個主要部分指定一個標題和任意數(shù)量的子標題（以及子子標題，等等）。
<!DOCTYPE?html><html>
<head>????<meta?charset="UTF-8"?/>????<title>這是標題</title></head>
<body>????<h1>h1標題</h1>????<h2>>h2標題</h2>????<h3>>h3標題</h3>????<h4>>h4標題</h4>????<h5>>h5標題</h5>????<h6>>h6標題</h6></body></html>
01
分級標題的重要性
對任何頁面來說，分級標題都可以說是最重要的 HTML 元素。由于標題通常傳達的是頁面的主題，因此，對搜索引擎而言，如果標題與搜索詞匹配，這些標題就會被賦予很高的權重，尤其是等級最高的 h1（這并不是說頁面中的 h1 越多越好，搜索引擎還是足夠聰明的）。
<!DOCTYPE?html><html>
<head>????<meta?charset="UTF-8"?/>????<title>這是標題</title></head>
<body>????<h1>Product?User?Guide</h1>????<h2>Setting?it?up</h2>????<h2>Basic?Features</h2>????<h3>Video?Playback</h3>????<h4>Basic?Controls</h4>????<h4>Jumping?to?Markers</h4>????<h3>Recording?Video</h3>????<h4>Manual?Recording</h4>????<h4>Scheduling?a?Recording</h4>????<h2>Advanced?Features</h2>????<h3>Sharing?Video</h3>????<h3>Compressing?Video</h3></body>
</html>
提 示
在這個例子中，產(chǎn)品指南有三個主要的部分，每個部分都有不同層級的子標題。標題之間的空格和縮進只是為了讓層級關系更清楚一些，它們不會影響最終的顯示效果。在實踐中我通常不會添加這樣的空格和縮進，如果你想添加可以這樣做。
02
使用標題對網(wǎng)頁進行組織的步驟
在 HTML 的 body 部分，輸入 <hn>，其中 n 是 1 ～ 6 的數(shù)字，此數(shù)字取決于要創(chuàng)建的標題的級別。 h1 是最重要的標題，而 h6則是最不重要的標題。
輸入標題的內(nèi)容? 。
?輸入 </hn>，其中 <n> 是與第 (1) 步中相同的數(shù)字。
提 示
在默認情況下，瀏覽器會從 h1 到 h6逐級減小標題的字號，如圖 3.3.3 所示。（在有的瀏覽器里，嵌套在特定元素中的 h1 和 h2
在默認情況下看起來是一樣的。）不過別忘了要依據(jù)內(nèi)容所處的層次關系選擇標題級數(shù)，而不是根據(jù)你希望文字應該顯示的大小。可
以按照你希望的樣子為標題添加樣式，包括字體、字號、顏色等。
提 示
創(chuàng)建分級標題時，要避免跳過某些級別，如從 h3 直接跳到 h5。不過，允許從低級別跳到高級別的標題。
提 示
不要使用 h1 ～ h6 標記副標題、標語以及無法成為獨立標題的子標題。例如，假設有一篇新聞報道，它的主標題后面緊跟著一個副標題，這時，這個副標題就應該使用段落或其他非標題元素。
提 示
先 前， HTML5 包 含 了 一 個 名 為hgroup 的元素，用于將連續(xù)的標題組合在一起， W3C將這個元素從HTML5規(guī)范中移除了。
好，今天的課程就到這里?。?！
