- HTML5 移動Web開發從入門到精通（微課精編版）
- 前端科技
- 4061字
- 2019-11-15 20:21:49
3.2 構建基本結構
HTML文檔的主體部分包括了要在瀏覽器中顯示的所有信息。這些信息需要在特定的結構中呈現，下面介紹網頁通用結構的設計方法。
3.2.1 定義文檔結構
HTML5包含一百多個元素，大部分繼承自HTML4，新增加30個元素。這些元素基本上都被放置在主體區域內（<body>），我們將在各章節中逐一進行說明。
正確選用HTML5元素可以避免代碼冗余。在設計網頁時不僅需要使用div元素來構建網頁通用結構，還要使用下面幾類元素完善網頁結構。
h1、h2、h3、h4、h5、h6：定義文檔標題，1表示一級標題，6表示六級標題，常用標題包括一級、二級和三級。- p：定義段落文本。
- ul、ol、li等：定義信息列表、導航列表、榜單結構等。
- table、tr、td等：定義表格結構。
- form、input、textarea等：定義表單結構。
- span：定義行內包含框。
【示例】下面的示例是一個簡單的HTML頁面，使用了少量的HTML元素。它演示了一個簡單的文檔應該包含的內容，以及主體內容是如何在瀏覽器中顯示的。
第1步，新建文本文件，輸入下面的代碼。
第2步，保存文本文件，命名為test，設置擴展名為.html。
第3步，使用瀏覽器打開test.html，可以看到如圖3.5所示的預覽效果。
圖3.5 網頁文檔演示效果
為了更好地選用元素，讀者可以參考w3school網站的http://www.w3school.com.cn/tags/index.asp頁面信息。其中DTD列描述的是元素在哪一種DOCTYPE文檔類型是允許使用的：S=Strict，T=Transitional，F=Frameset。
3.2.2 定義內容標題
HTML提供了六級標題用于創建頁面信息的層級關系。使用h1、h2、h3、h4、h5或h6元素對各級標題進行標記，其中h1是最高級別的標題，h2是h1的子標題，h3是h2的子標題，以此類推。
【示例1】標題代表了文檔的大綱。當設計網頁內容時，可以根據需要為內容的每個主要部分指定一個標題和任意數量的子標題，以及子子標題等。
<h1> 唐詩欣賞 </h1>
<h2> 春曉 </h2>
<h3> 孟浩然 </h3>
<p> 春眠不覺曉，處處聞啼鳥。 </p>
<p> 夜來風雨聲，花落知多少。 </p>
在上面的示例中，標記為h2的“春曉”是標記為h1的頂級標題“唐詩欣賞”的子標題，而“孟浩然”是h3，它就成了“春曉”的子標題，也是h1的子子標題。如果繼續編寫頁面其余部分的代碼，相關的內容（段落、圖像、視頻等）就要緊跟在對應的標題后面。
對任何頁面來說，分級標題都可以說是最重要的HTML元素。由于標題通常傳達的是頁面的主題，因此，對搜索引擎而言，如果標題與搜索詞匹配，這些標題就會被賦予很高的權重，尤其是等級最高的h1，當然不是說頁面中的h1越多越好，搜索引擎還是足夠聰明的。
【示例2】使用標題組織內容。在下面的示例中，產品指南有3個主要的部分，每個部分都有不同層級的子標題。標題之間的空格和縮進只是為了讓層級關系更清楚一些，它們不會影響最終的顯示效果。
在默認情況下，瀏覽器會從h1 ~ h6逐級減小標題的字號，如圖3.6所示。在默認情況下，所有的標題都以粗體顯示，h1的字號比h2的大，而h2的又比h3的大，以此類推。每個標題之間的間隔也是由瀏覽器默認的CSS定制的，它們并不代表HTML文檔中有空行。
圖3.6 網頁內容標題的層級
提示：在創建分級標題時，要避免跳過某些級別，如從h3直接跳到h5。不過，允許從低級別跳到高級別的標題。例如，在“<h4>糕點 蛋卷 面包 薯片／膨化</h4>”后面緊跟著“<h2>糧油副食</h2>”是沒有問題的，因為包含“<h4>糕點 蛋卷 面包 薯片／膨化</h4>”的“<h2>食品飲料</h2>”在這里結束了，而“<h2>糧油副食</h2>”的內容開始了。
不要使用h1 ~ h6標記副標題、標語以及無法成為獨立標題的子標題。例如，假設有一篇新聞報道，它的主標題后面緊跟著一個副標題，這時，這個副標題就應該使用段落，或其他非標題元素。
<h1> 天貓超市 </h1>
<p> 在乎每件生活小事 </p>
提示：HTML5包含了一個名為hgroup的元素，用于將連續的標題組合在一起，后來W3C將這個元素從HTML5.1規范中移除了。
上面的代碼是標記文章副標題的一種方法。可以定義class屬性，從而能夠應用相應的CSS。該class屬性可以命名為subhead等名稱。
提示：曾有人提議在HTML5中引入subhead元素，用于對子標題、副標題、標語、署名等內容進行標記，但是未被W3C采納。
3.2.3 使用div元素
有時需要在一段內容外圍包一個容器，從而可以為其應用CSS樣式或JavaScript效果。如果沒有這個容器，頁面就會不一樣。在評估內容的時候，考慮使用article、section、aside、nav等元素，卻發現它們從語義上來講都不合適。
這時，真正需要的是一個通用容器，一個完全沒有任何語義含義的容器。這個容器就是div元素，用戶可以為其添加樣式或JavaScript效果。
【示例1】下面的示例為頁面內容加上div元素以后，可以添加更多樣式的通用容器。
現在有一個div元素包著所有的內容，頁面的語義沒有發生改變，但現在我們有了一個可以用CSS添加樣式的通用容器。
與header、footer、main、article、section、aside、nav、h1 ~ h6、p等元素一樣，在默認情況下，div元素自身沒有任何默認樣式，只是其包含的內容從新的一行開始。不過，我們可以對div添加樣式以實現設計。
div元素對使用JavaScript實現一些特定的交互行為或效果也是有幫助的。例如，在頁面中展示一張照片或一個對話框，同時讓背景頁面覆蓋一個半透明的層（這個層通常是一個div元素）。
盡管HTML用于對內容的含義進行描述，但div元素并不是唯一沒有語義價值的元素。span元素是與div元素對應的一個元素：div元素是塊級內容的無語義容器，而span元素則是短語內容的無語義容器，例如，它可以放在段落元素p之內。
【示例2】下面的代碼為段落文本中的部分信息進行分隔顯示，以便應用不同的類樣式。
<h1>新聞標題</h1>
<p>新聞內容</p>
<p>......</p>
<p>發布于<span class="date">2016年12月</span>，由<span class="author">張三</span>編輯</p>
提示：在HTML結構化元素中，div元素是除了h1~h6以外唯一早于HTML5出現的元素。在HTML5之前，div元素是包圍大塊內容（如頁眉、頁腳、主要內容、插圖、附欄等），從而可用CSS為之添加樣式的不二選擇。之前div元素沒有任何語義含義，現在也一樣。這就是HTML5引入header、footer、main、article、section、aside和nav元素的原因。這些類型的構造塊在網頁中普遍存在，因此它們可以成為具有獨立含義的元素。在HTML5中，div元素并沒有消失，只是使用它的場合變少了。
對article和aside元素分別添加一些CSS，讓它們各自成為一欄。然而，大多數情況下，每一欄都有不止一個區塊的內容。例如，主要內容區第一個article元素下面可能還有另一個article元素（或section、aside元素等）。又如，也許想在第二欄再放一個aside元素顯示指向關于其他網站的鏈接，或許再加一個其他類型的元素。這時可以將期望出現在同一欄的內容包在一個div元素里，然后對這個div元素添加相應的樣式。但是不可以用section元素，因為該元素并不能作為添加樣式的通用容器。
div元素沒有任何語義。大多數時候，使用header、footer、main（僅使用一次）、article、section、aside或nav元素代替div元素會更合適。但是，如果語義上不合適，也不必為了刻意避免使用div元素，而使用上述元素。div元素適合所有頁面容器，可以作為HTML5的備用容器使用。
3.2.4 使用id和class
HTML是簡單的文檔標記語言，而不是界面語言。文檔結構大部分使用div元素來完成，為了能夠識別不同的結構，一般通過定義id或class給它們賦予額外的語義，給CSS樣式提供有效的“鉤子”。
【示例1】構建一個簡單的列表結構，并給它分配一個id，自定義導航模塊。
使用id標識頁面上的元素時，id名必須是唯一的。id可以用來標識持久的結構性元素，如主導航或內容區域；id還可以用來標識一次性元素，如某個鏈接或表單元素。
在整個網站上，id名應該應用于語義相似的元素以避免混淆。例如，如果聯系人表單和聯系人詳細信息在不同的頁面上，那么可以給它們分配同樣的id名contact，但是如果在外部樣式表中給它們定義樣式，就會遇到問題，因此使用不同的id名（如contact_form和contact_details）就會簡單得多。
與id不同，同一個class可以應用于頁面上任意數量的元素，因此class非常適合標識樣式相同的對象。例如，設計一個新聞頁面，其中包含每條新聞的日期。此時不必給每個日期分配不同的id，而是可以給所有日期分配類名date。
提示：id和class的名稱一定要保持語義性，并與表現方式無關。例如，可以給導航元素分配id名為right_nav，因為希望它出現在右邊。但是，如果以后將它的位置改到左邊，那么CSS和HTML就會發生歧義。所以，將這個元素命名為sub_nav或nav_main更合適。這種名稱解釋就不再涉及如何表現它。
對于class名稱，也是如此。例如，如果定義所有錯誤消息以紅色顯示，不要使用類名red，而應該選擇更有意義的名稱，如error或feedback。
注意：class和id名稱需要區分大小寫，雖然CSS不區分大小寫，但是在標簽中是否區分大小寫取決于HTML文檔類型。如果使用XHTML嚴謹型文檔，那么class和id名是區分大小寫的。最好的方式是保持一致的命名約定，如果在HTML中使用駝峰命名法，那么在CSS中也采用這種形式。
【示例2】在實際設計中，class被廣泛使用，這就容易產生濫用現象。例如，很多初學者為所有的元素定義class，以便更方便地控制它們。這種現象被稱為“多類癥”，在某種程度上，這和使用基于表格的布局一樣糟糕，因為它在文檔中添加了無意義的代碼。
<h1 class="newsHead">標題新聞</h1>
<p class="newsText">新聞內容</p>
<p>......</p>
<p class="newsText"><a href="news.php" class="newsLink">更多</a></p>
【示例3】在上面的示例中，每個元素都使用一個與新聞相關的class名稱進行標識。這使得新聞標題和正文可以采用與頁面其他部分不同的樣式。但是，不需要用這么多class來區分每個元素。可以將新聞條目放在一個包含框中，并加上class名稱news，從而標識整個新聞條目。然后，可以使用包含框選擇器識別新聞標題或文本。
以這種方式刪除不必要的類有助于簡化代碼，使頁面更簡潔。過度依賴class名稱是不必要的，我們只需要在不適合使用id的情況下對元素應用class，而且盡可能少使用class。實際上，創建大多數文檔常常只需要定義幾個class。如果初學者發現自己定義了許多class，那么這很可能意味著自己創建的HTML文檔結構有問題。
3.2.5 使用title
可以使用title屬性為文檔中任何部分加上提示標簽。不過，它們并不只是提示標簽，加上它們之后屏幕閱讀器可以為用戶朗讀title文本，因此使用title可以提升無障礙訪問功能。
【示例】可以為任何元素添加title，不過用得最多的是鏈接。
<ul title="列表提示信息">
<li><a href="#" title="鏈接提示信息">列表項目</a></li>
</ul>
當訪問者將鼠標指向加了說明標簽的元素時，就會顯示title。如果img元素同時包括title和alt屬性，則提示框會采用title屬性的內容，而不是alt屬性的內容。
3.2.6 HTML注釋
可以在HTML文檔中添加注釋，標明區塊開始和結束的位置，提示某段代碼的意圖，或者阻止內容顯示等。這些注釋只會在源代碼中可見，訪問者在瀏覽器中是看不到它們的。
【示例】下面的代碼使用“<!--”和“-->”分隔符定義了6處注釋。
在主要區塊的開頭和結尾處添加注釋是一種常見的做法，這樣可以讓一起合作的開發人員將來修改代碼變得更加容易。
在發布網站之前，應該用瀏覽器查看一下加了注釋的頁面。這樣能幫我們避免由于弄錯注釋格式導致注釋內容直接暴露給訪問者的情況。