目錄

開始學習HTML?

什么是 HTML?

剖析一個 HTML 元素

嵌套元素

塊級元素和內聯元素

空元素

屬性

為元素添加屬性

?布爾屬性

省略包圍屬性值的引號

使用單引號還是雙引號？

?剖析 HTML 文檔

HTML 中的空白

?實體引用：在 HTML 中包含特殊字符

HTML 注釋

總結

?“頭”里有什么——HTML 元信息

什么是 HTML 頭部

添加標題

主動學習：一個簡單的示例

元數據： 元素

?指定文檔中的字符編碼

添加作者和描述

主動學習：在搜索引擎中 description 的使用

?其他類型的元數據

在你的站點增加自定義圖標

在 HTML 中應用 CSS 和 JavaScript

主動學習：在網頁中應用 CSS 和 JavaScript

為文檔設定主語言

總結

?HTML 的標題和段落

標題和段落

實現結構層級

為什么我們需要結構化？

為什么我們需要語義？

總結

強調與重要性?

什么是強調和著重強調？

強調

著重強調

主動學習：我們是重要的！

斜體、粗體、下劃線……

總結

列表?

無序列表

有序列表

嵌套列表

描述列表

描述列表示例

技能測試！

總結

文檔與網站架構?

主動學習：研究示例代碼

無語義元素

?換行與水平分割線

：換行元素

：主題性中斷元素

規劃一個簡單的網站

主動學習：創建站點地圖

小結

參見

文本格式進階

引用

塊引用

行內引用

引文

縮略語

縮略語示例

標記聯系方式

上標和下標

展示計算機代碼

標記時間和日期

總結

創建超鏈接?

什么是超鏈接？

鏈接的解析

塊級鏈接

圖片鏈接

使用標題屬性添加支持信息

統一資源定位符（URL）與路徑（path）快速入門

分割文檔

絕對 URL 和相對 URL

鏈接最佳實踐

使用響亮的鏈接措辭

鏈接到非 HTML 資源——留下清晰的指示

在下載鏈接時使用下載屬性

學習主動性：創建一個導航菜單

電子郵件鏈接

指定詳細信息

技能測試！

小結

HTML 中的圖片

怎樣將圖片放到網頁上？

備選文本

寬度和高度

圖像標題

媒體資源和許可

了解許可類型

版權所有

自由許可

公共領域/CC0

搜索適用于自由許可的圖像

通過為圖片搭配說明文字的方式來解說圖片

CSS 背景圖片

網頁上的其他圖形

技能測試！

總結

視頻和音頻內容?

web 中的音頻和視頻

使用多個播放源以提高兼容性

媒體文件的內容

瀏覽器所支持的媒體文件

其他

顯示視頻文本

主動練習：嵌入你自己的視頻與音頻

技能測試！

總結

參見

HTML 表格基礎

什么是表格？

表格如何工作？

表格風格

什么時候你不應該使用 HTML 表格？

動手練習：創建你的第一個表格

結果

使用 元素添加標題

動手練習：表格標題

為什么標題是有用的？

允許單元格跨越多行和列

使用 應用樣式

動手練習：colgroup 和 col

總結

HTML 表格進階特性和無障礙?

使用 為你的表格增加一個標題

動手練習：添加一個標題

添加 、 和 結構

動手練習：添加表格結構

嵌套表格

對于視力受損的用戶的表格

使用列和行的標題

scope 屬性

id 和 headers 屬性

動手練習：使用 scope 和 headers

總結

HTML 中的表單和按鈕

與用戶互動

按鈕

表單的解剖

元素

?

?

開始學習HTML?

什么是 HTML?

HTML（HyperText Markup Language，超文本標記語言）是一種用來告知瀏覽器如何組織頁面的標記語言。HTML 可復雜、可簡單，一切取決于 web 開發者。HTML 由一系列的元素組成，這些元素可以用來包圍或標記不同部分的內容，使其以某種方式呈現或者工作。兩端的標簽可以使內容變成超鏈接，以連接到另一個頁面；使字體表現為斜體等。例如，考慮如下內容

?My cat is very grumpy

?如果我們想要將這行文字單獨呈現，可以將這行文字封裝成一個段落（Paragraph）<p>?元素：
?

<p>My cat is very grumpy</p>

備注：?HTML 標簽不區分大小寫。也就是說，輸入標簽時既可以使用大寫字母也可以使用小寫字母。例如，標簽?<title>?可以寫作?<title>、<TITLE>、<Title>、<TiTlE>?等，也都可以正常工作。不過，從一致性、可讀性來說，最好僅使用小寫字母。

剖析一個 HTML 元素

?讓我們進一步探討我們的前述的段落元素：

這個元素的主要部分有：

• 開始標簽（Opening tag）：包含元素的名稱（本例為?p），被左、右角括號所包圍。開頭標簽標志著元素開始或開始生效的地方。在這個示例中，它在段落文本的開始之前。
• 內容（Content）：元素的內容，本例中就是段落的文本。
• 結束標簽（Closing tag）：與開始標簽相似，只是其在元素名之前包含了一個斜杠。這標志著該元素的結束。沒有包含關閉標簽是一個常見的初學者錯誤，它可能會產生奇特的結果。

整個元素即指開始標簽、內容、結束標簽三部分組成的整體。
?

嵌套元素

你也可以把元素放到其他元素之中——這被稱作嵌套。如果我們想要表明我們的小貓脾氣很暴躁，可以將?very?一詞嵌套在?<strong>?元素中，意味著這個單詞被著重強調：?

<p>My cat is <strong>very</strong> grumpy.</p>

你需要確保元素被正確的嵌套：在上面的例子中我們先打開?p?元素，然后才打開?strong?元素，因此必須先將?strong?元素關閉，然后再去關閉?p?元素。下面的例子是錯誤的：
?

<p>My cat is <strong>very grumpy.</p></strong>

所有的元素都需要正確的打開和關閉，這樣才能按你所想的方式展現。由于上述示例中的那種重疊，瀏覽器不得不猜測你的意圖。這種猜測可能會導致意想不到的結果。

塊級元素和內聯元素
?

在 HTML 中有兩種你需要知道的重要元素類別，塊級元素和內聯元素。

• 塊級元素在頁面中以塊的形式展現。一個塊級元素出現在它前面的內容之后的新行上。任何跟在塊級元素后面的內容也會出現在新的行上。塊級元素通常是頁面上的結構元素。例如，一個塊級元素可能代表標題、段落、列表、導航菜單或頁腳。一個塊級元素不會嵌套在一個內聯元素里面，但它可能嵌套在另一個塊級元素里面。
• 內聯元素通常出現在塊級元素中并環繞文檔內容的一小部分，而不是一整個段落或者一組內容。內聯元素不會導致文本換行。它通常與文本一起使用，例如，<a>?元素創建一個超鏈接，<em>?和?<strong>?等元素創建強調
  
  ?

考慮如下示例：?

<em>第一</em><em>第二</em><em>第三</em><p>第四</p>
<p>第五</p>
<p>第六</p>

<em>?是一個內聯元素，所以就像你在下方可以看到的，第一行代碼中的三個元素都沒有間隙的展示在了同一行。而?<p>?是一個塊級元素，所以第二行代碼中的每個?p?元素分別都另起了新的一行展現，并且每個段落間都有一些間隔（這是因為默認的瀏覽器有著展示?<p>?元素的默認?CSS 樣式）。

第一第二第三

第四

第五

第六

備注：?HTML5 重新定義了元素的類別：見元素內容分類。盡管這些新的定義更精確，但卻比上述的“塊級元素”和“內聯元素”更難理解，因此在之后的討論中仍使用舊的定義。

備注：?在這篇文章中提到的“塊”和“內聯”，不應該與?CSS 盒子的類型中的同名術語相混淆。盡管它們默認是相關的，但改變 CSS 顯示類型并不會改變元素的分類，也不會影響它可以包含和被包含于哪些元素。防止這種混淆也是 HTML5 摒棄這些術語的原因之一。

備注：?你可以查閱包含了塊級元素和內聯元素列表的參考頁面。參見塊級元素和內聯元素頁面。

空元素

不是所有元素都擁有開始標簽、內容和結束標簽。一些元素只有一個標簽，通常用來在此元素所在位置插入/嵌入一些東西。這些元素被稱為空元素。例如：元素?<img>?是用來在頁面插入一張指定的圖片。?

<imgsrc="https://roy-tian.github.io/learning-area/extras/getting-started-web/beginner-html-site/images/firefox-icon.png"alt="Firefox 圖標" />

?備注：?HTML 中，無需在一個空元素的標簽末尾添加?/，例如?<img src="images/cat.jpg" alt="cat" />。然而，這也是一種有效的語法，當你希望你的 HTML 是有效的 XML 時，這么做也沒問題。

屬性

元素也可以擁有屬性，屬性看起來像這樣：?

?屬性包含元素的額外信息，這些信息不會出現在實際的內容中。在上述例子中，這個?class?屬性是一個識別名稱，以后為元素設置樣式信息時更加方便。

屬性必須包含：

• 一個空格，它在屬性和元素名稱之間。如果一個元素具有多個屬性，則每個屬性之間必須由空格分隔。
• 屬性名稱，后面跟著一個等于號。
• 一個屬性值，由一對引號（""）引起來。

為元素添加屬性

另一個例子是關于元素?<a>?的——元素?<a>?是錨，它使被標簽包裹的內容成為一個超鏈接。錨元素可以添加多種屬性，部分如下：

href

這個屬性聲明超鏈接的 web 地址。例如?href="https://www.mozilla.org/"。

title

title?屬性為超鏈接聲明額外的信息，比如你將鏈接至的那個頁面。例如?title="The Mozilla homepage"。當鼠標懸停在超鏈接上面時，這部分信息將以工具提示的形式顯示。

target

target?屬性用于指定鏈接如何呈現出來。例如，target="_blank"?將在新標簽頁中顯示鏈接。如果你希望在當前標簽頁顯示鏈接，忽略這個屬性即可。

編輯下面的文本框中的內容，使之變成指向任一個你喜歡的 web 地址的鏈接。

1. 添加?<a>?元素。
2. 添加?href?屬性和?title?屬性。
3. 指定?target?屬性，使得點擊鏈接時在新標簽頁打開。

?

?布爾屬性

有時你會看到沒有值的屬性，這也是完全可以接受的。這些屬性被稱為布爾屬性。布爾屬性只能有一個值，這個值一般與屬性名稱相同。例如，考慮?disabled?屬性，你可以將其分配給表單輸入元素。用它來禁用表單輸入元素，這樣用戶就不能輸入了。被禁用的元素通常有一個灰色的外觀。示例如下：?

<input type="text" disabled="disabled" />

?方便起見，我們完全可以將其寫成以下形式：

<!-- 使用 disabled 屬性來防止終端用戶輸入文本到輸入框中 -->
<input type="text" disabled /><!-- 下面這個輸入框不包含 disabled 屬性，所以用戶可以向其中輸入 -->
<input type="text" />

作為參考，上面的例子還包括一個非禁用的表單輸入元素。上面兩段 HTML 代碼產生的效果如下：

省略包圍屬性值的引號

如果你看了很多其他網站的代碼，你可能會遇到一些奇怪的標記風格，包括沒有引號的屬性值。在某些情況下它是被允許的，但是其他情況下會破壞你的標記。例如，針對之前的鏈接示例，我們可以像這樣寫一個只擁有一個?href?屬性的版本：

<a href=https://www.mozilla.org/>favorite website</a>

?然而，當我們再添加一個?title?屬性時，就會出現問題：

此時瀏覽器會誤解你的標記，它會把?title?屬性理解為三個屬性——title 的屬性值為?The，另外還有兩個布爾屬性?Mozilla?和?homepage，很明顯不是我們所期望的！并且在這個編碼里面它會報錯或者出現異常行為。試一試把鼠標移動到鏈接上，看會顯示什么 title 文字！

我們建議始終添加引號——這樣可以避免很多問題，并且使代碼更易讀。?

使用單引號還是雙引號？

在目前為止，本章內容所有的屬性都是由雙引號來包裹。然而，你也許在一些 HTML 中也見過單引號。這只是風格的問題，你可以從中選擇一個你喜歡的。以下兩種情況都可以：

<a href='https://www.example.com'>示例站點鏈接</a><a href="https://www.example.com">示例站點鏈接</a>

但應該注意單引號和雙引號不能在一個屬性值里面混用。下面的語法是錯誤的:

在一個 HTML 中已使用一種引號，你可以在此引號中嵌套另外一種引號：

<a href="https://www.example.com" title="你覺得'好玩嗎'？">示例站點鏈接</a>

如果你想將英文引號（單引號或雙引號）當作文本顯示在 html 中，你就必須使用?HTML 實體引用。像這樣的代碼就會破壞顯示：?

要這樣做：

<a href="https://www.example.com" title="Isn't this fun?">示例站點鏈接</a>

?剖析 HTML 文檔

單獨的 HTML 元素本身并不十分有用。接下來，我們來看看單個元素是如何組合成整個 HTML 頁面的：

<!doctype html>
<html lang="zh-CN"><head><meta charset="utf-8" /><title>我的測試站點</title></head><body><p>這是我的頁面</p></body>
</html>

這里我們有：

1. <!DOCTYPE html>: 聲明文檔類型。早期的 HTML（大約 1991-1992 年）文檔類型聲明類似于鏈接，規定了 HTML 頁面必須遵從的良好規則，能自動檢測錯誤和其他有用的東西。文檔類型使用類似于這樣：

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   

   文檔類型是一個歷史遺留問題，需要包含它才能使其他東西正常工作。現在，只需要知道?<!DOCTYPE html>?是最短的有效文檔聲明！

2. <html></html>:?<html>?元素。這個元素包裹了頁面中所有的內容，有時被稱為根元素。

3. <head></head>:?<head>?元素。這個元素是一個容器，它包含了所有你想包含在 HTML 頁面中但不在 HTML 頁面中顯示的內容。這些內容包括你想在搜索結果中出現的關鍵字和頁面描述、CSS 樣式、字符集聲明等等。以后的章節中會學到更多相關的內容。

4. <meta charset="utf-8">:?<meta>?元素。這個元素代表了不能由其他 HTML 元相關元素表示的元數據，比如?<base>、<link>、<script>、<style>?或?<title>。charset?屬性將你的文檔的字符集設置為 UTF-8，其中包括絕大多數人類書面語言的大多數字符。有了這個設置，頁面現在可以處理它可能包含的任何文本內容。沒有理由不對它進行設置，它可以幫助避免以后的一些問題。

5. <title></title>:?<title>?元素。這設置了頁面的標題，也就是出現在該頁面加載的瀏覽器標簽中的內容。當頁面被加入書簽時，頁面標題也被用來描述該頁面。

6. <body></body>:?<body>?元素。包含了你訪問頁面時所有顯示在頁面上的內容，包含文本、圖片、視頻、游戲、可播放音頻軌道等等。

HTML 中的空白

在上面的例子中，你可能已經注意到了在代碼中包含了很多的空格——這是沒有必要的；下面的兩個代碼片段是等價的：

<p>狗 狗 很 呆 萌。</p><p>狗 狗        很呆 萌。</p>

無論你在 HTML 元素的內容中使用多少空格（包括一個或多個空白字符或換行），當渲染這些代碼的時候，HTML 解釋器會將連續出現的空白字符減少為一個單獨的空格符。

如果你的代碼有很好的格式化，就會更容易理解你的代碼中發生了什么。在我們的 HTML 中，每個嵌套元素都比它所在的元素多縮進了兩個空格。你可以選擇格式化的風格（例如，每一級縮進多少個空格），但你至少應該考慮格式化。

?實體引用：在 HTML 中包含特殊字符

在 HTML 中，字符?<、>、"、'?和?&?是特殊字符。它們是 HTML 語法自身的一部分，那么你如何將這些字符包含進你的文本中呢，比如說如果你真的想要在文本中使用符號?&?或者小于號，而不想讓它們被瀏覽器視為代碼并被解釋？

我們必須使用字符引用——表示字符的特殊編碼，它們可以在那些情況下使用。每個字符引用以符號 & 開始，以分號（;）結束。

等價字符引用可以很容易記住，因為它使用的文本可以被看作是小于“&lt;”，引號是“&quot;”，其他的也是如此。要找到更多關于實體引用的信息，請參見?XML 和 HTML 字符實體引用列表（維基百科）。

在下面的示例中，有兩個自然段：

htmlCopy to Clipboardplay

<p>HTML 中用 <p> 來定義段落元素。</p><p>HTML 中用 &lt;p&gt; 來定義段落元素</p>

在下面的實時輸出中，你會看到第一段是錯誤的，因為瀏覽器會認為第二個?<p>?是開始一個新的段落！第二段是正確的，因為我們用字符引用來代替了角括號（<?和?>?符號）。

?備注：?不需要為任何其他符號使用實體引用，因為只要你的 HTML 的字符編碼設置為 UTF-8，現代瀏覽器就能很好地處理實際符號。

HTML 注釋

HTML 擁有在代碼中寫注釋的機制。瀏覽器會忽略注釋，有效地使注釋對用戶來說不可見。注釋的目的是讓你在代碼中加入注釋，以解釋你的邏輯或編碼。如果你在離開很久后回到一個代碼庫，以至于你不能完全記住它，這就非常有用。同樣，當不同的人在進行修改和更新時，注釋也是非常寶貴的。

為了將一段 HTML 中的內容置為注釋，你需要將其用特殊的記號?<!--?和?-->?包裹起來，比如：

<p>我在注釋外！</p><!-- <p>我在注釋內！</p> -->

正如你下面所見的那樣，第一段出現在了實時輸出中，但是第二段卻沒有。

?

總結

你已經來到了這篇文章的結尾——希望你享受基礎的 HTML 學習的旅程。

在這里你應該可以理解 HTML 語言的全貌和基本的工作原理。你應該還學會了一些元素和屬性的使用。在這個模塊的后續文章中，我們會深入一些你已經見過的東西的細節，并且展示語言的一些其他概念。

備注：?當你開始學習更多的 HTML 知識時，可能也想了解一些層疊樣式列表（CSS）的基礎知識。CSS 是一種用來設計網頁樣式的語言（比如，用它改變字體、顏色或頁面布局等）。你很快就會發現，HTML 和 CSS 能很好地協調配合。

?“頭”里有什么——HTML 元信息

在頁面加載完成的時候，HTML 文檔中的頭部是不會顯示在 web 瀏覽器的。它包含了諸如頁面的?<title>（標題）、指向?CSS?的鏈接（如果你選擇用 CSS 來為 HTML 內容添加樣式）、指向自定義網頁圖標的鏈接和其他的元數據（描述 HTML 的數據，比如作者和描述文檔的重要關鍵詞）等信息。Web 瀏覽器將使用文檔頭部的信息正確渲染 HTML 文檔。本文將涵蓋上述內容并拓展，以便為你的標記工作打下良好基礎。

什么是 HTML 頭部

讓我們簡單回顧一下上一章節的 HTML 文檔：

<!doctype html>
<html lang="zh-CN"><head><meta charset="utf-8" /><title>我的測試頁面</title></head><body><p>這是我的頁面</p></body>
</html>

HTML 頭部包含 HTML?<head>?元素的內容，與?<body>?元素內容不同，頁面在瀏覽器加載后它的內容不會在瀏覽器中顯示，它的作用是保存頁面的一些元數據。上述示例的頭部非常簡短：

<head><meta charset="utf-8" /><title>我的測試頁面</title>
</head>

然而，大型頁面的頭部會相當大。可以試著到一些喜歡的網站上，使用開發者工具查看網頁的頭部內容。我們在這里的目的不是向你展示如何使用所有可能放在頭部的東西，而是教你如何熟悉使用你想要包括在頭部的主要元素。讓我們開始吧。

添加標題

之前已經講過?<title>?元素，它可以為文檔添加標題。但別和?<h1>?元素搞混了，<h1>?是為 body 添加頂級標題的。有時候?<h1>?也叫作網頁標題，但是二者并不相同。

• <h1>?元素在頁面加載完畢時顯示在頁面中，通常只出現一次，用來標記頁面內容的標題（故事名稱、新聞摘要等等）。
• <title>?元素是一項元數據，用于表示整個 HTML 文檔的標題（而不是文檔內容）。

主動學習：一個簡單的示例

1. 為了開始這個練習，我們希望你到我們的 GitHub 庫中下載一份?title-example.html 網頁副本。要做到這一點，你可以選擇下面兩種操作之一：

   1. 使用你的代碼編輯器，從頁面中拷貝粘貼代碼到一個新的文本文件中，然后將其保存到一個適當的地方。
   2. 按下 GitHub 頁面中的“Raw”按鈕（可能會在瀏覽器新標簽中顯示源代碼），從瀏覽器的菜單中選擇?另存為...，然后選擇一個地方來保存這個文件。

2. 在瀏覽器中打開文件，你會看到類似這樣效果：

   

   現在很明顯的可以看到?<h1>?和?<title>?出現的地方！

3. 你應該嘗試著在你的代碼編輯器中打開這些代碼，編輯這些元素的內容，然后在你的瀏覽器中刷新頁面。祝你玩得開心。

<title>?元素也被以其他的方式使用著。比如說，如果你嘗試為某個頁面添加書簽（在 Firefox 瀏覽器中，點擊書簽 > 將當前標簽頁添加到書簽，或點擊地址欄末尾的星標），你會看到?<title>?的內容被作為建議的書簽名。

正如你即將在下面看到的那樣，<title>?元素的內容也被用在搜索的結果中。

元數據：<meta> 元素

元數據就是描述數據的數據，而 HTML 有一個“官方的”方式來為一個文檔添加元數據——<meta>?元素。當然，其他在這篇文章中提到的東西也可以被當作元數據。有很多不同種類的?<meta>?元素可以被包含進你的頁面的 <head> 元素，但是現在我們還不會嘗試去解釋所有類型，這只會引起混亂。我們會解釋一些你常會看到的類型，先讓你有個概念。?

?指定文檔中的字符編碼

在上面的示例中，這行是被包含的：

<meta charset="utf-8" />

?這個元素簡單的指定了文檔的字符編碼——在這個文檔中被允許使用的字符集。utf-8?是一個通用的字符集，它包含了任何人類語言中的大部分的字符，意味著該 web 頁面可以顯示任意的語言；所以對于你的每一個頁面都使用這個設置會是一個好主意！比如說，你的頁面可以很好的處理英文和日文：

假如你將字符集設置為?ISO-8859-1（拉丁字母表的字符集），那么頁面將出現亂碼：

?備注：?一些瀏覽器（比如 Chrome）會自動修正錯誤的編碼，所以根據你所使用的瀏覽器不同，你或許不會看到這個問題。無論如何，你仍然應該為你的頁面手動設置編碼為?utf-8，來避免在其他瀏覽器中可能出現的問題。

添加作者和描述

許多?<meta>?元素包含了?name?和?content?屬性：

• name?指定了 meta 元素的類型；說明該元素包含了什么類型的信息。
• content?指定了實際的元數據內容。

這兩個 meta 元素對于定義你的頁面的作者和提供頁面的簡要描述是很有用的。讓我們看一個例子：

<meta name="author" content="Chris Mills" />
<metaname="description"content="The MDN Web Docs Learning Area aims to provide
complete beginners to the Web with all they need to know to get
started with developing web sites and applications." />

指定作者在某些情況下是很有用的：如果你需要聯系頁面的作者，問一些關于頁面內容的問題。一些內容管理系統能夠自動獲取頁面作者的信息，然后用于某些用途。

指定一個包括與你的頁面內容有關的關鍵詞的描述是有用的，因為它有可能使你的頁面在搜索引擎進行的相關搜索中出現得更多（這些行為在術語上被稱為：搜索引擎優化?或?SEO）。

主動學習：在搜索引擎中 description 的使用

description 也被使用在搜索引擎顯示的結果頁中。下面通過一個例子來說明：

1. 訪問?MDN Web 文檔的首頁。

2. 查看網頁源代碼（通過鼠標右鍵點擊網頁在彈出的菜單中選擇查看網頁源代碼）。

3. 找到 description meta 標簽。就和如下展示的這樣（可能會時常改變）：

   <metaname="description"content="The MDN Web Docs siteprovides information about Open Web technologiesincluding HTML, CSS, and APIs for both Web sites andprogressive web apps." />
   

4. 現在，在你喜歡的搜索引擎里搜索“MDN Web Docs”（下圖展示的是在谷歌搜索里的情況）。你會看到 description?<meta>?和?<title>?元素如何在搜索結果里顯示——很值得這樣做哦！

備注：?在谷歌搜索里，在主頁面鏈接下面，你將看到一些相關子頁面——這些是站點鏈接，可以在?Google's webmaster tools?配置——這是一種可以使你的站點對搜索引擎更友好的方式。

備注：?許多?<meta>?特性已經不再使用。例如，keyword?<meta>?元素（<meta name="keywords" content="fill, in, your, keywords, here">，為搜索引擎提供關鍵詞，用于確定該頁面與不同搜索詞的相關性）已經被搜索引擎忽略了，因為作弊者填充了大量關鍵詞到 keyword，錯誤地引導搜索結果。

?其他類型的元數據

當你在網站上查看源碼時，你也會發現其他類型的元數據。你在網站上看到的許多功能都是專有創作，旨在向某些網站（如社交網站）提供可使用的特定信息。

例如，Facebook 編寫的元數據協議?Open Graph Data?為網站提供了更豐富的元數據。在 MDN Web 文檔源代碼中，你會發現：

<metaproperty="og:image"content="https://developer.mozilla.org/mdn-social-share.png" />
<metaproperty="og:description"content="The Mozilla Developer Network (MDN) provides
information about Open Web technologies including HTML, CSS, and APIs for both Web sites
and HTML Apps." />
<meta property="og:title" content="Mozilla Developer Network" />

上面代碼展現的一個效果就是，當你在 Facebook 上鏈接到 MDN Web 文檔時，該鏈接將顯示一個圖像和描述：這為用戶提供更豐富的體驗。

Twitter 還擁有自己的類型的專有元數據協議（稱為?Twitter Cards），當網站的 URL 顯示在 twitter.com 上時，它具有相似的效果。例如下面：

<meta name="twitter:title" content="Mozilla Developer Network" />

在你的站點增加自定義圖標

為了進一步豐富你的網站設計，你可以在元數據中添加對自定義圖標的引用，它們會在某些場景下顯示。最常見的用例為?favicon（為“favorites icon”的縮寫，在瀏覽器的“收藏夾”及“書簽”列表中顯示）。

這個不起眼的圖標已經存在很多年了，16 像素的方形圖標是第一種類型。你可以看見（取決于瀏覽器）這些圖標出現在瀏覽器每一個打開的標簽頁中以及書簽面板中的書簽頁面旁邊。

頁面添加網頁圖標的方式有：

1. 將其保存在與網站的索引頁面相同的目錄中，以?.ico?格式保存（大多數瀏覽器支持更通用的格式，如?.gif?或?.png）

2. 將以下行添加到 HTML 的?<head>?塊中以引用它：

   <link rel="icon" href="favicon.ico" type="image/x-icon" />
   

下面是一個 favicon 出現在書簽面板中的例子：

你可能還需要在不同的場景使用不同的圖標。例如，你可以在 MDN Web 文檔的源代碼中找到它：

<link rel="icon" href="/favicon-48x48.[some hex hash].png" />
<link rel="apple-touch-icon" href="/apple-touch-icon.[some hex hash].png" />

這是一種使網站在保存到蘋果設備主屏幕時顯示圖標的方法。你甚至可以為不同的設備提供不同的圖標，以確保圖標在所有設備上都看起來美觀。例如：

<!-- 含有高分辨率 Retina 顯示屏的 iPad Pro：-->
<linkrel="apple-touch-icon"sizes="167x167"href="/apple-touch-icon-167x167.png" />
<!-- 三倍分辨率的 iPhone：-->
<linkrel="apple-touch-icon"sizes="180x180"href="/apple-touch-icon-180x180.png" />
<!-- 沒有 Retina 的 iPad、iPad mini 等：-->
<linkrel="apple-touch-icon"sizes="152x152"href="/apple-touch-icon-152x152.png" />
<!-- 二倍分辨率的 iPhone 和其他設備：-->
<link rel="apple-touch-icon" href="/apple-touch-icon-120x120.png" />
<!-- 基本圖標 -->
<link rel="icon" href="/favicon.ico" />

這些注釋解釋了每個圖標的用途——這些元素涵蓋的東西提供一個高分辨率圖標，這些高分辨率圖標當網站保存到 iPad 的主屏幕時使用。

不用擔心現在實現所有這些類型的圖標——這是一個相當先進的特性，不要求你有這方面的知識來通過課程的進展。這里的主要目的是讓你提前了解有這一樣東西，以防當你瀏覽其他網站的源代碼時不理解源代碼的含義。如果你確實想了解更多關于所有這些值以及如何選擇它們，請閱讀?<link>?元素的參考頁面。

備注：?如果你的網站使用了內容安全策略（Content Security Policy，CSP）來增加安全性，這個策略會應用在 favicon 圖標上。如果你遇到了圖標沒有被加載的問題，你需要確認?Content-Security-Policy?響應頭的?img-src?指令?沒有阻止訪問圖標。

在 HTML 中應用 CSS 和 JavaScript

如今，幾乎你使用的所有網站都會使用?CSS?來讓網頁更加炫酷，并使用?JavaScript?來讓網頁有交互功能，比如視頻播放器、地圖、游戲以及更多功能。這些應用在網頁中很常見，它們分別使用?<link>?元素以及?<script>?元素。?

• <link>?元素經常位于文檔的頭部，它有 2 個屬性，rel="stylesheet"?表明這是文檔的樣式表，而?href?包含了樣式表文件的路徑：

  <link rel="stylesheet" href="my-css-file.css" />
  

• <script>?元素也應當放在文檔的頭部，并包含?src?屬性來指向需要加載的 JavaScript 文件路徑，同時最好加上?defer?以告訴瀏覽器在解析完成 HTML 后再加載 JavaScript。這樣可以確保在加載腳本之前瀏覽器已經解析了所有的 HTML 內容。這樣你就不會因為 JavaScript 試圖訪問頁面上不存在的 HTML 元素而產生錯誤。實際上有很多方法來處理在你的頁面上加載 JavaScript，但對于現代瀏覽器來說，這是最可靠的方法（對于其他方法，請閱讀腳本加載策略）。

  <script src="my-js-file.js" defer></script>
  

?備注：?<script>?元素看起來像一個空元素，但它并不是，因此需要一個結束標記。還可以選擇將腳本放入?<script>?元素中，而不是指向外部腳本文件。

主動學習：在網頁中應用 CSS 和 JavaScript

1. 開始操作之前，先拷貝我們的?meta-example.html、script.js?和?style.css?文件，并把它們保存到本地電腦的同一目錄下，確保使用了正確的文件名和文件格式。
2. 使用瀏覽器和文字編輯器同時打開你的 HTML 文件。
3. 根據上面的信息，添加?<link>?和?<script>?元素到你的 HTML 文件中，這樣你的 HTML 就可以應用 CSS 和 JavaScript 了。

如果按照上述步驟正確地執行，當你保存 HTML 文件并重新刷新瀏覽器的話，你會發現頁面已經變樣了：

• JavaScript 在頁面中添加了一個空列表。現在當你點擊列表中的任何地方，瀏覽器會彈出一個對話框要求你為新列表項輸入一些文本內容。當你點擊 OK 按鈕，剛剛那個新的列表項會添加到頁面上；當你點擊那些已有的列表項，會彈出一個對話框允許你修改列表項的文本。
• CSS 使頁面背景變成了綠色，文本變得大了一點。它還將 JavaScript 添加到頁面中的一些內容進行了樣式化。（帶有黑色邊框的紅色條是 CSS 添加到 JavaScript 生成的列表中的樣式）

?備注：?如果你卡在這個練習當中，無法正常應用 CSS 和 JavaScript，試著查看一下我們的?css-and-js.html?頁面實例。

為文檔設定主語言

最后，值得一提的是可以（而且有必要）為站點設定語言，這個可以通過添加?lang 屬性到 HTML 開始的標簽中來實現（就像?meta-example.html?那樣），如下所示：

<html lang="zh-CN">…
</html>

這在很多方面都很有用。如果你的 HTML 文檔的語言設置好了，那么你的 HTML 文檔就會被搜索引擎更有效地索引（例如，允許它在特定于語言的結果中正確顯示），對于那些使用屏幕閱讀器的視障人士也很有用（例如，法語和英語中都有“six”這個單詞，但是發音卻完全不同）。

你還可以將文檔的分段設置為不同的語言。例如，我們可以把日語部分設置為日語，如下所示：

<p>Japanese example: <span lang="ja">ご飯が熱い。</span>.</p>

這些代碼是根據?ISO 639-1?標準定義的。你可以在?HTML 和 XML 的語言標簽找到更多相關內容。

總結

已經到了我們快速學習 HTML 頭部的尾聲——你還能學到更多的相關的，但是現階段詳盡的講的太多會令人無聊且困惑，我們只希望你現在在這學到最基本的概念！下一篇我們將要學習?HTML 文字處理基礎。

?
HTML 的標題和段落

HTML 的主要工作之一是賦予文本結構，使瀏覽器能夠按照開發者的意圖顯示 HTML 文檔。本文介紹了如何使用?HTML?通過定義標題和段落來提供基本的頁面結構。?

標題和段落

?無論是閱讀故事、報紙、大學教科書還是雜志等，大多數結構化文本都由標題和段落組成。

?結構化內容會使讀者的閱讀體驗更輕松，更愉快。

在 HTML 中，每個段落是通過?<p>?元素進行定義的，比如下面這樣：?

<p>我是一個段落，千真萬確。</p>

每個標題都必須被包裹在一個標題元素中：

<h1>我是文章的標題</h1>

?一共有六種標題元素標簽——h1、h2、h3、h4、h5?和?h6。每個元素代表文檔中不同級別的內容：<h1>?表示主標題，<h2>?表示二級子標題，<h3>?表示三級子標題，依此類推。

實現結構層級

舉個例子，在一個故事中，<h1>?表示故事的標題，<h2>?表示每個章節的標題，<h3>?表示每個章節下的子標題，以此類推。

<h1>三國演義</h1><p>羅貫中</p><h2>第一回 宴桃園豪杰三結義 斬黃巾英雄首立功</h2><p>話說天下大勢，分久必合，合久必分。周末七國分爭，并入于秦。及秦滅之后，楚、漢分爭，又并入于漢……
</p><h2>第二回 張翼德怒鞭督郵 何國舅謀誅宦豎</h2><p>且說董卓字仲穎，隴西臨洮人也，官拜河東太守，自來驕傲。當日怠慢了玄德，張飛性發，便欲殺之……
</p><h3>卻說張飛</h3><p>卻說張飛飲了數杯悶酒，乘馬從館驛前過，見五六十個老人，皆在門前痛哭。飛問其故，眾老人答曰：“督郵逼勒縣吏，欲害劉公；我等皆來苦告，不得放入，反遭把門人趕打！”……
</p>

所涉及的元素具體代表什么，完全取決于作者編輯的內容，只要層次結構是合理的。在創建此類結構時，只需要記住一些最佳實踐：

• 最好只對每個頁面使用一次?<h1>——這是頂級標題，所有其他標題位于層次結構中的下方。
• 請確保在層次結構中以正確的順序使用標題。不要使用?<h3>?來表示副標題，后面再跟?<h2>?來表示二級副標題——這是沒有意義的，會導致奇怪的結果。
• 在現有的六個標題層次中，除非覺得有必要，否則應該爭取每頁使用不超過三個。有很多層次的文件（例如，深層次的標題層次）會變得笨重，難以瀏覽。在這種情況下，如果可能的話，建議將內容分散到多個頁面。

為什么我們需要結構化？

回答這個問題前，讓我們先來看一段文檔示例——并從運行這段文檔示例（美味的豆沙食譜）開始。你應該在本地機器上保存一份這個文件的副本，因為在以后的練習中會需要它。這個文件的主體目前包含了多條內容。它們沒有任何標記，但都用換行符隔開（按回車鍵進入下一行）。

然而，當在瀏覽器中打開文檔時，會看到文本顯示為一整塊！

?

這是因為沒有元素給內容結構，所以瀏覽器不知道什么是標題，什么是段落。此外：

• 用戶在閱讀網頁時，往往會快速瀏覽以查找相關內容，經常只是閱讀開頭的標題（我們通常在一個網頁上會花費很少的時間)。如果用戶不能在幾秒內看到一些有用的內容，他們很可能會感到沮喪并離開。
• 對網頁建立索引的搜索引擎將標題的內容視為影響網頁搜索排名的重要關鍵字。沒有標題，你的網頁在搜索引擎優化方面效果不佳。
• 嚴重視力障礙者通常不會閱讀網頁；他們用聽力來代替。完成這項工作的軟件叫做屏幕閱讀器。該軟件提供了快速訪問給定文本內容的方法。在使用的各種技術中，它們通過朗讀標題來提供文檔的概述，讓用戶能快速找到他們需要的信息。如果標題不可用，用戶將不得不聽到整個文檔被大聲朗讀。
• 使用?CSS?樣式化內容，或者使用?JavaScript?做一些有趣的事情，你需要包含相關內容的元素，使得 CSS / JavaScript 可以有效地定位它。

因此，我們需要給我們的內容進行結構性標記。

主動學習：為我們的內容賦予結構

為什么我們需要語義？

在我們身邊的任何地方都要依賴語義——我們依靠以前的經驗來告訴我們一個日常物品的功能是什么；當我們看到某個東西時，我們知道它的功能是什么。舉個例子，我們知道紅色交通燈表示“停止”，綠色交通燈表示“通行”。如果運用了錯誤的語義，事情會迅速地變得非常棘手（難道有某個國家使用紅色代表通行？我不希望如此）

同樣的道理，我們需要確保使用了正確的元素來給予內容正確的含義、作用以及外形。在這里，h1?元素也是一個語義元素，它所包裹的文本具有“頁面上的頂級標題”的作用（或意義）。

<h1>這是一個頂級標題</h1>

一般來說，瀏覽器會給它一個更大的字形來讓它看上去像個標題（雖然也可以使用 CSS 讓它變成任何你想要的樣式）。更重要的是，它的語義值將以多種方式被使用，比如通過上文提到過的搜索引擎和屏幕閱讀器。

在另一方面，你可以讓任一元素看起來像一個頂級標題，考慮如下：

<span style="font-size: 32px; margin: 21px 0; display: block;">這是頂級標題嗎？</span
>

這是一個?<span>?元素，它沒有語義。當想要對它用 CSS（或者 JavaScript）時，可以用它包裹內容，且不附加任何額外的意義（在未來的課程中你會發現更多這類元素）。我們已經對它使用了 CSS 來讓它看起來像一個頂級標題。然而，由于它沒有語義值，所以它不會有任何上文提到的幫助。最好的方法是使用相關的 HTML 元素來標記這個項目。

總結

關于 HTML 標題和段落的學習到此結束。接下來，我們將探討語義 HTML 的更多方面：給予詞語強調。

強調與重要性?

上一篇文章探討了語義在 HTML 中的重要性，重點是標題和段落。本文將繼續以語義為主題，探討對文本進行強調和重要性處理的 HTML 元素（與印刷媒體中的斜體和粗體文字類似）。?

什么是強調和著重強調？

?在日常用語中，我們常常會加重某個字的讀音，或者用加粗等方式突出某句話的重點。與此類似，HTML 也提供了相應的標簽，用于標記某些文本，使其具有加粗、傾斜、下劃線等效果。下面，我們將學習一些最常見的標簽。

強調

在口語表達中，我們有時會強調某些字，用來改變這句話的意思。同樣地，在書面用語中，我們可以使用斜體字來達到同樣的效果。例如，下面兩個句子便有不同的意思：

我很慶幸你沒有遲到。

我很慶幸你沒有遲到。

?第一句話聽起來真的像松了一口氣——因為沒有遲到。相反，第二句話因為以斜體強調了“慶幸”和“遲到”兩詞，聽起來具有諷刺性而且有隱含的攻擊性，表達對一個人遲到的惱怒。

在 HTML 中我們用?<em>（emphasis）元素來標記這樣的情況。這樣做既可以讓文檔讀起來更有趣，也可以被屏幕閱讀器識別，并以不同的語調發出。瀏覽器默認樣式為斜體，但你不應該純粹為了獲得斜體風格而使用這個標簽。如果僅僅為了獲得斜體樣式而不增加語義輔助，你應該使用?<span>?元素和一些 CSS，或者是?<i>?元素（見下文）。?

<p>我很<em>慶幸</em>你沒有<em>遲到</em>。</p>

著重強調

為了強調重要的詞，在口語方面我們往往用重音強調，在書面用語中則是用粗體字來達到強調的效果。例如下面這段：

這杯液體毒性很大。

就指望你了，千萬不要遲到！

在 HTML 中我們用?<strong>（strong importance）元素來標記這樣的情況。除了使文檔更有用之外，屏幕閱讀器也能識別這些內容，并可將其配置為以不同的語音語調進行朗讀。瀏覽器默認樣式為粗體，但你不應該純粹為了獲得粗體風格而使用這個標簽。如果僅僅為了獲得粗體樣式而不增加語義輔助，你應該使用?<span>?元素和一些 CSS，或者是?<b>?元素（見下文）。?

<p>這杯液體<strong>毒性很大</strong>。</p><p>就指望你了，千萬<strong>不要</strong>遲到！</p>

?如有需要，你可以將 strong 元素和 em 元素相互嵌套：

<p>這杯液體<strong>毒性很大</strong>——如果飲用了它，你<strong>可能<em>會死</em></strong>。
</p>

主動學習：我們是重要的！

在這個主動學習部分，我們提供了一個可編輯的示例。在這個示例中，我們希望你能嘗試在你認為需要斜體強調和著重強調的詞上添加斜體強調和著重強調的內容，只是為了進行一些練習。

斜體、粗體、下劃線……

到目前為止，我們所討論的元素都有明確的相關語義。<b>、<i>?和?<u>?的情況卻有點復雜。它們出現于人們要在文本中使用粗體、斜體、下劃線但 CSS 仍然不被完全支持的時期。像這樣僅僅影響表象而且沒有語義的元素，被稱為表現元素（presentational element）并且不應該再被使用。因為正如我們在之前看到的，語義對無障礙、搜索引擎優化（SEO）等非常重要。

HTML5 重新定義了?<b>、<i>?和?<u>，賦予了它們新的但有點令人困惑的語義角色。

最好的經驗法則是：只有在沒有更合適的元素時，才適合使用?<b>、<i>?或?<u>?來表達傳統上用粗體、斜體或下劃線表達的意思；而通常情況下是有更合適的元素可供使用的。<strong>、<em>、<mark>?或?<span>?可能是更加合適的選擇。

始終保持無障礙的開發理念。斜體的概念對使用屏幕閱讀器的人或使用拉丁字母以外的書寫系統的人沒有什么幫助。

• <i>?被用來傳達傳統上用斜體表達的意義：外國文字、分類名稱、技術術語、思想……
• <b>?被用來傳達傳統上用粗體表達的意義：關鍵字、產品名稱、引導句……
• <u>?被用來傳達傳統上用下劃線表達的意義：專有名詞、拼寫錯誤……

備注：?人們強烈地將下劃線與超鏈接聯系起來。因此，在網頁中，最好只給鏈接加下劃線。在語義上合適的時候使用?<u>?元素，但要考慮使用 CSS 將默認的下劃線改為在網頁中更合適的東西。下面的例子說明了如何做到這一點：?

<!-- 學名 -->
<p>紅喉北蜂鳥（學名：<i>Archilocus colubris</i>）是北美東部最常見的蜂鳥品種。
</p><!-- 舶來詞 -->
<p>菜單上有好多舶來詞匯，比如 <i lang="uk-latn">vatrushka</i>（東歐乳酪面包）、<ilang="id">nasi goreng</i>（印尼炒飯）以及 <i lang="fr">soupe à l'oignon</i>（法式洋蔥湯）。
</p><!-- 已知的錯誤書寫 -->
<p>總有一天我會改掉寫<u class="spelling-error">措字</u>的毛病。</p><!-- 在定義中，被定義的術語 -->
<dl><dt>語義化 HTML</dt><dd>根據元素的<b>語義</b>意義而不是外觀來使用它們。</dd>
</dl>

?

總結

強調和重要性的討論暫時告一段落。下面我們來看看如何在 HTML 中表示列表。

列表?

現在，讓我們把目光轉向列表。列表在生活中無處不在——從你的購物清單，到你每天回家時下意識遵循的方向列表，再到你在這些教程中遵循的說明列表！HTML 有一套方便的元素，可以讓我們定義不同類型的列表，這一點你可能不會感到驚訝。在 Web 中，我們有三種類型的列表：無序列表、有序列表和描述列表。本課將向你展示如何使用不同類型的列表。?

無序列表

無序列表用于標記列表項目順序無關緊要的列表——讓我們以購物清單為例。

每份無序的清單從?<ul>?元素開始，需要包裹清單上所有被列出的項目：?

<ul>豆漿油條豆汁焦圈
</ul>

?然后就是用?<li>（list item，列表項）元素把每個列出的項目單獨包裹起來：

<ul><li>豆漿</li><li>油條</li><li>豆汁</li><li>焦圈</li>
</ul>

?

有序列表

有序列表需要按照項目的順序列出來——讓我們以一組方向指示為例：

這個標記的結構和無序列表一樣，除了需要用?<ol>?元素而不是?<ul>?元素將所有項目包裹：?

<ol><li>沿這條路走到頭</li><li>右轉</li><li>直行穿過第一個十字路口</li><li>在第三個十字路口處左轉</li><li>繼續走 300 米，學校就在你的右手邊</li>
</ol>

?

主動學習：標記我們的食譜

<h1>宮保雞丁的做法</h1>
<p>宮保雞丁，川菜系中的傳統名菜，由雞丁、干辣椒、花生米等炒制而成。由于其入口鮮辣，雞肉的鮮嫩配合花生的香脆，廣受大眾歡迎。</p>
<p>相傳宮保雞丁是清朝光緒年間的署理四川總督丁寶楨所發明，是他招待客人時叫家廚煮的菜肴。由于丁寶楨后來被封為東宮少保（太子少保），所以被稱為“丁宮保”，而這道菜亦被稱為“宮保雞丁”</p><h2>原料</h2>
<ul><li>去骨雞胸肉：一斤八兩</li><li>干紅辣椒：八錢</li><li>炸花生米：一兩五錢</li><li>花椒粒：兩大匙</li><li>蔥：兩根（切段）</li><li>蛋白：一個</li><li>淀粉：三大匙</li><li>醬油：兩大匙</li><li>蒜末：半茶匙</li><li>糖：半茶匙</li><li>白醋：一茶匙</li><li>色拉油：適量</li><li>鹽：兩茶匙</li>
</ul><h2>做法</h2>
<ol><li>先用蛋白一個、鹽半茶匙及淀粉兩大匙攪拌均勻，調成“腌料”，雞胸肉切成約一厘米見方的碎丁并用“腌料”攪拌均勻，腌漬半小時。</li><li>用醬油一大匙、淀粉水一大匙、糖半茶匙、鹽四分之一茶匙、白醋一茶匙、蒜末半茶匙調拌均勻，調成“綜合調味料”。</li><li>雞丁腌好以后，色拉油下鍋燒熱，先將雞丁倒入鍋內，用大火快炸半分鐘，炸到變色之后，撈出來瀝干油汁備用。</li><li>在鍋里留下約兩大匙油，燒熱后將切好的干辣椒下鍋，用小火炒香后，再放入花椒粒和蔥段一起爆香。隨后雞丁重新下鍋，用大火快炒片刻后，再倒入“綜合調味料”繼續快炒。</li><li>如果你采用正宗川菜做法，最后只需加入花生米，炒拌幾下就可以起鍋了。</li><li>如果你在北方，可加入黃瓜丁、胡蘿卜丁和花生米，翻炒后起鍋。</li>
</ol><h2>大千雞</h2>
<p>張大千居加拿大期間，曾按自己喜好改變宮保雞丁的做法，并傳授當地廚師，廚師將之命名為“大千雞”，以茲紀念。大千雞與宮保雞丁不同之處，是使用經細工去皮、出骨、剔膜的雞腿肉，以干辣椒、豆瓣醬為味，而且不用花生。</p>

?

嵌套列表

將一個列表嵌入到另一個列表是完全可以的。你可能想讓一些子項目列在一級項目之下。讓我們從食譜示例中獲取第二個列表：

<ol><li>先用蛋白一個、鹽半茶匙及淀粉兩大匙攪拌均勻，調成“腌料”，雞胸肉切成約一厘米見方的碎丁并用“腌料”攪拌均勻，腌漬半小時。</li><li>用醬油一大匙、淀粉水一大匙、糖半茶匙、鹽四分之一茶匙、白醋一茶匙、蒜末半茶匙調拌均勻，調成“綜合調味料”。</li><li>雞丁腌好以后，色拉油下鍋燒熱，先將雞丁倒入鍋內，用大火快炸半分鐘，炸到變色之后，撈出來瀝干油汁備用。</li><li>在鍋里留下約兩大匙油，燒熱后將切好的干辣椒下鍋，用小火炒香后，再放入花椒粒和蔥段一起爆香。隨后雞丁重新下鍋，用大火快炒片刻后，再倒入“綜合調味料”繼續快炒。</li><li>如果你采用正宗川菜做法，最后只需加入花生米，炒拌幾下就可以起鍋了。</li><li>如果你在北方，可加入黃瓜丁、胡蘿卜丁和花生米，翻炒后起鍋。</li>
</ol>

?由于最后兩項與它們的前一項非常密切相關（它們看起來更像該項的子項或選項），將它們編輯成無序列表，并嵌套在該項的子項中可能更合理。就像下面這樣：

<ol><li>先用蛋白一個、鹽半茶匙及淀粉兩大匙攪拌均勻，調成“腌料”，雞胸肉切成約一厘米見方的碎丁并用“腌料”攪拌均勻，腌漬半小時。</li><li>用醬油一大匙、淀粉水一大匙、糖半茶匙、鹽四分之一茶匙、白醋一茶匙、蒜末半茶匙調拌均勻，調成“綜合調味料”。</li><li>雞丁腌好以后，色拉油下鍋燒熱，先將雞丁倒入鍋內，用大火快炸半分鐘，炸到變色之后，撈出來瀝干油汁備用。</li><li>在鍋里留下約兩大匙油，燒熱后將切好的干辣椒下鍋，用小火炒香后，再放入花椒粒和蔥段一起爆香。隨后雞丁重新下鍋，用大火快炒片刻后，再倒入“綜合調味料”繼續快炒。<ul><li>如果你采用正宗川菜做法，最后只需加入花生米，炒拌幾下就可以起鍋了。</li><li>如果你在北方，可加入黃瓜丁、胡蘿卜丁和花生米，翻炒后起鍋。</li></ul></li>
</ol>

?

描述列表

?描述列表的目的是標記一組項目及其相關描述，如術語和定義或問題和答案。讓我們來看一組術語和定義的示例：

?描述列表使用與其他列表類型不同的包裹標簽——<dl>；此外，每一項都用?<dt>（description term，描述術語）元素包裹。每個描述都用?<dd>（description definition，描述定義）元素包裹。

描述列表示例

讓我們來完成下面的標記例子：

<dl><dt>內心獨白</dt><dd>戲劇中，某個角色對自己的內心活動或感受進行念白表演，這些臺詞只面向觀眾，而其他角色不會聽到。</dd><dt>語言獨白</dt><dd>戲劇中，某個角色把自己的想法直接進行念白表演，觀眾和其他角色都可以聽到。</dd><dt>旁白</dt><dd>戲劇中，為渲染幽默或戲劇性效果而進行的場景之外的補充注釋念白，只面向觀眾，內容一般都是角色的感受、想法、以及一些背景信息等。</dd>
</dl>

?瀏覽器的默認樣式會在描述列表的術語及其定義之間產生縮進。

?單個術語的多個描述

請注意，一個術語可以同時有多個描述，例如：?

<dl><dt>旁白</dt><dd>戲劇中，為渲染幽默或戲劇性效果而進行的場景之外的補充注釋念白，只面向觀眾，內容一般都是角色的感受、想法、以及一些背景信息等。</dd><dd>寫作中，指與當前主題相關的一段內容，通常不適于直接置于內容主線中，因此置于附近的其他位置（通常位于主線內容旁邊一個文本框內）。</dd>
</dl>

技能測試！

關于 HTML 基本語義元素的三篇文章已經讀完，但你還記得最重要的信息嗎？你可以找到一些進一步的測試，以驗證你在繼續前進之前已經保留了這些信息——參見技能測試：HTML 文本基礎知識。

總結

列表就到此為止。接下來我們將進行更高層次的討論。我們已經展示了如何實現一些單個頁面的功能，但如何構建整個 HTML 頁面呢？接下來將討論文檔結構。

文檔與網站架構?

HTML?不僅能夠定義網頁的單獨部分（例如“段落”或“圖片”），還可以使用塊級元素（例如“標題欄”、“導航菜單”、“主內容列”）來定義網站中的復合區域。本文將探討如何規劃基本的網站結構，并根據規劃的結構來編寫 HTML。

?文檔的基本組成部分

網頁的外觀多種多樣，但是除了全屏視頻或游戲，或藝術作品頁面，或只是結構不當的頁面以外，都傾向于使用類似的標準組件：?

頁眉

通常橫跨于整個頁面頂部有一個大標題 和/或 一個標志。這是網站的主要一般信息，通常存在于所有網頁。

導航欄

指向網站各個主要區段的超鏈接。通常用菜單按鈕、鏈接或標簽頁表示。類似于標題欄，導航欄通常應在所有網頁之間保持一致，否則會讓用戶感到疑惑，甚至無所適從。許多 web 設計人員認為導航欄是標題欄的一部分，而不是獨立的組件，但這并非絕對；還有人認為，兩者獨立可以提供更好的?無障礙訪問特性，因為屏幕閱讀器可以更清晰地分辨二者。

主內容

中心的大部分區域是當前網頁大多數的獨有內容，例如視頻、文章、地圖、新聞等。這些內容是網站的一部分，且會因頁面而異。

側邊欄

一些外圍信息、鏈接、引用、廣告等。通常與主內容相關（例如一個新聞頁面上，側邊欄可能包含作者信息或相關文章鏈接），還可能存在其他的重復元素，如輔助導航系統。

頁腳

橫跨頁面底部的狹長區域。和標題一樣，頁腳是放置公共信息（比如版權聲明或聯系方式）的，一般使用較小字體，且通常為次要內容。還可以通過提供快速訪問鏈接來進行?SEO。

一個“典型的網站”可能會這樣布局：

?以上簡單示例不是很精美，但是足夠說明網站的典型布局方式了。一些站點擁有更多列，其中一些遠比這復雜，但一切在你掌握之中。通過合適的 CSS，你可以使用相當多種的任意頁面元素來環繞在不同的頁面區域來做成你想要的樣子，但如前所述，我們要敬畏語義，做到正確選用元素。

這是因為視覺效果并不是一切。我們可以修改最重要內容（例如導航菜單和相關鏈接）的顏色、字體大小來吸引用戶的注意，但是這對視障人士是無效的，“粉紅色”和“大字體”對他們并不奏效。?

備注：?全球色盲患者比例為 4%，換句話說，每 12 名男性就有一位色盲，每 200 名女性就有一位色盲。全盲和視障人士約占世界人口（約 70 億）的 13％（2015 年?全球約有 9.4 億人口存在視力問題）。?

HTML 代碼中可根據功能來為區段添加標記。可使用元素來無歧義地表示上文所講的內容區段，屏幕閱讀器等輔助技術可以識別這些元素，并幫助執行“找到主導航“或”找到主內容“等任務。參見前文所講的頁面中元素結構和語義不佳所帶來的后果。?

為了實現語義化標記，HTML 提供了明確這些區段的專用標簽，例如：

• <header>：頁眉。
• <nav>：導航欄。
• <main>：主內容。主內容中還可以有各種子內容區段，可用<article>、<section>?和?<div>?等元素表示。
• <aside>：側邊欄，經常嵌套在?<main>?中。
• <footer>：頁腳。

主動學習：研究示例代碼

上圖的示例可用下面的代碼表示（完整代碼請參見?GitHub），請結合圖片觀察代碼，并找出代碼中可見的區段：

<!doctype html>
<html><head><meta charset="utf-8" /><title>二次元俱樂部</title><linkhref="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One"rel="stylesheet" /><linkhref="https://fonts.googleapis.com/css?family=ZCOOL+KuaiLe"rel="stylesheet" /><link href="style.css" rel="stylesheet" /></head><body><header><!-- 本站所有網頁的統一主標題 --><h1>聆聽電子天籟之音</h1></header><nav><!-- 本站統一的導航欄 --><ul><li><a href="#">主頁</a></li><!-- 共 n 個導航欄項目，省略…… --></ul><form><!-- 搜索欄是站點內導航的一個非線性的方式。 --><input type="search" name="q" placeholder="要搜索的內容" /><input type="submit" value="搜索" /></form></nav><main><!-- 網頁主體內容 --><article><!-- 此處包含一個 article（一篇文章），內容略…… --></article><aside><!-- 側邊欄在主內容右側 --><h2>相關鏈接</h2><ul><li><a href="#">這是一個超鏈接</a></li><!-- 側邊欄有 n 個超鏈接，略略略…… --></ul></aside></main><footer><!-- 本站所有網頁的統一頁腳 --><p>? 2050 某某保留所有權利</p></footer></body>
</html>

?請花一些時間來閱讀，其中的注釋應該能夠幫助你理解這些代碼。現在能夠理解上面的代碼就可以，因為編寫一套正確的 HTML 結構是理解文檔布局的前提，布局工作就交給 CSS 吧。在學習 CSS 一章時我們再展開介紹

HTML 布局元素細節

理解所有 HTML 區段元素具體含義是很有益處的，這一點將隨著個人 web 開發經驗的逐漸豐富日趨顯現。更多細節請查閱?HTML 元素參考。現在，你只需要理解以下主要元素的意義：

• <main>?存放每個頁面獨有的內容。每個頁面上只能用一次?<main>，且直接位于?<body>?中。最好不要把它嵌套進其他元素。
• <article>?包圍的內容即一篇文章，與頁面其他部分無關（比如一篇博文）。
• <section>?與?<article>?類似，但?<section>?更適用于組織頁面使其按功能（比如迷你地圖、一組文章標題和摘要）分塊。一般的最佳用法是：以?標題?作為開頭；也可以把一篇?<article>?分成若干部分并分別置于不同的?<section>?中，也可以把一個區段?<section>?分成若干部分并分別置于不同的?<article>?中，取決于上下文。
• <aside>?包含一些間接信息（術語條目、作者簡介、相關鏈接，等等）。
• <header>?是簡介形式的內容。如果它是?<body>?的子元素，那么就是網站的全局頁眉。如果它是?<article>?或<section>?的子元素，那么它是這些部分特有的頁眉（此?<header>?非彼標題）。
• <nav>?包含頁面主導航功能。其中不應包含二級鏈接等內容。
• <footer>?包含了頁面的頁腳部分。

無語義元素

有時你會發現，對于一些要組織的項目或要包裝的內容，現有的語義元素均不能很好對應。有時候你可能只想將一組元素作為一個單獨的實體來修飾來響應單一的用?CSS?或?JavaScript。為了應對這種情況，HTML 提供了?<div>?和?<span>?元素。應配合使用?class?屬性提供一些標簽，使這些元素能易于查詢。

<span>?是一個內聯的（inline）無語義元素，最好只用于無法找到更好的語義元素來包含內容時，或者不想增加特定的含義時。例如：

<p>國王喝得酩酊大醉，在凌晨 1 點時才回到自己的房間，踉蹌地走過門口。<spanclass="editor-note">[編輯批注：此刻舞臺燈光應變暗]</span>.
</p>

這里，“編輯批注”僅僅是對舞臺劇導演提供額外指引；沒有具體語義。對于視力正常的用戶，CSS 應將批注內容與主內容稍微隔開一些。?

<div>?是一個塊級無語義元素，應僅用于找不到更好的塊級元素時，或者不想增加特定的意義時。例如，一個電子商務網站頁面上有一個一直顯示的購物車組件。?

<div class="shopping-cart"><h2>購物車</h2><ul><li><p><a href=""><strong>銀耳環</strong></a>：$99.95.</p><img src="../products/3333-0985/" alt="Silver earrings" /></li><li>...</li></ul><p>售價：$237.89</p>
</div>

?這里不應使用?<aside>，因為它和主內容并沒有必要的聯系（你想在任何地方都能看到它）。甚至不能用?<section>?，因為它也不是頁面上主內容的一部分。所以在這種情況下就應使用?<div>，為滿足無障礙使用特征，還應為購物車的標題設置一個可讀標簽。

?警告：?div 元素非常便利但容易被濫用。由于它們沒有語義值，會使 HTML 代碼變得混亂。要小心使用，只有在沒有更好的語義方案時才選擇它，而且要盡可能少用，否則文檔的升級和維護工作會非常困難。

?換行與水平分割線

有時會用到?<br>?和?<hr>?兩個元素，需要介紹一下。

<br>：換行元素

<br>?可在段落中進行換行；<br>?是唯一能夠生成多個短行結構（例如郵寄地址或詩歌）的元素。比如：

<p>從前有個人叫小高<br />他說寫 HTML 感覺最好<br />但他寫的代碼結構語義一團糟<br />他寫的標簽誰也懂不了。
</p>

?沒有?<br>?元素，這段會直接顯示在長長的一行中（如前文所講，HTML 會忽略大部分空格）；使用?<br>?元素，才使得詩看上去像詩：

<hr>：主題性中斷元素

<hr>?元素在文檔中生成一條水平分割線，表示文本中主題的變化（例如話題或場景的改變）。一般就是一條水平的直線。例如：

<p>原來這唐僧是個慈憫的圣僧。他見行者哀告，卻也回心轉意道：“既如此說，且饒你這一次。再休無禮。如若仍前作惡，這咒語顛倒就念二十遍！”行者道：“三十遍也由你，只是我不打人了。”卻才伏侍唐僧上馬，又將摘來桃子奉上。唐僧在馬上也吃了幾個，權且充饑。
</p>
<hr />
<p>卻說那妖精，脫命升空。原來行者那一棒不曾打殺妖精，妖精出神去了。他在那云端里，咬牙切齒，暗恨行者道：“幾年只聞得講他手段，今日果然話不虛傳。那唐僧已此不認得我，將要吃飯。若低頭聞一聞兒，我就一把撈住，卻不是我的人了。不期被他走來，弄破我這勾當，又幾乎被他打了一棒。若饒了這個和尚，誠然是勞而無功也。我還下去戲他一戲。”
</p>

?將渲染成：

規劃一個簡單的網站

在完成頁面內容的規劃后，一般應按部就班地規劃整個網站的內容，要可能帶給用戶最好的體驗，需要哪些頁面、如何排列組合這些頁面、如何互相鏈接等問題不可忽略。這些工作稱為信息架構。在大型網站中，大多數規劃工作都可以歸結于此，而對于一個只有幾個頁面的簡單網站，規劃設計過程可以更簡單，更有趣！

1. 時刻記住，大多數（不是全部）頁面會使用一些相同的元素，例如導航菜單以及頁腳內容。若網站為商業站點，不妨在所有頁面的頁腳都加上聯系方式。請記錄這些對所有頁面都通用的內容：接下來，可為頁面結構繪制草圖（這里與前文那個站點頁面的截圖類似）。記錄每一塊的作用：
2. 下面，對于期望添加進站點的所有其他（通用內容以外的）內容展開頭腦風暴，直接羅列出來。
3. 下一步，試著對這些內容進行分組，這樣可以讓你了解哪些內容可以放在同一個頁面。這種做法和?卡片分類法?非常相似。
4. 接下來，試著繪制一個站點地圖的草圖，使用一個氣泡代表網站的一個頁面，并繪制連線來表示頁面間的一般工作流。主頁面一般置于中心，且鏈接到其他大多數頁面；小型網站的大多數頁面都可以從主頁的導航欄中鏈接跳轉。也可記錄下內容的顯示方式。

主動學習：創建站點地圖

自己創造一個網站（什么網站呢？）并嘗試執行上述步驟。

備注：?記得保存你的杰作，今后可能會用到哦。

小結

現在你應該對如何構建網頁/站點有了更好的理解。下一節我們將學習如何調試 HTML。

參見

• 使用 HTML 區段和大綱：HTML 語義元素和大綱算法進階指南。

文本格式進階

HTML 中有許多可以用于定義文本語義的其他元素，我們沒有在強調和重要性中提到它們。本文中所介紹的元素雖然少有人知，但仍然值得去學習（而且本文不是一份完整的列表）。在這里你將學習標記引用、描述列表、計算機代碼和其他相關文本、下標和上標、聯系信息等。?

引用

HTML 也有用于標記引用的特性，至于使用哪個元素標記，取決于你引用的是一塊還是一行。

塊引用

如果其他地方引用一個塊級內容（一個段落、多個段落、一個列表等），你應該把它用?<blockquote>?元素包裹起來表示，并且在?cite?屬性里用 URL 來指向引用的資源。例如，下面的示例代碼就是引用的 MDN 的?<blockquote>?元素頁面：

<p><strong>HTML <code>&lt;blockquote&gt;</code> 元素</strong>（或<em>HTML 塊級引用元素</em>）表示所附文本為擴展引用。
</p>

要把這些轉換為塊引用，我們要這樣做：

<p>這是塊引用：</p>
<blockquotecite="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/blockquote"><p><strong>HTML <code>&lt;blockquote&gt;</code> 元素</strong>（或<em>HTML 塊級引用元素</em>）表示所附文本為擴展引用。</p>
</blockquote>

瀏覽器的默認樣式會將其渲染為縮進的段落，以表明這是一個引用；引用上面的段落是為了證明這一點。

行內引用

除了使用?<q>?元素以外，行內元素用同樣的方式工作。例如，下面的標記包含了從 MDN?<q>?頁面的引用：

<p>引用元素 <code>&lt;q&gt;</code> 是<qcite="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/q">用于不需要段落分隔的短引用。</q>
</p>

瀏覽器默認將其作為普通文本放入引號內表示引用，就像下面：

引文

cite?屬性的內容聽起來很有用，但不幸的是，瀏覽器、屏幕閱讀器并沒有充分利用它。如果不使用 JavaScript 或 CSS 編寫自己的解決方案，就沒有辦法讓瀏覽器顯示?cite?的內容。如果你想在頁面上提供引文的來源，你需要在文本中通過鏈接或其他適當的方式來提供它。

這里有?<cite>?元素，但它是為了包含所引用資源的標題（如書名）。然而，你沒有理由不把?<cite>?內的文字以某種方式鏈接到引用源。

<p>根據<a href="/zh-CN/docs/Web/HTML/Element/blockquote"><cite>MDN 塊引用頁</cite></a>：
</p><blockquotecite="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/blockquote"><p><strong>HTML <code>&lt;blockquote&gt;</code> 元素</strong>（或<em>HTML 塊級引用元素</em>）表示所附文本為擴展引用。</p>
</blockquote><p>引用元素 <code>&lt;q&gt;</code> 是<q cite="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/q">用于不需要段落分隔的短引用。</q>——<a href="/zh-CN/docs/Web/HTML/Element/q"> <cite>MDN q 頁面</cite></a>
</p>

?引文默認的字體樣式為斜體。

縮略語

另一個你在 Web 上看到的相當常見的元素是?<abbr>——它常被用來包裹一個縮略語或縮寫，并且提供縮寫的解釋。當包括這兩種情況時，在第一次使用時提供純文本的完整擴展，同時用?<abbr>?來標記縮寫。這為用戶代理提供了如何公布/顯示內容的提示，同時告知所有用戶該縮寫的含義。

如果為縮寫提供擴展信息的意義不大，而且該縮寫或首字母縮寫是一個相當簡短的術語，則應提供該術語的完整擴展，作為?title?屬性的值：

縮略語示例

讓我們一起看一個示例。

<p>我們使用 <abbr>HTML</abbr> 超文本標記語言來組織網頁文檔。</p><p>第 33 屆<abbr title="夏季奧林匹克運動會">奧運會</abbr>已于 2024 年 7月在法國巴黎舉行。
</p>

?這些代碼的顯示效果如下：

備注：?在之前版本的 html 中還包含對另一個元素?<acronym>?的支持，但是它已經從 HTML 標準中移除，因為可以只使用?<abbr>?元素代表縮略語。不應再使用?<acronym>。?

標記聯系方式

HTML 有個用于標記聯系方式的元素——<address>。它僅僅包含聯系方式，例如：

<address>Chris Mills, Manchester, The Grim North, UK</address>

?其中可以包含更復雜的標記和其他形式的聯系方式，如：

<address><p>Chris Mills<br />Manchester<br />The Grim North<br />UK</p><ul><li>Tel: 01234 567 890</li><li>Email: me@grim-north.co.uk</li></ul>
</address>

?注意，如果鏈接的頁面包含了聯系信息，像下面這樣也是可以的：

<address>由 <a href="../authors/chris-mills/">Chris Mills</a> 編寫的頁面。
</address>

?備注：?<address>?元素只能用于提供最近的?<article>?或?<body>?元素所含文件的聯系信息。在一個網站的頁腳使用它來包括整個網站的聯系信息，或者在一篇文章里面使用它來包括作者的聯系信息，這都是正確的，但不能用來標記與該頁面內容無關的地址列表。

上標和下標

當你使用日期、化學方程式和數學方程式時會偶爾使用上標和下標，以確保它們的正確含義。<sup>?和?<sub>?元素可以解決這樣的問題。例如：

<p>我的生日是在 2021 年 5 月 25 日（譯者注：英文原文為 25<sup>th</sup>）</p>
<p>咖啡因的化學方程式是 C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>。
</p>
<p>如果 x<sup>2</sup> 的值為 9，那么 x 的值必為 3 或 -3。</p>

?這些代碼輸出的結果是：

展示計算機代碼

有大量的 HTML 元素可以來標記計算機代碼：

• <code>：用于標記計算機通用代碼。
• <pre>：用于保留空白字符（通常用于代碼塊）——如果文本中使用了縮進或多余的空白，瀏覽器將忽略它，你將不會在渲染的頁面上看到它。但是，如果你將文本包含在?<pre></pre>?標簽中，那么空白將會以與你在文本編輯器中看到的相同的方式渲染出來。
• <var>：用于標記具體變量名。
• <kbd>：用于標記輸入電腦的鍵盤（或其他類型）輸入。
• <samp>：用于標記計算機程序的輸出。

讓我們看看這些元素的示例以及它們如何被用來表示計算機代碼。如果你想要完整文件，可以看一下?other-semantics.html?這個示例文件。你可以下載文件并在瀏覽器打開查看，以下是代碼的一個片段：?

<pre><code>const para = document.querySelector('p');para.onclick = function() {alert('噢，噢，噢，別點我了。');
}</code></pre><p>請不要使用 <code>&lt;font&gt;</code> 、<code>&lt;center&gt;</code> 等表現元素。
</p><p>在上述的 JavaScript 示例中，<var>para</var> 表示一個段落元素。</p><p>按 <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd> 選擇全部內容。</p><pre>$ <kbd>ping mozilla.org</kbd>
<samp>PING mozilla.org (63.245.215.20): 56 data bytes
64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre>

?上面的代碼顯示效果如下：

標記時間和日期

HTML 還支持將時間和日期標記為可供機器識別的格式的?<time>?元素，例如：

<time datetime="2016-01-20">2016 年 1 月 20 日</time>

為什么需要這樣做？因為世界上有許多種書寫日期的格式，上邊的日期可能被寫成：

• 20 January 2016
• 20th January 2016
• Jan 20 2016
• 20/06/16
• 06/20/16
• The 20th of next month
• 20e Janvier 2016
• 2016 年 1 月 20 日
• 等等

但是這些不同的格式不容易被電腦識別——假如你想自動抓取頁面上所有事件的日期并將它們插入到日歷中，<time>?元素允許你附上清晰的、可被機器識別的時間或日期來實現這種需求。

上述基本的例子僅僅提供了一種簡單的可被機器識別的日期格式，這里還有許多其他支持的格式，例如：

<!-- 標準簡單日期 -->
<time datetime="2016-01-20">20 January 2016</time>
<!-- 只包含年份和月份-->
<time datetime="2016-01">January 2016</time>
<!-- 只包含月份和日期 -->
<time datetime="01-20">20 January</time>
<!-- 只包含時間，小時和分鐘數 -->
<time datetime="19:30">19:30</time>
<!-- 還可包含秒和毫秒 -->
<time datetime="19:30:01.856">19:30:01.856</time>
<!-- 日期和時間 -->
<time datetime="2016-01-20T19:30">7.30pm, 20 January 2016</time>
<!-- 含有時區偏移值的日期時間 -->
<time datetime="2016-01-20T19:30+01:00">7.30pm, 20 January 2016 is 8.30pm in France</time
>
<!-- 提及特定周 -->
<time datetime="2016-W04">The fourth week of 2016</time>

總結

到這里標志著對不太常見的 HTML 文本語義的學習告一段落。你在本課程中所看到的內容并不是 HTML 文本元素的完整列表——我們只是想涵蓋一些基本要素，以及一些你在實際中會較常見到的元素。接下來，我們將學習鏈接，這是網絡最重要的功能之一。

創建超鏈接?

超鏈接非常重要——它們使互聯網成為一個互聯的網絡。本文介紹了創建鏈接所需的語法，并討論了鏈接的最佳實踐。

什么是超鏈接？

備注：?URL 可以指向 HTML 文件、文件、圖像、文本文檔、視頻和音頻文件以及可以在網絡上保存的任何其他內容。如果瀏覽器不知道如何顯示或處理文件，它會詢問您是否要打開文件（需要選擇合適的本地應用來打開處理或文件）或下載文件（后續處理它）。?

以BBC的主頁為例，里面就包含了非常多的鏈接，分別連接到不同新聞、網站的其他地方（導航功能），或者登入/注冊頁面（用戶工具）等等。?

鏈接的解析

<p>我創建了一個指向<a href="https://www.mozilla.org/zh-CN/">Mozilla 主頁</a>的鏈接。
</p>

結果如下圖所示：

我創建了一個指向Mozilla 主頁的鏈接。

塊級鏈接

<a href="https://developer.mozilla.org/zh-CN/"><h1>MDN Web 文檔</h1>
</a>
<p>自從 2005 年起，就開始記載包括 CSS、HTML、JavaScript 等網絡技術。</p>

將標題轉化為鏈接：

圖片鏈接

<a href="https://developer.mozilla.org/zh-CN/"><img src="mdn_logo.svg" alt="MDN Web 文檔" />
</a>

這將 MDN 轉化為鏈接：

?備注：?您將在以后的文章中了解更多如何在網絡中使用圖片的信息。

使用標題屬性添加支持信息

<p>我創建了一個指向<ahref="https://www.mozilla.org/zh-CN/"title="了解 Mozilla 使命以及如何參與貢獻的最佳站點。">Mozilla 主頁</a>的超鏈接。
</p>

?結果如下（當鼠標光標懸停在鏈接上時，標題將作為提示信息出現）：

?備注：?鏈接的標題僅當鼠標暫停停止時才會顯示，這意味著使用鍵盤來導航網頁的人很難獲取標題信息。如果頁面的標題信息非常重要，您應該使用所有用戶都能方便獲取的方式來呈現，例如放在常規文本中。

統一資源定位符（URL）與路徑（path）快速入門

?

這個目錄結構的根目錄稱為creating-hyperlinks。當在本地處理網站時，你包含一個包含整個網站的目錄。在根目錄中，我們有index.html和contacts.html文件。在真實的網站上，index.html將成為我們的主頁或著陸頁（作為網站或特定網站部分的入口的網頁）。

我們的根目錄還有兩個目錄——pdfs并且projects，它們分別包含一個 PDF（project-brief.pdf）文件和一個index.html文件。請注意你可以在同一個項目中有兩個index.html文件，前提是它們在不同的文件系統目錄下。第二個index.html可能是項目相關信息的入門頁面。

• 指向當前目錄：如果你想在index.html（具體index.html）中包含一個指向contacts.html的超鏈接，你只需要指定想要鏈接到的文件名。因為它與當前文件是在同一個目錄的，所以你應該使用的URL是contacts.html：

  <p>要聯系某位工作人員，請訪問我們的<a href="contacts.html">聯系人頁面</a>。
  </p>
  

• 指向子目錄：如果你想在index.html（其實index.html）中包含一個指向projects/index.html的超鏈接，你需要先進入projects項目目錄，然后通過指定目錄的名稱，然后是正斜杠，然后是文件的名稱指明要鏈接到的文件index.html。因此你要使用的URL是projects/index.html：

  <p>請訪問我的<a href="projects/index.html">項目主頁</a>。</p>
  

• 指向上級目錄：如果你想在projects/index.html中包含一個指向pdfs/project-brief.pdf的超鏈接，你必須先返回上級目錄，然后再回到pdfs目錄。“返回上一個目錄級”使用兩個英文點號表示（..），因此你應該使用的網址是../pdfs/project-brief.pdf：

  <p>點擊打開<a href="../pdfs/project-brief.pdf">項目簡介</a>。</p>
  

分割文檔

<h2 id="Mailing_address">郵寄地址</h2>

為了鏈接到那個特定的id，則將其放在 URL 的末尾，并在前面包含井號（#），例如：

<p>要提供意見和建議，請將信件郵寄至<a href="contacts.html#Mailing_address">我們的地址</a>。
</p>

?你甚至可以在同一個文檔下，通過鏈接文檔片段，來鏈接到當前文檔的另一部分：

<p>本頁面底部可以找到<a href="#Mailing_address">公司郵寄地址</a>。</p>

絕對 URL 和相對 URL

鏈接最佳實踐

使用響亮的鏈接措辭

<p><a href="https://www.mozilla.org/zh-CN/firefox/">下載 Firefox </a></p>

?不好的鏈接文本：點擊這里下載 Firefox

其他提示：

• 不要把URL作為鏈接文本的一部分——URL看起來很丑，當屏幕閱讀器出現一個字母一個重復字母的讀出來的時候聽起來就更丑了。
• 不要在鏈接文本中說“鏈接”或“鏈接到”——它只是無用的內容。屏幕閱讀器告訴人們有一個鏈接。可視化基因知道有一個鏈接，因為鏈接通常是用不同的顏色設計的，并且存在下劃線（這個一般不應該被打破，因為用戶習慣了）。
• 保持你的鏈接標簽問題短——這非常重要，因為屏幕閱讀器需要解釋整個鏈接文本。
• 盡量減少相同文本的多個副本鏈接到不同位置的情況。如果存在標記為“單擊此處”、“單擊此處”、“單擊此處”這樣留下上下文的鏈接文本，很容易對使用屏幕閱讀器的用戶帶來問題。

鏈接到非 HTML 資源——留下清晰的指示

<p><a href="https://www.example.com/large-report.pdf">下載銷售報告（PDF，大小為 10 MB）</a>
</p><p><a href="https://www.example.com/video-stream/" target="_blank">觀看視頻（將在新標簽頁中播放，HD 畫質）</a>
</p>

在下載鏈接時使用下載屬性

<ahref="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=zh-CN"download="firefox-latest-64bit-installer.exe">下載最新的 Firefox 中文版 - Windows（64 位）
</a>

學習主動性：創建一個導航菜單

?備注：?如果您住了，或者不確定是否正確，可以訪問navigation-menu-marked-up目錄，來查看正確的答案。

電子郵件鏈接

<a href="mailto:nowhere@mozilla.org">向 nowhere 發郵件</a>

這會創建一個鏈接，看起來像這樣：向無處發郵件。

通常，電子郵件地址是可選的。如果您省略了它（實際上，您的href屬性只是簡單的“mailto:”），發送新的電子郵件的窗口也可能被用戶的郵件客戶端打開，只是沒有他們的地址信息，這通常在“分享”鏈接是很有用的，用戶可以選擇的發送地址郵件。

指定詳細信息

<ahref="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email">發送含有 cc、bcc、主題和主體的郵件
</a>

?備注：?每個字段的值必須使用 URL 編碼，即使用百分號轉義的非打印字符（不可見字符如制表符、換行符、分頁符）和空格。同時注意使用問號（?）來分隔主 URL 與參數值，以及使用 & 符來分隔mailto:URL 中的相關參數。這是標準的 URL 查詢標記方法。閱讀GET 方法以了解哪種 URL 查詢標記方法是更常用的。

這里還有一些其他的示例mailto鏈接：

• 郵箱：
• 郵箱：nowhere@mozilla.org
• 郵箱：nowhere@mozilla.org,nobody@mozilla.org
• mailto:nowhere@mozilla.org?cc=nobody@mozilla.org
• mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&subject=This%20is%20the%20subject

技能測試！

小結

HTML 中的圖片

最初，web 僅有文字，非常乏味。幸運的是，不久之后，我們就能在網頁中嵌入圖片和其他更有趣的內容類型了。盡管有多種多媒體類型需要考慮，但是從在網頁中嵌入簡單圖片的?<img>?元素開始更加合理。在這篇文章中，我們將詳細介紹如何使用?<img>?元素，包括它的基本屬性，如何用?<figure>?元素為它添加標題，它與?CSS?背景圖片的關系，以及其他 web 平臺上的圖形類型。

怎樣將圖片放到網頁上？

要想在網頁上放置簡單的圖像，我們需要使用?<img>?元素。這個元素是空元素（即無法包含任何子內容和結束標簽），它需要兩個屬性才能起作用：src?和?alt。src?屬性包含一個 URL，該 URL 指向要嵌入頁面的圖像。src?屬性可以是相對 URL 或絕對 URL，這與?<a>?元素的?href?屬性類似。如果沒有?src?屬性，img?元素就沒有圖像可加載。

'alt' 屬性的描述如下。

備注：?為了更容易理解下面的內容，建議你閱讀?URL 和路徑簡明入門來復習一下相對和絕對 URL 的概念。

例如，如果你的圖像叫做?dinosaur.jpg，并且它位于與 HTML 頁面相同的目錄中，你可以這樣嵌入圖像：?

<img src="dinosaur.jpg" alt="恐龍" />

?如果圖像在名為?images?的子目錄中，該子目錄位于與 HTML 頁面相同的目錄中，你可以這樣嵌入它：

<img src="images/dinosaur.jpg" alt="恐龍" />

以此類推。

備注：?搜索引擎還會讀取圖像文件名并將其計入 SEO。因此，你應該為圖像起一個描述性的文件名；dinosaur.jpg?比?img835.png?更好。

你也可以使用圖像的絕對 URL 進行嵌入，例如：?

<img src="https://www.example.com/images/dinosaur.jpg" alt="恐龍" />

?然而，不建議使用絕對 URL 進行鏈接。你需要托管你想要在網站上使用的圖像，在比較簡單的情況下，通常我們會把網站的圖像保存在與 HTML 相同的服務器上。此外，從維護的角度來說，使用相對 URL 比絕對 URL 更有效率（當你將網站遷移到不同的域名時，你不需要更新所有 URL，使其包含新域名）。在更高級的設置中，你可能會使用內容分發網絡（CDN）來傳遞圖像。

如果這些圖像并非由你創建，你應該查看它們發布的許可證條款，確保自己有使用它們的權限（有關更多信息，請參閱下面的媒體資源和許可證）。?

?無論是使用絕對 URL 還是相對 URL，上述代碼片段將會得到以下結果：

備注：?像?<img>?和?<video>?這樣的元素有時被稱為可替換元素（replaced elements）。這是因為元素的內容和大小由外部資源（如圖像或視頻文件）定義，而不是由元素本身的內容定義。你可以在可替換元素中了解更多相關信息。?

備注：?你也可以在?GitHub?倉庫中找到本節的完整示例（請參閱源代碼）。?

備選文本

我們接下來要看的屬性是?alt。它的值應該是圖片的文本描述，用于在圖片無法顯示或者因為網速慢而加載緩慢的情況下使用。例如，我們可以把上面的代碼修改成這樣：

<imgsrc="images/dinosaur.jpg"alt="The head and torso of a dinosaur skeleton;it has a large head with long sharp teeth" />

測試?alt?文本的最簡單方法是故意拼錯文件名。如果我們的圖片名字拼成?dinosooooor.jpg，瀏覽器就不會顯示圖片，而會顯示?alt?文本：

那么，為什么我們需要備選文本呢？它可以派上用場的地方有很多：

• 用戶有視力障礙，需要通過屏幕閱讀器來瀏覽網頁。事實上，圖片備選描述文本對大多數用戶都很有用。
• 就像上面所說的，你也許會把圖片的路徑或文件名拼錯。
• 瀏覽器不支持該圖片類型。某些用戶仍在使用純文本的瀏覽器，例如?Lynx，這些瀏覽器會把圖片替換為備選文本。
• 這些文字描述可以提供給搜索引擎使用，例如搜索引擎可能會將圖片的文字描述和查詢條件進行匹配。
• 用戶可能會關閉圖片顯示以減少數據的傳輸，這在手機上是十分普遍的，因為在一些國家帶寬有限且昂貴。

到底應該在?alt?里寫點什么呢？這首先取決于為什么這張圖片會在這兒，換句話說，如果這張圖片沒顯示出來，會少了什么：

• 裝飾：如果圖片僅用于裝飾，你應該使用?CSS 背景圖片，但如果必須使用 HTML，請添加空的?alt=""。如果圖片不是內容的一部分，那么屏幕閱讀器不應該浪費時間讀取它。
• 內容：如果你的圖片提供了重要的信息，就要在?alt?文本中簡要的提供相同的信息，甚至更近一步，把這些信息寫在主要的文本內容里，這樣所有人都能看見。不要寫冗余的備選文本（如果在主要文本中將所有的段落都重復兩遍，對于沒有失明的用戶來說多煩啊！），如果在主要文本中已經對圖片進行了充分的描述，寫?alt=""?就好。
• 鏈接：如果你把圖片嵌套在?<a>?標簽里，來把圖片變成鏈接，那你還必須提供無障礙的鏈接文本。在這種情況下，你可以寫在同一個?<a>?元素里，或者寫在圖片的?alt?屬性里，隨你喜歡。
• 文本：你不應該將文本放到圖像里。例如，如果你的主標題需要有陰影，你可以用 CSS?來達到這個目的，而不是把文本放到圖片里。如果真的必須這么做，那就把文本也放到?alt?里。

本質上，關鍵在于即使圖片無法被看見，也能提供可用的體驗，這確保了所有人都不會錯失某部分內容。嘗試在瀏覽器中使圖片不可見然后看看網頁變成什么樣了，你會很快意識到在圖片無法顯示時備選文本能幫上多大忙。?

備注：?如需了解更多信息，請參閱我們的替代文本指南。?

寬度和高度

你可以用?width?和?height?屬性來指定你的圖片的寬度和高度。它們的值是不帶單位的整數，以像素為單位表示圖像的寬度和高度。

你可以用多種方式了解你的圖片的寬度和高度，例如在 Mac 上，你可以用?Cmd?+?I?來得到顯示的圖片文件的信息。回到我們的例子，你可以這樣做：

<imgsrc="images/dinosaur.jpg"alt="The head and torso of a dinosaur skeleton;it has a large head with long sharp teeth"width="400"height="341" />

這樣做有一個好處。你頁面的 HTML 和圖片是分開的資源，由瀏覽器用相互獨立的 HTTP(S) 請求來獲取。一旦瀏覽器接收到 HTML，它就會開始將其顯示給用戶。如果圖片尚未接收到（通常會是這種情況，因為圖片文件的大小通常比 HTML 文件大得多），那么瀏覽器將只渲染 HTML，并在圖片接收到后立即更新頁面。

例如，假設在圖片之后有一些文本：

<h1>Images in HTML</h1><imgsrc="dinosaur.jpg"alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"title="A T-Rex on display in the Manchester University Museum" />
<blockquote><p>But down there it would be dark now, and not the lovely lighted aquarium sheimagined it to be during the daylight hours, eddying with schools of tiny,delicate animals floating and dancing slowly to their own serene currentsand creating the look of a living painting. That was wrong, in any case. Theocean was different from an aquarium, which was an artificial environment.The ocean was a world. And a world is not art. Dorothy thought about theliving things that moved in that world: large, ruthless and hungry. Like usup here.</p><footer>- Rachel Ingalls, <cite>Mrs. Caliban</cite></footer>
</blockquote>

一旦瀏覽器下載了 HTML，它就開始顯示頁面。

當圖片加載完成時，瀏覽器會將圖片添加到頁面中。由于圖片占據空間，瀏覽器必須將文本向下移動，以適應圖片的位置：

這樣移動文本對用戶來說非常分散注意力，尤其是如果他們已經開始閱讀文本的情況下。

如果你在 HTML 中使用?width?和?height?屬性來指定圖片的實際大小，那么在下載圖片之前，瀏覽器就知道需要為其留出多少空間。

這樣的話，當圖片下載完成時，瀏覽器不需要移動周圍的內容。

?設置圖像的高度和寬度再次變得重要是關于該特性的歷史的一篇優秀文章。

備注：?雖然如我們所說，使用 HTML 屬性來指定圖片的實際大小是一個好的實踐，但你不應該使用它們來調整圖片的大小。

如果設置的圖片大小過大，你的圖片將看起來粗糙、模糊或太小，不僅浪費帶寬而且圖片還不符合用戶需求。如果長寬比不正確，圖片也可能會變形。在將圖片放到網頁上之前，你應使用圖像編輯器將其設置為正確的大小。

如果確實需要更改圖片的大小，應該使用?CSS?來實現。

圖像標題

類似于超鏈接，你可以通過給圖片增加?title?屬性來提供更多的信息。在我們的例子中，可以這樣做：

<imgsrc="images/dinosaur.jpg"alt="The head and torso of a dinosaur skeleton;it has a large head with long sharp teeth"width="400"height="341"title="A T-Rex on display in the Manchester University Museum" />

這會給我們一個鼠標懸停提示，和鏈接標題一樣：

然而，我們并不推薦它——title?有很多無障礙問題，這些問題主要是基于這樣一個事實，即屏幕閱讀器的支持并不完善，除此之外大多數瀏覽器都不會顯示它，除非你將鼠標懸停在上面（例如：無法使用鍵盤的用戶），如果你對更多的信息感興趣，請閱讀 Scott O'Hara 寫的?title 屬性的考驗與磨難。

更好的做法是將這樣的支持信息包含在主要文章文本中，而不是附加在圖片上。

媒體資源和許可

你在網絡上找到的圖像（以及其他媒體資源類型）都以不同的許可類型發布。在你構建的網站上使用圖像之前，請確保你擁有該圖像的所有權、獲得使用許可或遵守所有者的許可條件。

了解許可類型

讓我們來看看你在網絡上可能會遇到的一些常見許可類別。

版權所有

原創作品（例如歌曲、書籍或軟件），其所有者通常以封閉的版權保護方式發布他們的作品。這意味著，默認情況下，他們（或他們的出版商）擁有獨家使用（例如展示或分發）其作品的權利。如果你想使用帶有版權所有許可的受版權保護的圖像，你需要執行以下操作之一：

• 從版權持有人獲得明確的書面許可。
• 支付許可費用以使用它們。這可以是一次性費用，用于無限制使用（“免版稅”），或者可能是“按照時間段、地理區域、行業或媒體類型等特定費用”的“權利管理”方式。
• 僅將使用限制在你所在司法轄區中被視為合理使用或合理交易的用途。

作者不必在其作品中包含版權聲明或許可條款。一旦原創作品在有形媒介上創建出來，版權就會自動存在。因此，如果你在網上找到一張圖像，沒有版權聲明或許可條款，最安全的做法是假定它受到版權保護，所有權保留。

自由許可

如果圖像是根據自由許可發布的，例如?MIT、BSD?或適當的知識共享（CC）許可，你無需支付許可費用或尋求許可即可使用它。但是，你仍需履行各種許可條件，這些條件因許可而異。

例如，你可能需要：

• 提供指向圖像原始來源的鏈接，并標明創作者。
• 指示是否對其進行了任何更改。
• 使用相同許可證分享使用該圖像創建的任何派生作品。
• 不分享任何派生作品。
• 不將該圖像用于任何商業作品。
• 在使用該圖像的任何發布中包含許可證的副本。

你應該查閱適用的許可證以了解你需要遵循的具體條款。

?備注：?你可能會在自由許可的上下文中遇到“copyleft”一詞。Copyleft 許可（例如?GNU 通用公共許可證（GPL）?或“相同方式共享”創作共用許可證）規定派生作品需要按照原始許可證發布。

Copyleft 許可在軟件界中很常見。其基本思想是使用 copyleft 許可的代碼構建的新項目（這被稱為原始軟件的“分支”）也需要根據相同的 copyleft 許可進行許可。這確保新項目的源代碼也可供他人學習和修改。請注意，一般來說，為軟件起草的許可證（例如 GPL）并不適合非軟件作品，因為它們并不考慮非軟件作品。

請查閱本節提供的鏈接，了解不同許可類型及其規定的條件。

公共領域/CC0

進入公共領域的作品有時被稱為“無版權保留”——它們不受版權保護，可以在未經許可且無需履行任何許可條件的情況下使用。作品可以因為版權到期或特定放棄權利等方式進入公共領域。

將作品置于公共領域的最有效方法之一是將其許可為?CC0，這是一種特定的創作共用許可，為此目的提供了清晰明確的法律工具。

在使用公共領域圖像時，請獲取證明該圖像屬于公共領域的證據，并將該證據保存記錄。例如，使用截圖記錄原始來源（該來源需要清晰顯示許可狀態），并考慮在你的網站上添加一個頁面，列出所獲得的圖像及其許可要求。

搜索適用于自由許可的圖像

你可以使用圖像搜索引擎或直接從圖像存儲庫中找到適用于你的項目的自由許可圖像。

使用圖像描述以及相關的許可條款搜索圖像。例如，當搜索“黃色恐龍”時，可以添加“公共領域圖像”、“公共領域圖像庫”、“開放許可圖像”或類似的詞語到搜索查詢中。

某些搜索引擎會提供工具，幫助你查找具有自由許可的圖像。例如，使用 Google 時，轉到“圖片”選項卡搜索圖像，然后單擊“工具”。在結果工具欄中有一個“使用權限”下拉菜單，你可以選擇專門搜索根據創作共用許可授權的圖像。

圖像存儲庫網站，例如?Flickr、ShutterStock?和?Pixabay，具有搜索選項，允許你僅搜索具有自由許可的圖像。一些網站專門分發具有自由許可的圖像和圖標，例如?Picryl?和?The Noun Project。

要想遵守圖像發布的許可條件，你需要找到許可詳細信息，閱讀來源提供的許可證或指示頁面，然后按照這些說明操作。值得信賴的圖像存儲庫會清楚地列出其許可條件，并且易于查找。

通過為圖片搭配說明文字的方式來解說圖片

說到說明文字，有很多種方法可以添加一段說明文字來搭配圖片。比如，你可以這么做：

<div class="figure"><imgsrc="images/dinosaur.jpg"alt="The head and torso of a dinosaur skeleton;it has a large head with long sharp teeth"width="400"height="341" /><p>A T-Rex on display in the Manchester University Museum.</p>
</div>

這沒有問題，它包含了你需要的內容，并且很方便使用 CSS 調整樣式。但是這里有一個問題，從語義的角度上來講，圖片和說明文字并沒有什么聯系，這會給使用屏幕閱讀器的人造成麻煩，比如如果有 50 張圖片和其搭配的 50 段說明文字，那么哪段說明文字是和哪張圖片有關聯的呢？

更好的做法是使用 HTML 的?<figure>?和?<figcaption>?元素，它正是為此而被創造出來的：為圖片提供一個語義容器，在說明文字和圖片之間建立清晰的關聯。我們之前的例子可以重寫為：

<figure><imgsrc="images/dinosaur.jpg"alt="The head and torso of a dinosaur skeleton;it has a large head with long sharp teeth"width="400"height="341" /><figcaption>A T-Rex on display in the Manchester University Museum.</figcaption>
</figure>

?<figcaption>?元素告訴瀏覽器和輔助技術工具，這段說明文字描述了?<figure>?元素的內容。

備注：?從無障礙的角度來說，說明文字和?alt?文本扮演著不同的角色。看得見圖片的人們同樣可以受益于說明文字，而?alt?文字只有在圖片無法顯示時才會發揮作用。所以，說明文字和?alt?的內容不應該一樣，因為當圖片無法顯示時，它們會同時出現。嘗試不讓你的圖片顯示，看看效果如何。?

figure 里不一定要是圖片，只要是這樣的獨立內容單元即可：

• 用簡潔、易懂的方式表達意圖。
• 可以置于頁面線性流的某處。
• 為主要內容提供重要的補充說明。

figure 可以是幾張圖片、一段代碼、音視頻、方程、表格或類似的東西。

CSS 背景圖片

你也可以使用 CSS 把圖片嵌入網站中（JavaScript 也行，不過那是另外一回事了）。CSS 屬性?background-image?和其他的?background-*?屬性是用來控制背景圖片的。比如，要想為頁面中的每個段落設置一個背景圖片，你可以這樣做：

p {background-image: url("images/dinosaur.jpg");
}

按理說，這種做法相對于 HTML 中插入圖片的做法，可以更好地控制圖片和設置圖片的位置，那么為什么我們還要使用 HTML 圖片呢？如上所述，CSS 背景圖片只是為了裝飾——如果你只是想要在你的頁面上添加一些漂亮的東西，來提升視覺效果，那 CSS 的做法是可以的。但是這樣插入的圖片完全沒有語義上的意義，它們不能有任何備選文本，也不能被屏幕閱讀器識別，等等。這就是 HTML 圖片有用的地方了。

總而言之，如果圖像對你的內容有意義，則應使用 HTML 圖像。如果圖像純粹是裝飾，則應使用 CSS 背景圖片。

備注：?你可以在?CSS?模塊里學到更多關于?CSS 背景圖片的知識。?

網頁上的其他圖形

我們已經了解到可以使用?<img>?元素顯示靜態圖像，或者通過使用?background-image?屬性來設置 HTML 元素的背景。你還可以動態生成圖形，或在生成后對圖像進行操作。瀏覽器提供了使用代碼創建 2D 和 3D 圖形的方法，以及包含來自上傳文件或用戶攝像頭實時流的視頻。以下是有關這些更高級圖像主題的文章鏈接：

Canvas

<canvas>?元素提供了使用 JavaScript 繪制 2D 圖形的 API。

SVG

你可以借助可縮放矢量圖形（SVG）來使用線條、曲線和其他幾何形狀來渲染 2D 圖形。借助矢量圖形，你可以創建能夠以任意尺寸清晰縮放的圖像。

WebGL

WebGL API 指南將幫助你入門 WebGL，這是用于 Web 的 3D 圖形 API，可讓你在 Web 內容中使用標準的 OpenGL ES。

使用 HTML 音頻和視頻

與?<img>?類似，你可以使用 HTML 將?<video>?和?<audio>?嵌入到網頁中，并控制其播放。

WebRTC

WebRTC 中的 RTC 代表實時通信（Real-Time Communications），這是一種可以在瀏覽器客戶端（對等方）之間進行音頻/視頻流和數據共享的技術。

技能測試！

你已經閱讀完本文，但你能記住重要的信息嗎？在繼續之前，你可以進行一些進一步的測試，以驗證你是否掌握了這些信息。請參閱技能測試：HTML 圖像。

總結

到此為止，我們已經詳細介紹了圖片和說明文字，在下篇文章中，我們將進一步看看如何使用 HTML 在網頁上嵌入音頻和視頻。

視頻和音頻內容?

現在我們已經可以輕松地為網頁添加簡單的圖像，下一步我們開始為 HTML 文檔添加音頻和視頻播放器。在這篇文章中，我們會使用?<video>?和?<audio>?元素來完成這件事；然后我們還會了解如何為視頻添加標題/字幕。?

web 中的音頻和視頻

最早的在線視頻和音頻的流行得益于專有的基于插件的技術，如?Flash?和?Silverlight。這兩種技術存在安全性和無障礙問題，現已過時，取而代之的是原生的 HTML 解決方案，該解決方案包括?<video>?和?<audio>?元素以及用于控制它們的?JavaScript?API。在這里，我們不討論有關 JavaScript 的問題，僅僅講解有關 HTML 的基礎。

我們不會教你如何制作音頻和視頻，因為那需要完全不同的技術。如果你沒有音頻和視頻的話，也沒有關系，我們為你提供了示例音頻和視頻文件以及示例代碼供你實驗。

備注：?在開始之前，你應當了解一些在線視頻提供商，例如?YouTube、Dailymotion、Vimeo?還有?Bilibili，以及在線音頻提供商，例如?Soundcloud。這些公司可以讓你以方便、簡單的方式來托管和消費視頻，所以你不必擔心龐大的帶寬消耗。在線視頻提供商甚至提供現成的代碼用于為你的 web 網頁嵌入視頻/音頻。如果你使用這樣的服務，你便可以避免在這篇文章中我們討論的一些難題。在下一篇文章中，我們將會再討論這樣的服務。?

<video> 元素

你可以借助?<video>?元素來輕松地嵌入視頻。一個簡單的例子如下：

<video src="rabbit320.webm" controls><p>你的瀏覽器不支持 HTML 視頻。可點擊<a href="rabbit320.mp4">此鏈接</a>觀看。</p>
</video>

值得注意的特性有：

src

同?<img>?元素的使用方式相同，src（來源）屬性指向你想要嵌入到網頁中的視頻資源，它們的運作方式完全相同。

controls

用戶應當能夠控制視頻和音頻的播放（這對于患有癲癇的人來說尤為重要）。你必須使用?controls?屬性來讓視頻或音頻包含瀏覽器自帶的控制界面，或者使用適當的?JavaScript API?構建自己的界面。至少，界面必須包括啟動和停止媒體以及調整音量的方法。

<video>?元素內的段落

這個叫做后備內容，當瀏覽器不支持?<video>?元素的時候，就會顯示這段內容，借此我們能夠對舊的瀏覽器提供回退。你可以添加任何后備內容，在這個例子中我們提供了一個指向這個視頻文件的鏈接，從而使用戶至少可以訪問到這個文件，而不會局限于瀏覽器的支持。

已嵌入視頻文件的網頁樣式如下：

你可以嘗試實時示例，或者查看源代碼。

使用多個播放源以提高兼容性

以上的例子中有一個問題，那就是不同瀏覽器對視頻/音頻格式的支持程度不一樣，導致你可能無法播放某些視頻/音頻。幸運的是，你有辦法防止這個問題發生。

媒體文件的內容

我們先來快速的了解一下相關術語。像 MP3、MP4 還有 WebM 這些格式叫做容器格式。他們定義了構成媒體文件的音頻軌道和視頻軌道的儲存結構，其中還包含描述這個媒體文件的元數據，以及使用什么編解碼器對其通道進行編碼等等。

一個包含電影的 WebM 文件，其主要包括一個主視頻軌道和一個備用視角軌道，以及相應的英語和西班牙語音軌，還有英語解說音軌，如下圖所示。文件還包括用于電影的閉路字幕文本軌道、西班牙語字幕以及解說的英文字幕。

容器中的音頻和視頻軌道存儲著按照相應編解碼器格式編碼的數據。音頻軌道使用不同于視頻軌道的格式進行編碼。每條音頻軌道都采用音頻編解碼器編碼，而視頻軌道則使用（你可能已經猜到了）視頻編解碼器編碼。我們之前提到過，不同瀏覽器支持不同的視頻和音頻格式，以及不同的容器格式，如 MP3、MP4 和 WebM，這些容器可以包含不同類型的視頻和音頻。

例如：

• WebM 容器通常包括了 Vorbis 或 Opus 音頻和 VP8/VP9 視頻。這在所有的現代瀏覽器中都支持，除了某些老版本瀏覽器。
• MP4 容器通常包括 AAC 或 MP3 音頻和 H.264 視頻。這在所有的現代瀏覽器中都支持。
• Ogg 容器傾向于使用 Vorbis 音頻和 Theora 視頻。其在 Firefox 和 Chrome 當中受到完美的支持，不過這個容器已經被更強大的 WebM 格式所取代。

有一些特殊情況。例如，對于某些類型的音頻，通常編解碼器的數據存儲沒有容器或簡化容器。其中一個例子就是 FLAC 編解碼器，它通常存儲在 FLAC 文件中，FLAC 文件只是 FLAC 的原始軌跡。

另一種情況是一直流行的 MP3 文件。“MP3 文件”實際上是存儲在 MPEG 或 MPEG-2 容器中的 MPEG-1 音頻層 III（MPEG-1 Audio Layer III，MP3）音頻軌道。這一點特別有趣，因為盡管大多數瀏覽器不支持在?<video>?和?<audio>?元素中使用 MPEG 媒體，但由于 MP3 的流行，它們可能仍然支持 MP3。

音頻播放器傾向于直接播放音軌，例如 MP3 和 Ogg 文件。它們不需要容器。

瀏覽器所支持的媒體文件

備注：?一些流行的格式，如 MP3 和 MP4/H.264，盡管非常出色，但它們受到專利的限制；也就是說，有一些專利涵蓋了它們所基于的某些或全部技術。在美國，MP3 直到 2017 年都受到專利保護，而 H.264 至少到 2027 年仍受專利保護。

由于這些專利，瀏覽器如果希望實現對這些編解碼器的支持，通常必須支付巨額的許可費用。此外，一些人更傾向于避免使用受限制的軟件，而只使用開放格式。由于這些法律和偏好原因，web 開發者往往不得不支持多種格式以滿足他們的整個用戶群。

剛剛所說的編解碼器主要用于將音頻和視頻壓縮成可管理的文件（原始的音頻和視頻文件非常大）。瀏覽器支持多種編解碼器，如 Vorbis 和 H.264，它們用于已壓縮的音視頻與二進制數據的相互轉換。不同的編解碼器和不同的容器都有各自的優缺點，這會影響你做出選擇。

由于每種瀏覽器支持的容器文件格式和編解碼器都有所不同，情況變得更加復雜。為了盡可能確保你的網站或應用能在用戶的瀏覽器上正常工作，你可能需要提供多種格式的媒體文件。如果你的網站沒有提供任何用戶的瀏覽器支持的格式，那么你的媒體內容將無法播放。

由于確保你的應用程序中的媒體內容能在你想要覆蓋的每一種瀏覽器、平臺和設備上都正常顯示有些復雜，因此選擇最合適的編解碼器和容器組合可能會是一項挑戰。為了選擇最適合你需求的容器文件格式，請參考選擇正確的容器；要為你的內容和目標受眾選擇合適的媒體編解碼器，請參考選擇視頻編解碼器以及選擇音頻編解碼器。

當然，這里有一點需要注意：移動瀏覽器和桌面瀏覽器對格式的支持可能不一樣。此外，桌面和移動瀏覽器都可能外包媒體播放處理（可能是全部媒體也可能是僅僅是那些它無法內部處理的特定類型）。因此，媒體支持在一定程度上依賴于用戶安裝了哪些軟件。

我們該怎么做呢？請請看如下更新后的例子（也可以在這里體驗）：

<video controls><source src="rabbit320.mp4" type="video/mp4" /><source src="rabbit320.webm" type="video/webm" /><p>你的瀏覽器不支持此視頻。可點擊<a href="rabbit320.mp4">此鏈接</a>觀看</p>
</video>

在這里我們將?src?屬性從?<video>?元素中移除，轉而將它放在幾個單獨的?<source>?元素當中，這些元素分別指向各自的資源。在本例當中，瀏覽器會檢查?<source>?元素，并且播放第一個與其自身 codec 相匹配的媒體。WebM 和 MP4 這兩種格式在目前已經足夠，只要視頻支持這兩種格式，那么其在大多數平臺和瀏覽器上都能正確播放。

每個?<source>?元素都含有?type?屬性，這個屬性是可選的，但是建議你添加這個屬性——它包含了?<source>?指定的?MIME 類型，同時瀏覽器也會通過檢查這個屬性來迅速的跳過那些不支持的格式。如果你沒有添加?type?屬性，瀏覽器會嘗試加載每一個文件，直到找到一個能正確播放的格式，但是這樣會消耗掉大量的時間和資源。

請參考我們的媒體類型和格式指南，以選擇最適合你的需求的容器和編解碼器，同時查找合適的 MIME 類型以指定每種媒體類型。

其他 <video> 特性

有許多你可以用在 HTML 視頻上的特性，請看我們的下一個例子：

<videocontrolswidth="400"height="400"autoplayloopmutedpreload="auto"poster="poster.png"><source src="rabbit320.mp4" type="video/mp4" /><source src="rabbit320.webm" type="video/webm" /><p>你的瀏覽器不支持此視頻。可點擊<a href="rabbit320.mp4">此鏈接</a>觀看</p>
</video>

這串代碼將會給我們呈現出如下用戶界面：

特性包括：

width?和?height

你可以用屬性控制視頻的尺寸，也可以用?CSS?來控制視頻尺寸。無論使用哪種方式，視頻都會保持它原始的長寬比——也叫做縱橫比。如果你設置的尺寸沒有保持視頻原始長寬比，那么視頻邊框將會拉伸，而未被視頻內容填充的部分，將會顯示默認的背景顏色。

autoplay

這個屬性會使音頻和視頻內容立即播放，即使頁面的其他部分還沒有加載完全。建議不要在你的網站上自動播放視頻（或音頻），因為用戶可能會反感。

loop

這個屬性可以讓視頻（或者音頻）文件在結束時再次開始播放。這個也可能很惱人，同樣不建議使用，除非有必要。

muted

這個屬性會導致媒體播放時，默認關閉聲音。

poster

這個屬性指向了一個圖像的 URL，這個圖像會在視頻播放前顯示。通常用于粗略的預覽或者廣告。

preload

這個屬性被用來緩沖較大的文件，有三個值可選：

• "none"：不緩沖文件
• "auto"：頁面加載后緩存媒體文件
• "metadata"：僅緩沖文件的元數據

你可以在 GitHub 體驗以上的例子，也可以查看源代碼。注意我們在體驗的版本中并沒有使用?autoplay?屬性——如果頁面一加載就開始播放視頻的話，就不會看到封面（poster）了。

<audio> 元素

<audio>?元素與?<video>?元素的使用方式幾乎完全相同，只有一些細微的差別，比如下面的邊框不同，一個典型的例子如下：

<audio controls><source src="viper.mp3" type="audio/mp3" /><source src="viper.ogg" type="audio/ogg" /><p>你的瀏覽器不支持該音頻，可點擊<a href="viper.mp3">此鏈接</a>收聽。</p>
</audio>

這串代碼將會產生如下的效果：

備注：?你可以在 GitHub?運行音頻示例（也可以查看音頻播放器源代碼）。?

因為音頻播放器沒有視覺部件，它所占用的空間比視頻播放器要小（你只需要顯示出能控制音頻播放的控件）。其他一些 HTML?<audio>?與?<video>?的差異如下：

• <audio>?元素不支持?width/heigth?屬性——由于其并沒有視覺部件，也就沒有內容要設置?width/height。
• 它同時也不支持?poster?屬性——同樣，因為沒有視覺部件。

除此之外，<audio>?元素支持所有?<video>?元素的特性——你可以回顧上面的章節來了解更多的有關信息。

顯示視頻文本

現在，我們將討論一個略微先進的概念，這個概念將會十分的有用。許多人不想（或者不能）聽到 Web 上的音頻/視頻內容，至少在某些情況下是這樣的，比如：

• 許多人患有聽覺障礙（通常來說是很難聽清聲音的人，或者聾人），他們不能聽見音頻中的聲音。
• 還有一些人無法聽音頻，因為他們在一個非常嘈雜的環境當中（比如在擁擠的酒吧內恰好趕上了球賽）。
• 在某些環境下播放音頻會分散注意力或造成干擾（比如在圖書館或伴侶正在休息時），這種情況下，擁有字幕就顯得非常實用了。
• 有一些人他們不會說視頻當中的語言，因此他們需要文字記錄或者是翻譯來幫助他們理解媒體內容。

為這些人提供音頻/視頻中話語的文字記錄，將會對他們有很大的幫助。幸運的是，借助 HTML 視頻，我們可以做到這一點。我們只需使用?WebVTT?文件格式和?<track>?元素即可。

?備注：?“轉錄（transcribe）”是指將視頻/音頻中說的話記錄成文字形式，轉錄的結果稱為“文字記錄（transcript）”。

?WebVTT 是一個格式，用來編寫文本文件，這個文本文件包含了眾多的字符串，這些字符串會帶有一些元數據，它們可以用來描述這個字符串將會在視頻中顯示的時間，甚至可以用來描述這些字符串的樣式以及定位信息（盡管有限制）。這些字符串叫做?cue?，你可以根據不同的需求來顯示不同類型的 cue，最常見的如下：

subtitles

外語材料的翻譯字幕，來幫助那些聽不懂音頻中說的什么的人理解音頻當中的內容。

captions

同步翻譯對白，或是描述一些有重要信息的聲音，來幫助那些不能聽音頻的人理解音頻中的內容。

定時描述

由媒體播放器朗讀的文本，其向盲人或其他視力受損用戶描述重要的視覺內容。

一個典型的 WebVTT 文件如下：

要讓其與 HTML 媒體一起顯示，你需要做如下工作：

1. 將其保存為?.vtt?文件，放在服務器可以提供服務的地方（見下文），例如和 HTML 文件放在同一文件夾。
2. 用?<track>?標簽鏈接?.vtt?文件，<track>?標簽需放在?<audio>?或?<video>?標簽當中，同時需要放在所有?<source>?標簽之后。使用?kind?屬性來指明是?subtitles、captions?還是?descriptions。然后，使用?srclang?來告訴瀏覽器你是用什么語言來編寫的 subtitles。最后，添加?label，以幫助讀者在查找時識別語言。

如下是例子：?

<video controls><source src="example.mp4" type="video/mp4" /><source src="example.webm" type="video/webm" /><track kind="subtitles" src="subtitles_es.vtt" srclang="es" label="Spanish" />
</video>

?為了嘗試這種方法，需要在本地 HTTP 服務器上托管文件。在瀏覽器的輸出中，會看到一個顯示字幕的視頻，有點像這樣：

?更多細節，包括如何添加標簽，請閱讀為 HTML 視頻添加標題和字幕。在 Github 上可以找到與本文相關的樣例，它們由 Ian Devlin 編寫（或者查看源代碼）。這個樣例使用了 JavaScript 代碼，用戶借此可以選擇不同的字幕。注意，若想要顯示字幕，你需要點擊“CC”按鈕，并且選擇某個選項（English、Deutsch 或 Espa?ol）。

備注：?文本軌道還可以幫助你進行?SEO，因為搜索引擎對文字特別感興趣。搜索引擎甚至可以借助文本軌道直接鏈接到視頻中的某個位置。?

主動練習：嵌入你自己的視頻與音頻

在這個實踐學習當中，我們希望你能夠走出去，并且記錄一些你自己的視頻和音頻——如今，大多數手機都能夠非常方便的記錄視頻和音頻，并且如果你可以將它上傳到你的電腦上面，你可以使用它。你可能需要做一些格式轉換，如果是視頻的話，你需要將它們轉化為 WebM 或者 MP4，如果是音頻的話，你需要將它們轉化為 MP3 或者 Ogg。不過你并不需要擔心，有許多的程序都能夠幫你輕松解決這些問題，例如?Miro 視頻轉換器和?Audacity。我們非常希望你能夠親自動手。

如果你無法取得任何的音頻或者視頻，你可以使用我們為你提供的示例音頻和視頻文件?來練習。同時你也可以使用我們的代碼來作為參考。

我們希望你能夠：

1. 將你的音頻和視頻文件保存在你電腦上的一個新目錄中。
2. 在相同的路徑下，創建一個新的 HTML 文件，命名為?index.html。
3. 在頁面上添加?<audio>?和?<video>?元素；讓它們顯示瀏覽器默認的控件。
4. 在當中添加?<source>?標簽，并添加?type?屬性，以便于瀏覽器能夠找到其能夠支持的格式并加載它。
5. 在?<video>?元素中添加?poster?屬性，這會在視頻播放之前顯示。盡情創作屬于自己的海報圖形吧。

另外，你可以嘗試研究一下文本音軌，試著為你的視頻添加一些字幕。

技能測試！

你已經完成了這篇教程的學習，但你是否還記得教程里最重要的內容呢？在繼續之前，你可以通過一些測試來驗證你是否已經掌握了這些內容，請參見技能測試：內嵌多媒體。需要注意，這個測試中的第三個問題可能會需要一些之后講到的技術，所以我們建議你嘗試之前閱讀一下下一篇教程。

總結

我們祝愿你可以沉浸在 Web 網站的音頻和視頻當中，下一篇文章，我們將會學習到另外一種在 web 頁面中嵌入內容的方法，比如使用?<iframe>?或者?<object>。

參見

• HTML 媒體元素：<audio>、<video>、<source>?和?<track>
• 向視頻添加字幕和標題
• 音頻和視頻傳送：使用 HTML 和 JavaScript 在網頁上放置音頻和視頻的詳細信息。
• 音頻和視頻操作：使用 JavaScript 對音頻和視頻進行詳細操作的指南（例如添加濾鏡）。
• Web 媒體技術
• web 上的媒體類型和格式指南
• 事件參考 > 媒體

HTML 表格基礎

本文將從 HTML 表格開始，介紹一些基本的內容，如行和單元格、標題、使單元格跨越多個列和行，以及如何將列中的所有單元組合在一起進行樣式化。

什么是表格？

表格是由行和列（表格數據）組成的結構化數據集，它讓你快速簡單地查找某個表示不同類型數據之間的某種關系的值。比如說，某個人和他的年齡，一天或是一周，當地游泳池的時間表。

?表格在人類社會中很常見，而且已經存在很長時間了，下面這張 1800 年的美國人口普查文件中就可以證明：

?因此，HTML 的創建者們提供了一種方法來構建和呈現 web 上的表格數據，這也就不足為奇了。

表格如何工作？

表格的一個特點就是固定不變。通過在行標題和列標題之間建立視覺關聯，信息可以容易地被解讀。例如，請看下表，找到一個擁有 62 顆衛星的類木氣態巨行星。可以通過關聯相關行標題和列標題找到答案。

?

正確使用時，HTML 表格可以很好地通過屏幕閱讀器等輔助工具進行處理，因此一個成功的 HTML 表格應該能為視力正常和視力受損的用戶帶來更好的體驗。

表格風格

可以在 GitHub 上查看這個在線示例！你會注意到，這里的表格看起來可讀性更好，這是因為你在本頁上面看到的表格只使用了最少的樣式，而 GitHub 版本則使用了更多的 CSS。

不要幻想；為了能夠讓表格在 web 上有效，你需要用 CSS 提供一些樣式信息，以及盡可能好的 HTML 固定結構。在本模塊中，我們將專注于 HTML 部分；在你完成這里的內容之后，你可以瀏覽樣式化表格來了解 CSS 的部分。

雖然在本模塊中我們不會專注于 CSS，但是我們提供了一個較小的 CSS 樣式表讓你使用，和默認的沒有采用任何 CSS 樣式的表相比，表格會更加可讀。你可以在這里獲取樣式表，還可以找到一個應用樣式表的?HTML 模板，它們將為你提供一個嘗試使用 HTML 表格的良好起點。

什么時候你不應該使用 HTML 表格？

HTML 表格應該用于表格數據，這正是 HTML 表格設計出來的用途。不幸的是，許多人習慣用 HTML 表格來實現網頁布局，例如：一行包含頭部，一行包含幾列內容，一行包含尾部。你可以在我們的無障礙學習模塊中的頁面布局章節獲得更多細節內容和一個示例。這種做法以前是很常見的，因為以前 CSS 在不同瀏覽器上的兼容性比較糟糕；表格布局現在不太普遍，但你可能仍然會在網絡的某些角落看到它們。

簡單來說，使用表格布局而不使用?CSS 布局技巧是很糟糕的。主要的理由有以下幾個：

1. 表格布局減少了視覺受損的用戶的無障礙: 盲人所使用的屏幕閱讀器會解析存在于 HTML 頁面上的標簽，然后為用戶讀出其中的內容。因為對于布局來說，表格不是一個正確的工具，使用的標記比使用 CSS 布局技術更復雜，所以屏幕閱讀器的輸出會讓他們的用戶感到困惑。
2. 表格會產生很多標簽: 正如剛才提到的，表格布局通常會比正確的布局技術涉及更復雜的標簽結構，這會導致代碼變得更難于編寫、維護、調試。
3. 表格不能自動響應: 當你使用正確的布局容器（比如?<header>、<section>、<article>?或是?<div>）時，它們的默認寬度是父元素的 100%；而表格的默認大小是根據其內容而定的。因此，需要采取額外的措施來獲取表格布局樣式，以便有效地在各種設備上工作。

動手練習：創建你的第一個表格

對于表格的理論知識，我們已經說了很多了，所以，讓我們來看一個使用的例子，并建立一個簡單的表格。

1. 首先，將?blank-template.html?和?minimal-table.css?文件拷貝到你的本地環境上。

2. 每一個表格的內容都包含在這兩個標簽中：<table></table>。在你的 HTML 的?<body>?中添加這些內容。

3. 在表格中，最小的內容容器是單元格，是通過?<td>?元素創建的（其中“td”代表“table data”）。把下面的內容添加到你的表格標簽中：

   <td>我是第一個單元格</td>
   

4. 如果我們想要一行四個單元格，我們需要把這組標簽拷貝三次，更新你表中的內容，讓它看起來是這樣的：

   <td>我是第一個單元格</td>
   <td>我是第二個單元格</td>
   <td>我是第三個單元格</td>
   <td>我是第四個單元格</td>
   

你會看到，單元格不會放置在彼此的下方，而是自動與同一行上的其他單元格對齊。每個?<td>?元素 創建一個單獨單元格，它們共同組成了第一行。我們添加的每個單元格都使行的長度變長。

如果想讓這一行停止增加，并讓單元格從第二行開始，我們需要使用?<tr>?元素（其中“tr”代表“table row”）。讓我們現在來證實一下。

1. 把你已經創建好的 4 個單元格放入?<tr>?標簽，就像這樣：

   <tr><td>我是第一個單元格</td><td>我是第二個單元格</td><td>我是第三個單元格</td><td>我是第四個單元格</td>
   </tr>
   

2. 現在你已經實現了一行，可以繼續增加至兩行、三行。每一行都需要一個額外的?<tr>?元素來包裝，每個單元格的內容都應該寫在?<td>?中。

結果

這樣會產生一個如下所示的表：

使用 <th> 元素添加標題

現在，讓我們把注意力轉向表格標題，位于行或列開頭的特殊單元格，定義了行或列包含的數據類型（例如，本文第一個示例中的“人員”和“年齡”單元格）。為了說明它們為什么這么有用，來看下面這個例子，首先是源代碼：

<table><tr><td>&nbsp;</td><td>諾基</td><td>弗洛爾</td><td>艾拉</td><td>胡安</td></tr><tr><td>品種</td><td>杰克羅斯犬</td><td>貴賓犬</td><td>流浪犬</td><td>可卡犬</td></tr><tr><td>年齡</td><td>16</td><td>9</td><td>10</td><td>5</td></tr><tr><td>主人</td><td>岳母</td><td>我</td><td>我</td><td>嫂子</td></tr><tr><td>飲食習慣</td><td>吃掉所有人的剩菜</td><td>啃咬食物</td><td>吃得多</td><td>吃到爆炸為止</td></tr>
</table>

?這是表格實際呈現的效果：

?這里的問題是：雖然你可以弄清楚發生了什么，但是盡可能的交叉參考數據并不容易。如果列和行的標題以某種方式出現，那將會更好。

動手練習：表格標題

讓我們來改進這個表格。

1. 首先，把?dogs-table.html?和?minimal-table.css?文件保存到你的本地環境，HTML 文件包含上文你看到的幾種狗的數據。
2. 為了將表格的標題在視覺上和語義上都能被識別為標題，你可以使用?<th>?元素（其中“th”代表“table header”），用法和?<td>是一樣的，除了它表示為標題，不是普通的單元格以外。進入你的 HTML 文件，將表格中應該是標題的?<td>?元素標記的內容，都改為用?<th>?元素標記。
3. 保存你的 HTML 文件，然后在瀏覽器中加載，然后你應該會看到，現在的標題更像標題了。

備注：?你可以在 GitHub 中找到完成的版本?dogs-table-fixed.html（也可以查看在線示例）。

為什么標題是有用的？

我們已經給出了部分答案，當標題明顯突出的時候，你可以更加簡單地找到你想找的數據，設計上也會看起來更好。

備注：?即使你不給表格添加你自己的樣式，表格標題也會帶有一些默認樣式：加粗和居中，讓標題可以突出顯示。

表格標題也有額外的好處，隨著?scope?屬性（我們將在下一篇文章中了解到），這個屬性允許你讓表格變得更加無障礙，每個標題與相同行或列中的所有數據相關聯。屏幕閱讀設備能一次讀出一列或一行的數據，這是非常有幫助的。

允許單元格跨越多行和列

有時候希望單元格跨越多行或多列。下面是一個顯示常見動物名字的簡單示例。在某些情況下，希望在動物名稱旁邊顯示雄性和雌性的名稱。有時候又不需要，這種情況下，只希望動物名稱橫跨整個表格。

一開始的標記寫法是這樣的：

<table><tr><th>動物</th></tr><tr><th>河馬</th></tr><tr><th>馬</th><td>公馬</td></tr><tr><td>母馬</td></tr><tr><th>鱷魚</th></tr><tr><th>雞</th><td>母雞</td></tr><tr><td>公雞</td></tr>
</table>

?但是輸出的結果不是我們想要的：

需要一個方法，讓“動物”、“河馬”和“鱷魚”橫跨兩列，讓“馬”和“雞”豎跨兩行。幸好，表格中的標題和單元格有?colspan?和?rowspan?屬性，可以實現這些效果。這兩個屬性接受一個沒有單位的數字值，數字決定了它們的寬度或高度是幾個單元格。比如，colspan="2"?會使單元格橫跨兩列。

讓我們使用?colspan?和?rowspan?來改進現有的表格。

1. 首先，把?animals-table.html?和?minimal-table.css?文件復制到你的本地環境，HTML 文件中包含了你剛才看到的動物示例的數據。
2. 接著，使用?colspan?讓“動物”、“河馬”和“鱷魚”橫跨兩列。
3. 最后，使用?rowspan?讓“馬”和“雞”豎跨兩行。
4. 保存后，用瀏覽器打開你寫的 HTML 文件，看看改進的地方。

備注：?這樣設計列的樣式僅限于幾個屬性：border、background、width?和?visibility。要設置其他屬性，必須對列中的每個?<td>?或?<th>?進行樣式設置，或者使用復雜的選擇器，如?:nth-child。

下面是一個簡單的示例：?

<table><tr><th>數據 1</th><th style="background-color: yellow">數據 2</th></tr><tr><td>加爾各答</td><td style="background-color: yellow">橙汁</td></tr><tr><td>機器人</td><td style="background-color: yellow">爵士樂</td></tr>
</table>

?下面就是上述代碼的結果：

?這并不理想，因為必須在列中的所有三個單元格中重復樣式信息（在實際項目中，可能會在所有單元格中設置一個?class，并在單獨的樣式表中指定樣式）。

使用 <col> 應用樣式

可以在?<col>?元素上一次性指定信息，而不是像上面這樣做。<colgroup>?容器就在開始標記?<table>?下面，<col>?元素在?<colgroup>?容器內指定。可以通過如下方式指定表格，來創建與上述相同的效果：

<table><colgroup><col /><col style="background-color: yellow" /></colgroup><tr><th>數據 1</th><th>數據 2</th></tr><tr><td>加爾各答</td><td>橙汁</td></tr><tr><td>機器人</td><td>爵士樂</td></tr>
</table>

定義了兩個“樣式列”，其中一個為第二列每列指定樣式信息。沒有為第一列設計樣式，但仍必須包含一個空白的?<col>?元素，否則樣式將只應用于第一列。

如果想將樣式信息應用于兩列，只需包含一個帶有?span?屬性的?<col>?元素即可，就像這樣：

<colgroup><col style="background-color: yellow" span="2" />
</colgroup>

就像?colspan?和?rowspan?一樣，span?需要一個無單位的數字值，用來指定讓這個樣式應用到表格中多少列。

備注：?如果表格、列和列中的單元格都是單獨樣式化的，那么應用于單元格的樣式將繪制在列樣式之上，而列樣式將繪制在表格之上。這是因為先渲染表格層，然后渲染列層，單元格層渲染在所有其他表格層之上。

動手練習：colgroup 和 col

又到了需要你自己獨立完成的時間了。

下面是一位語言教師的課程表。星期五，她有一門新的課程，全天教授荷蘭語，但她也在周二和周四教授幾節德語課。她希望突出顯示包含她授課天數的欄目。

通過下面這些步驟來重構這個表格。

1. 首先，把?timetable.html?文件復制到你的本地環境。這個 HTML 文件包含你在上文中看到的表格，不過是減去樣式信息的。
2. 在表格的頂部添加一個?<colgroup>?元素，就放在?<table>?標簽下面，<colgroup>可以添加?<col>?元素（繼續看下面剩余的步驟）。
3. 第一列和第二列不需要應用樣式。
4. 為第三列添加一個背景顏色。style?屬性是?background-color:#97DB9A;
5. 為第四列設置一個獨立的寬度，style?屬性是?width: 100px;
6. 為第五列添加一個背景顏色。style?屬性是?background-color: #97DB9A;
7. 為第六列添加不同的背景顏色和邊框，表示這是一個特殊的日子，她要教一門新課。style?屬性是?background-color:#DCC48E; border:4px solid #C1437A;
8. 最后兩天是休息日，所以只需將它們設置為無背景顏色，但需要設置寬度；style?屬性是?width: 100px;

看看你是否能完成這個示例，如果你遇到了困難，或想要核對你完成的作品，你可以在 GitHub 上找到完成的版本?timetable-fixed.html（也可以查看在線示例）。

總結

本章節僅僅包含了 HTML 表格的基礎。在下一篇文章中，我們將介紹一些表格進階特性，并開始考慮方便視力障礙的人士的訪問。

HTML 表格進階特性和無障礙?

本模塊的第二篇文章中，我們來看一下 HTML 表格更進階的特性，比如表格的標題、摘要，以及將表格中的各行分組成表頭、表體和表尾三部分，以及為視力受損的用戶提供表格無障礙。

使用 <caption> 為你的表格增加一個標題

你可以通過?<caption>?元素為你的表格增加一個標題，再把?<caption>?元素放入?<table>?元素中。你應該把它放在?<table>?開始標簽的下面。

<table><caption>侏羅紀時期的恐龍</caption>…
</table>

從上面簡單的例子可以推斷，標題意味著包含對于表格內容的描述，這對那些希望可以快速瀏覽網頁中的表格對他們是否有幫助的讀者們來說，是非常好的功能。特別是盲人用戶，不需要讓屏幕閱讀設備讀出很多單元格的內容，來讓用戶了解這張表格講的是什么，而是可以依靠標題的內容，來決定是否需要了解更詳細的內容。

標題就放在?<table>?標簽的下面。

備注：?同樣，summary?屬性也可以在?<table>?元素中使用，用來提供一段描述，可以被屏幕閱讀設備閱讀。但是我們推薦使用?<caption>?元素來代替，因為?summary?已經廢棄了，且不能被視力正常的用戶閱讀（它不會出現在頁面上）。

動手練習：添加一個標題

我們來試試看吧，回顧一下我們在之前的文章中第一次遇到的例子。

1. 打開你的語言老師的學校時間表，就是?HTML 表格基礎?結尾中的例子，或者把?timetable-fixed.html?文件復制到本地。
2. 為表格添加一個合適的標題。
3. 保存你的代碼，然后用瀏覽器打開，看看你的表格是什么樣的。

備注：?你也可以在 GitHub 上找到我們的版本?timetable-caption.html（查看在線運行版本）。

添加 <thead>、<tbody> 和 <tfoot> 結構

由于你的表格在結構上有點復雜，如果把它們定義得更加結構化，那會幫助我們更能了解結構。一個明確的方法是使用?<thead>、<tbody>?和?<tfoot>，這些元素允許你把表格中的部分標記為表頭、表體和表尾三部分。

這些元素不會使表格更易于屏幕閱讀器用戶訪問，也不會造成任何視覺上的改變。然而，它們在應用樣式和布局上會起到作用，可以更好地讓 CSS 應用到表格上。給你一些有趣的例子，在長表格的情況下，你可以在每個打印頁面上使表格頁眉和頁腳重復，你也可以讓表格的正文部分顯示在一個單獨的頁面上，并通過上下滾動來獲得內容。

要使用它們，應按以下順序排列：

• <thead>?元素必須包住表格的表頭部分。一般是第一行，往往都是每列的標題，但是不是每種情況都是這樣的。如果你使用了?<col>/<colgroup>?元素，那么?<thead>?元素就需要放在它們的下面。
• <tbody>?元素需要包住表格內容的主要部分（不是表頭和表尾）。
• <tfoot>?元素需要包住表格的表尾部分。一般是最后一行，往往是對前面所有行的總結。

備注：?<tbody>?總是包含在每個表中，如果你沒有在代碼中指定它，那就是隱式的。可以來驗證一下，打開一個你之前沒有包含?<tbody>?的例子，然后在你的瀏覽器開發者工具中觀察你的代碼，你會看到瀏覽器為你添加了這個標簽。你也許會想問，為什么你應該在所有表中都需要這個元素，因為它可以讓你更好地控制表格結構和樣式。

動手練習：添加表格結構

讓我們動手使用這些新元素。

1. 首先，把?spending-record.html?和?minimal-table.css?復制到你的本地環境。

2. 嘗試在瀏覽器中打開它，你會發現看起來不錯，但是它可以被改善得更好。“SUM”行包含了已經使用的金額的總和，不過它出現在了錯誤的位置，以及代碼中還遺失了一些細節。

3. 將明顯的標題行改為使用?<thead>?元素，“SUM”行使用?<tfoot>?元素，剩余的內容使用?<tbody>?元素。

4. 先保存，再刷新。你會看到，添加了?<tfoot>?元素后，“SUM”行跑到了表格的底部。

5. 接著，添加一個?colspan?屬性，使“SUM”單元格占 4 個單元格的位置，所以實際數字是顯示在“Cost”列的底部。

6. 讓我們為表格添加一些簡單的額外屬性，能夠讓你理解這些屬性是如何幫助更好地讓表格應用 CSS 的。在你的 HTML 文件的 head 標簽部分，你會看到一個空的?<style>?元素。在 style 元素中添加下列 CSS 代碼：

   tbody {font-size: 95%;font-style: italic;
   }
   tfoot {font-weight: bold;
   }
   

7. 先保存，再刷新，然后觀察一下結果。如果沒有?<tbody>?和?<tfoot>?元素，你也許會寫更加復雜的選擇器或規則來應用同樣的樣式。

備注：?我們并不期望你現在就能完全理解 CSS。在你閱讀我們的 CSS 模塊時，你會學到更多這方面的知識（CSS 介紹是一個好的起點；文章樣式化表格也專門講述了如何對表格添加樣式）。

你完成的表格應該如下所示：?

備注：?你也可以在 GitHub 上找到?spending-record-finished.html。

嵌套表格

在一個表格中嵌套另外一個表格是可能的，只要你包含完整的結構，包括?<table>?元素。這樣通常是不建議的，因為這種做法會使標記看上去很難理解，對使用屏幕閱讀的用戶來說，無障礙性也降低了。以及在很多情況下，也許你只需要插入額外的單元格、行和列到已有的表格中。然而有時候是必要的，比如你想要從其他資源中更簡單地導入內容。

下面的代碼演示了一個簡單的嵌套表格：

<table id="table1"><tr><th>標題 1</th><th>標題 2</th><th>標題 3</th></tr><tr><td id="nested"><table id="table2"><tr><td>單元格 1</td><td>單元格 2</td><td>單元格 3</td></tr></table></td><td>單元格 2</td><td>單元格 3</td></tr><tr><td>單元格 4</td><td>單元格 5</td><td>單元格 6</td></tr>
</table>

輸出看起來是這樣的：

對于視力受損的用戶的表格

讓我們簡要回顧一下如何使用數據表。一個表格可以是一個便利的工具，或者讓我們快速訪問數據，并允許我們查找不同的值。比如，你只需要稍微看一眼下列的表格，你就能得知 2016 年 8 月份在根特出售了多少個戒指。為了理解信息，我們讓數據與列標題或行標題之間建立視覺聯系。

?但假設你無法通過視覺關聯這些數據呢？那么你應該如何閱讀上述的表格？視力受損的用戶經常使用一個屏幕閱讀設備來為他們讀出網頁上的信息。對于盲人來說，閱讀簡單的文字沒有什么問題，但是要理解一張表格的內容，這就有一些難度了。然而，通過適當的標記，我們可以用程序化的關聯來取代視覺關聯。

備注：?根據世界衛生組織 2017 年的數據，大約有 2.53 億人患有視覺障礙。?

本篇文章提供了更一步的技術來使表格的無障礙性盡可能地提高。

使用列和行的標題

屏幕閱讀設備會識別所有的標題，然后在它們和它們所關聯的單元格之間產生程序關聯。列和行標題的組合將標識和解釋每個單元格中的數據，以便屏幕閱讀器用戶可以類似于視力正常的用戶的操作來理解表格。

我們之前的文章就提到過這一點，可見使用 <th> 元素添加標題。

scope 屬性

本篇文章的一個新話題是?scope?屬性，可以添加在?<th>?元素中，以告訴屏幕閱讀器該表頭的類型——它是所在行的表頭，還是所在列的表頭。回想一下我們前面的消費記錄例子，你可以像這樣明確地把表頭定義為所在列的頭部：

<thead><tr><th scope="col">購買</th><th scope="col">位置</th><th scope="col">時間</th><th scope="col">評價</th><th scope="col">成本 (€)</th></tr>
</thead>

而每一行都可以有一個像這樣定義的標題（如果我們把行的標題和列的標題都加上）：

<tr><th scope="row">理發</th><td>理發店</td><td>12/09</td><td>好主意</td><td>30</td>
</tr>

屏幕閱讀器會識別這種結構化的標記，并一次讀出整列或整行。

scope?還有兩個可選的值：colgroup?和?rowgroup。這些用于位于多個列或行的頂部的標題。如果你回顧這部分文章開始部分的“2016 年 8 月出售的物品”表格，你會看到“衣物”單元格在“長褲”、“裙子”和“連衣裙”單元格的上面。這幾個單元格都應該被標記為標題（<th>），但是“衣物”是一個位于頂部且定義了其他三個子標題的標題。因此“衣物”應該有一個?scope="colgroup"?屬性，而另外三個子標題應該有?scope="col"?屬性：

<thead><tr><th colspan="3" scope="colgroup">衣物</th></tr><tr><th scope="col">長褲</th><th scope="col">裙子</th><th scope="col">連衣裙</th></tr>
</thead>

?這同樣適用于多個分組行的標題。再看看“2016 年 8 月出售的物品”表格，這次注意有“阿姆斯特丹”和“烏特勒支”標題（<th>）的行。可以看到“荷蘭”標題，標記為?<th>?元素，跨越了兩行，是其他兩個子標題的標題。因此，應在此標題單元格中指定?scope="rowgroup"，以幫助屏幕閱讀器創建正確的關聯：

<tr><th rowspan="2" scope="rowgroup">荷蘭</th><th scope="row">阿姆斯特丹</th><td>89</td><td>34</td><td>69</td>
</tr>
<tr><th scope="row">烏特勒支</th><td>80</td><td>12</td><td>43</td>
</tr>

id 和 headers 屬性

如果要替代?scope?屬性，可以使用?id?和?headers?屬性來創建標題與單元格之間的聯系。

headers?屬性包含一個空格分隔的無序字符串列表，每個字符串對應?<th>?元素的唯一?id，這些?<th>?元素為數據單元格（<td>?元素）或另一個標題單元格（<th>?元素）提供標題。

這樣，HTML 表格就明確定義了表格中每個單元格的位置，這些單元格由其所屬的每列和每行的標題定義，有點像電子表格。為使其運行良好，表格確實需要列標題和行標題。

回到“2016 年 8 月出售的物品”示例，可以這樣使用?id?和?headers?屬性：

1. 為每個?<th>?元素添加一個唯一的?id。
2. 為每個作為子標題（即在其上方有一個標題元素）的?<th>?元素添加一個?headers?屬性。其值是位于頂部并定義子標題的標題?id，在我們的示例中，列標題為“衣物”，行標題為“比利時”。
3. 為每個?<td>?元素添加一個?headers?屬性，并以空格分隔的列表形式添加相關聯的?<th>?元素的?id。像在電子表格中一樣進行操作：找到數據單元格，然后搜索行和列的相應標題。指定?id?的順序并不重要，但應保持一致，使其井井有條。

<thead><tr><th id="clothes" colspan="3">衣物</th></tr><tr><th id="trousers" headers="clothes">長褲</th><th id="skirts" headers="clothes">裙子</th><th id="dresses" headers="clothes">連衣裙</th></tr>
</thead>
<tbody><tr><th id="belgium" rowspan="3">比利時</th><th id="antwerp" headers="belgium">安特衛普</th><td headers="antwerp belgium clothes trousers">56</td><td headers="antwerp belgium clothes skirts">22</td><td headers="antwerp belgium clothes dresses">43</td></tr>
</tbody>

?備注：?這種方法在標題和數據單元格之間建立了非常精確的關聯，但是它使用了非常多的標記，而且沒有留下任何錯誤的空間。對于大多數表格來說，scope?方法通常就足夠了。

動手練習：使用 scope 和 headers

1. 對于這個最后的練習，首先把?items-sold.html?和?minimal-table.css?復制到你的本地環境。
2. 現在嘗試添加適當的?scope?屬性來讓表格變得更加易于訪問。
3. 最后，嘗試把未添加?scope?屬性的源文件再復制一份。這次使用?id?和?headers?屬性創建精確、明確的關聯，使表格變得更加易于訪問。

備注：?你可以根據我們完成的例子檢查你的工作，請看?items-sold-scope.html（[查看在線運行版本）和?items-sold-headers.html（查看在線運行版本）。

總結

關于 HTML 表格你還可以學習其他一些東西，但是我們目前已經把大部分你需要知道的內容都告訴你了。接下來，你可以在?HTML 表格測評中測試自己的水平了，祝你玩得開心！

如果你已經在學習 CSS，并且在評估中表現良好，你就可以繼續學習 HTML 表格的樣式，參見樣式化表格。

如果你想要入門 CSS，請前往?CSS 學習區！

HTML 中的表單和按鈕

與用戶互動

• 鏈接可用于導航到同一頁面或不同頁面上的不同內容部分。
• <video>元素<audio>通常具有播放/暫停、快進、快退等控制功能，使用戶可以按照自己的意愿消費媒體內容。

然而，這些功能往往助長了單向互動，用戶被動地消費內容。這當然沒問題，但網絡是一種雙向體驗。網站用戶可以根據自己的偏好來選擇內容和服務的體驗方式。他們叫出租車，并要求回電；他們提供反饋和投訴；他們購買產品，并要求送貨上門。

為了提供這種雙向體驗，您需要使用按鈕和表格。

按鈕通常使用 HTML<button>元素創建（有時也會使用<input>元素屬性設置為或type等值來創建）。這些按鈕用途廣泛——您可以連接它們來觸發任何您想要的功能，唯一的限制就是您的想象力和編程技能。buttonsubmit

表單使用諸如<form>、<label>、<input>和 等元素創建<select>。表單元素可用于創建比簡單按鈕更復雜的控件，例如包含多個選項的下拉菜單，可讓您為用戶界面元素選擇不同的主題。

然而，至關重要的是，它們也可以用來創建表單，供用戶在需要向網站服務器提交信息時填寫。想想電子商務網站——當你想搜索要購買的商品時，你會使用表單輸入搜索詞。當你想支付某些商品并完成配送時，你會使用一個表單輸入你的郵政地址，并使用另一個表單輸入你的信用卡信息。

本文將主要討論這種更傳統的表單元素用法。需要注意的是，按鈕在表單內部也常用來將輸入的數據提交到服務器。

了解了這個重要理論后，讓我們繼續探索代碼并了解按鈕和表單是如何實現的。

按鈕

<button>Press me</button>

?

?標簽之間的文本<button></button>會渲染到按鈕內部，瀏覽器會為其添加一些基本樣式，使其默認的外觀和行為與按鈕類似。目前為止，一切順利。然而，這里有一個問題——我們這個單獨的按鈕本身并不能執行任何有用的操作。為了讓它執行一些有用的操作，你需要將它放入表單中（我們稍后會介紹），或者添加一些 JavaScript。

例如，如果您將以下 JavaScript 應用于上述按鈕：?

const btn = document.querySelector("button");
btn.addEventListener("click", () => {btn.textContent = "YOU CLICKED ME!! ??";setTimeout(() => {btn.textContent = "Press me";}, 1000);
});

?它會給你以下輸出——嘗試點擊它：

?

你暫時不需要理解 JavaScript 的工作原理。你將在課程的后續部分學到更多。

在下一節中，您將看到按鈕的第二個主要用途的演示——提交表單。

表單的解剖

?

<form action="./submit_page" method="get"><h2>Subscribe to our newsletter</h2><p><label for="name">Name (required):</label><input type="text" name="name" id="name" required /></p><p><label for="email">Email (required):</label><input type="email" name="email" id="email" required /></p><p><button>Sign me up!</button></p>
</form>

呈現如下：

?

元素<form>?

?

結構化形式

您可以在元素內包含任何您喜歡的 HTML 元素<form>來構造表單元素本身，并提供容器以便使用 CSS 進行樣式設置等。

在我們的示例中，我們包含了標題元素（<h2>）來描述表單的用途。

我們還將每個輸入/標簽對以及提交按鈕放在單獨的 中<p>，以便它們各自出現在單獨的行上。這些元素默認都是內聯的，這意味著如果我們不這樣做，它們就會全部位于同一行。

這是表單結構的常見模式。有些人使用<p>元素 來分隔表單元素，有些人使用<div>、<section>或 even元素。這沒什么大不了的，只要使用的元素語義合理即可。例如，將表單元素組劃分為單獨的段落或內容部分，甚至是列表中的項目都是有意義的。將它們表示為塊引用、旁白或地址 則<li>不太合理。

有一個專門用于將表單元素分組的元素，稱為。這在某些情況下非常有用，例如在復雜的表單中，以及將多個復選框和單選按鈕分組在一起時。我們稍后<fieldset>會看幾個示例。<fieldset>

?

<input>元素

<input type="text" name="name" id="name" required />

?

屬性如下：

• type：指定要創建的表單控件的類型。表單控件有很多不同的類型，從不同類型的簡單文本字段到單選按鈕、復選框等等。Typetext會渲染一個可以接受任意值的基本文本字段。
• name：指定數據項的名稱。提交表單時，數據將以“名稱/值”對的形式發送。在每種情況下，名稱都等于此name屬性值，值則等于在文本字段中輸入的文本。
• id：指定可用于標識元素的 ID。在本例中，它用于將表單控件與其關聯起來<label>。
• required：指定必須在表單元素中輸入值才能提交表單。該屬性僅應在必填字段上設置，不應在可選字段上設置。

您應該注意，某些輸入類型通常不會從字段中輸入的文本獲取值。例如，<input type="color">渲染一個顏色選擇器控件供您選擇顏色，而<input type="radio">渲染一個單選按鈕控件供您選擇或不選擇。

對于單選按鈕，通常需要在特定value屬性中提供選中時提交的值。請注意，您可以value在輸入類型（例如text和）上指定屬性color——其效果是，該值會在表單字段首次渲染時預先填充到表單字段中。

?

專用文本字段輸入

上面的第二個練習提出了一個有趣的觀點。第二個輸入字段明確要求輸入電子郵件地址，并以此方式驗證輸入的值。如果你再次查看表單代碼，你就會明白為什么——第二個輸入字段<input>有一個type。email有幾種專門的文本字段輸入類型，旨在處理特定類型的數據——?<input type="number">、<input type="password">、<input type="tel">等等。

?

<label>元素

<label for="name">Name (required):</label>
<input type="text" name="name" id="name" required />

<label>元素之所以重要有幾個原因，其中最顯著的是：

• 當視障用戶使用屏幕閱讀器來閱讀和與網頁內容交互時，屏幕閱讀器會在遇到每個控件時讀出相關的標簽文本。這使得用戶更容易理解應該在每個控件中輸入什么內容。
• 它們允許您通過點擊標簽文本和控件來聚焦表單元素。這對于手機用戶尤其有用，因為在觸摸屏上用手指準確選擇表單元素可能比較困難。在這種情況下，增大點擊區域會很有用。

顯式和隱式表單標簽

上面看到的表單標簽樣式稱為顯式表單標簽——控件和標簽之間的關聯是通過id和屬性顯式建立的。你還可以通過將控件嵌套在標簽中來for實現隱式表單標簽，如下所示：

<label>Name (required):<input type="text" name="name" required />
</label>

嵌套在控件和標簽之間建立了隱式關聯，您不再需要id和for屬性。

兩種方法都可以，但我們建議使用顯式標記方法。這是因為顯式關聯通常更容易識別和理解，尤其是在 HTML 代碼越來越復雜的情況下。此外，屏幕閱讀器（和其他輔助技術）并不總是能正確處理隱式標簽。

元素<button>?

?注意：<input>您也可以使用指定相同值的元素type（<input type="submit">、<input type="reset">和）?來創建上述按鈕類型。<input type="button">但是，與<button>對應的元素相比，這些按鈕類型有許多缺點。您應該使用<button>。

關于可訪問性

?

其他控制類型

<form action="./payment_page" method="get"><h2>Register for the meetup</h2><fieldset><legend>Choose hotel room type (required):</legend><div><inputtype="radio"id="hotelChoice1"name="hotel"value="economy"checked /><label for="hotelChoice1">Economy (+$0)</label><input type="radio" id="hotelChoice2" name="hotel" value="superior" /><label for="hotelChoice2">Superior (+$50)</label><inputtype="radio"id="hotelChoice3"name="hotel"value="penthouse"disabled /><label for="hotelChoice3">Penthouse (+$150)</label></div></fieldset><fieldset><legend>Choose classes to attend:</legend><div><input type="checkbox" id="yoga" name="yoga" /><label for="yoga">Yoga (+$10)</label><input type="checkbox" id="coffee" name="coffee" /><label for="coffee">Coffee roasting (+$20)</label><input type="checkbox" id="balloon" name="balloon" /><label for="balloon">Balloon animal art (+$5)</label></div></fieldset><p><label for="transport">How are you getting here:</label><select name="transport" id="transport"><option value="">--Please choose an option--</option><option value="plane">Plane</option><option value="bike">Bike</option><option value="walk">Walk</option><option value="bus">Bus</option><option value="train">Train</option><option value="jetPack">Jet pack</option></select></p><p><label for="comments">Any other comments:</label><textarea id="comments" name="comments" rows="5" cols="33"></textarea></p><p><button>Continue to payment</button></p>
</form>

呈現如下：?

?

我們建議您在單獨的瀏覽器標簽頁中打開此示例，以便學習接下來的幾個部分，我們將依次介紹每種控件類型。為此，請使用代碼編輯器將代碼復制到 HTML 文件中，然后在瀏覽器標簽頁中打開它。?

?

單選按鈕

<fieldset><legend>Choose hotel room type (required):</legend><div><inputtype="radio"id="hotelChoice1"name="hotel"value="economy"checked /><label for="hotelChoice1">Economy (+$0)</label><input type="radio" id="hotelChoice2" name="hotel" value="superior" /><label for="hotelChoice2">Superior (+$50)</label><inputtype="radio"id="hotelChoice3"name="hotel"value="penthouse"disabled /><label for="hotelChoice3">Penthouse (+$150)</label></div>
</fieldset>

?

radio輸入類型的工作方式與輸入類型基本相同text，但有一些區別：

• name每組單選按鈕的屬性必須包含相同的值，才能將它們關聯為一個集合。如果它們包含不同的值，則它們實際上將是獨立的集合，提交時將具有不同的值。
• 您必須value為每個單選按鈕添加一個包含要提交值的屬性。提交的值將是一個名稱/值對，但名稱始終相同，例如hotel=economy或hotel=superior。
• 每個單選按鈕<label>的 應該描述該特定值的選擇，而不是您選擇的整體值。提供整體值選擇的描述的首選方式是將它們包裝在 中<fieldset>，該 元素將一個<legend>包含描述的元素作為子元素。

注意：?除了構造和標記表單之外，字段集還有其他用途，例如將一整組控件作為一個單元禁用。?

禁用表單控件

在單選按鈕示例中，您會注意到第三個單選按鈕disabled設置了該屬性。這會導致渲染的控件變灰且不可選擇。這在很多情況下非常有用，因為某些選項通常可用，只是現在不可用。例如，某個產品可能缺貨，或者像我們示例中的情況一樣，頂層套房已被全部預訂！

disabled您可以在任何表單控件（包括元素）上設置屬性<button>。<fieldset>元素也可以接受該disabled屬性 - 這會導致字段集內的每個表單控件都被禁用。

?

復選框

<fieldset><legend>Choose classes to attend:</legend><div><input type="checkbox" id="yoga" name="yoga" /><label for="yoga">Yoga (+$10)</label><input type="checkbox" id="coffee" name="coffee" /><label for="coffee">Coffee roasting (+$20)</label><input type="checkbox" id="balloon" name="balloon" /><label for="balloon">Balloon animal art (+$5)</label></div>
</fieldset>

從代碼片段中可以看出，單選按鈕和復選框的實現方式非常相似（它們也可以使用checked屬性，以便在頁面加載時將其呈現為預選狀態）。它們的行為方式也相當相似，只是單選按鈕允許您從多個選項中選擇零個或一個，而復選框允許您從多個選項中選擇零個或多個。

主要區別（除了type值！）在于每個復選框都有不同的name值，而且它們通常沒有屬性。從行為上講，這意味著它們代表不同的數據值，而單選按鈕集只代表一個值。提交時，如果復選框被選中，value則每個值都會提交一個值——?、等等。onyoga=onballoon=on

?注意：?可以通過為復選框添加value屬性來更改其提交的值，例如：選中<input type="checkbox" id="yoga" name="yoga" value="yes" />時將yoga=yes提交。但是，這樣做意義不大。復選框要么在選中時提交單個值，要么根本不提交。發送到服務器的值實際上并不重要。

?

下拉菜單

<label for="transport">How are you getting here:</label>
<select name="transport" id="transport"><option value="">--Please choose an option--</option><option value="plane">Plane</option><option value="bike">Bike</option><option value="walk">Walk</option><option value="bus">Bus</option><option value="train">Train</option><option value="jetPack">Jet pack</option>
</select>

?

該<select>元素包含所有不同的值選項。您可以在這里設置將id控件與其標簽關聯的屬性，以及name設置要提交的數據項名稱的屬性。

數據項的每個可能值都由一個元素表示<option>，該元素嵌套在<select>元素內部。每個<option>元素都可以帶有一個value屬性，該屬性指定在下拉列表中選擇該選項時要提交的值。如果您未指定value，則將使用標簽內的文本<option></option>作為值。

?注意：?如果您希望在頁面加載時選擇特定選項，您可以selected向相關<option>元素添加屬性。

多行文本輸入字段

?

<label for="comments">Any other comments:</label>
<textarea id="comments" name="comments" rows="5" cols="33"></textarea>

它們的行為與元素相同<input type="text">，只是允許輸入多行文本。rows屬性指定文本區域默認的行數，cols屬性指定文本區域默認的列數。如果未指定，則使用cols="20"和 的值rows="2"。

表單驗證

?

概括