文章目錄
第3章 基本HTML結構
3.1 開始編寫網頁
1.編寫HTML5頁面開頭的步驟
1.輸入<!DOCTYPE html>，聲明頁面爲HTML5文檔
2.輸入<html lang=“language-code”>
language-code：頁面內容默認語言的代碼<html lang="es">：表示西班牙語<html lang="fr">：表示法語<html lang="en-US">：表示美國英語<html lang="en-GB">：表示英國英語
3.輸入<head>，開始網頁文檔的頭部
4.輸入<meta charset=“UTF-8” />
5.輸入<title></title>，包含頁面的標題
6.輸入</head>，結束頁面文檔的頭部
7.輸入<body></body>
8.輸入</html>，結束頁面
在
head部分，通常要頁面標題，方便SEO，加載樣式表、JavaScript文件 （不過，出於性能考慮，多數時候在頁面底部</body>標籤結束前加載JavaScript會是更好的選擇）
搜索引擎可能會根據
lang屬性指定的語言區分搜索結果，從而僅顯示與搜索詞語言相同的頁面。屏幕閱讀器也可能通過指定的語言調整其發音。
3.2 創建頁面標題
頁面標題通常是Google等搜索引擎的搜索結果中鏈接的文字，它也是判斷搜索結果中頁面相關度的重要因素。
總之，要讓每個頁面的title是唯一的，從而提升搜索引擎結果排名，並讓訪問者獲得更好的體驗。
提示 title元素是必需的
提示 title中不能包含任何格式、HTML、圖像或指向其他頁面的鏈接。
作爲一種最佳實踐，選擇能簡要概括文檔內容的文字作爲title文字。這些文字既要對屏幕閱讀器用戶友好，又要有利於搜索引擎排名。
其次，將網站名稱放入title（這不是必需的）。常見的做法是將網站名稱放在title的開頭，不過將頁面特有的文字放在開頭更好。
3.3 創建分級標題
- HTML提供了六級標題用於創建頁面信息的層級關係。使用h1、h2、h3、h4、h5或h6元素對各級標題進行標記
1.分級標題的重要性
對搜索引擎而言，如果標題與搜索詞匹配，這些標題就會被賦予很高的權重，尤其是等級最高的h1（這並不是說頁面中的h1越多越好，搜索引擎還是足夠聰明的）。
2.使用標題對網頁進行組織的步驟
提示 創建分級標題時，要避免跳過某些級別，如從h3直接跳到h5。不過，允許從低級別跳到高級別的標題。
提示 不要使用h1～h6標記副標題、標語以及無法成爲獨立標題的子標題。例如，假設有一篇新聞報道，它的主標題後面緊跟着一個副標題，這時，這個副標題就應該使用段落
3.5 創建頁面
- 如果頁面中有一塊包含一組介紹性或導航性內容的區域，應該用
header元素對其進行標記。
提示 只在必要時使用header。大多數情況下，如果使用h1～h6能滿足需求，就沒有必要用header將它包起來。
header與h1～h6元素中的標題（參見3.3節）是不能互換的。它們都有各自的語義目的。
不能在header裏嵌套footer元素或另一個header，也不能在footer或address元素裏嵌套header。
3.6 標記導航
nav可以明確表示主導航連接的區域（集合鏈接羣）。
<nav>
<ul>
<li><a href="#guadi">Barcelona's Architect</a></li>
<li lang="es"><a href="$sagrada- familia">La Sagrada Família</a></li>
<li><a href="#park-guell">Park Guell</a></li>
</ul>
</nav>
使用
ul或ol元素對鏈接進行結構化。在HTML5中，nav並沒有取代這種最佳實踐
HTML5不允許將nav嵌套在
address元素中。
HTML5規範不推薦對輔助性的頁腳鏈接（如“使用條款”、“隱私政策”等）使用
nav，這不難理解。不過，有時頁腳會再次顯示頂級全局導航，或者包含“商店位置”、“招聘信息”等重要鏈接。在大多數情況下，我們推薦將頁腳中的此類鏈接放入nav中。
如何判斷是否對一組鏈接使用nav呢？歸根結底，這取決於內容的組織情況。至少，應該將網站全局導航（讓用戶可以跳至網站各個主要部分的導航）標記爲
nav。這種nav通常（但並不總是）出現在頁面級的header元素裏面
3.7 標記頁面的主要區域
- 一個頁面只有一個部分代表其主要內容。可以將這樣的內容包在
main元素中，該元素在一個頁面僅使用一次
<main role="main">
<article>
<h1 id="gaudi">Barcelona's Architect </h1>
<p>Antoni Gaudí's incredible buildings bring millions ...</p>
... [頁面主要區域的其他內容] ...
</article>
</main>
3.8 創建文章
- HTML5對
article的定義如下：
article元素表示文檔、頁面、應用或網站中一個獨立的容器，原則上是可獨立分配或可再用的，就像聚合內容中的各部分。它可以是一篇論壇帖子、一篇雜誌或報紙文章、一篇博客條目、一則用戶提交的評論、一個交互式的小部件或小工具，或者任何其他獨立的內容項。
提示 可以將
article嵌套在另一個article中，只要裏面的article與外面的article是部分與整體的關係。
提示 一個頁面可以有多個
article元素（也可以沒有）。例如，博客的主頁通常包括幾篇最新的文章，其中每一篇都是其自身的article。
提示 一個
article可以包含一個或多個section元素。在article裏包含獨立的h1～h6也是很好的做法
3.9 定義區塊
section定義：section元素代表文檔或應用的一個一般的區塊。在這裏，section是具有相似主題的一組內容，通常包含一個標題。
section的例子包含章節、標籤式對話框中的各種標籤頁、論文中帶編號的區塊。比如網站的主頁可以分成介紹、新聞條目、聯繫信息等區塊。
- 區別
section和div：從語義上講，section標記的是頁面中的特定區域，而div則不傳達任何語義。
3.10 指定附註欄
- 指定附註欄的步驟
- 輸入
<aside>。 - 輸入附註欄的內容。內容可以包含任意數量的元素。元素類型包括段落、列表、音頻、視頻、圖像、圖形等。
- 輸入
</aside>。
- 輸入
提示 在HTML中，應該將附註欄內容放在main的內容之後。出於SEO和可訪問性的目的，最好將重要的內容放在前面。可以通過CSS改變它們在瀏覽器中的顯示順序。
提示 對於與內容有關的圖像（如圖表、圖形或帶有說明文字的插圖），使用figure（參見第4章）而非aside。
提示 HTML5不允許將aside嵌套在address元素內。
3.11 創建頁腳
- 當你想到頁腳的時候，你大概想的是頁面底部的頁腳（通常包括版權聲明，可能還包括指向隱私政策頁面的鏈接以及其他類似的內容）。HTML5的
footer元素可以用在這樣的地方，但它同header一樣，還可以用在其他的地方。
footer元素代表嵌套它的最近的article、aside、blockquote、body、details、fieldset、figure、nav、section或td元素的頁腳。只有當它最近的祖先是body時，它纔是整個頁面的頁腳
提示 頁腳並不一定要位於所在元素的末尾，不過通常是這樣的。
提示 不能在footer裏嵌套header或另一個footer。同時，也不能將footer嵌套在header或address元素裏。
注意只有頁面級頁腳有role=“contentinfo”
3.12 創建通用容器
div（來自division）：一個完全沒有任何語義、含義的通用容器。
div並不是唯一沒有語義價值的元素。span是與div對應的一個元素：div是塊級內容的無語義容器，而span（寫作<span>這裏是內容</span>）則是短語內容的無語義容器，例如它可以放在段落元素p之內
div應該作爲最後一個備用容器，因爲它沒有任何語義價值。大多數時候，使用header、footer、main（僅使用一次）、article、section、aside甚至nav代替div會更合適。但是，如果語義上不合適，也不必爲了刻意避免使用div而使用上述元素。有用得上div的地方，只是需要限制其使用。
3.14 爲元素指定類別或ID名稱
- 可以給HTML元素分配唯一的標識符（ID），或指定其屬於某個（或某幾個）類別，也可以同時指定標識符和類別
3.15 爲元素添加title屬性
- 添加
title屬性的好處- 提升無障礙閱讀
- 鼠標移到某元素時會顯示其title屬性的值
<body>
<p title="Nice to meet you!">Hello World!</p>
</body>
3.16 添加註釋
- 在HTML頁面中添加註釋的步驟
- 在HTML文檔中希望插入註釋的位置，輸入
<!-- - 輸入註釋。
- 輸入
-->結束註釋文本。
- 在HTML文檔中希望插入註釋的位置，輸入
提示 註釋不能嵌套在其他註釋裏。