單

表單允許我們發送和接收來自web頁面的數據，表單的用途有：網站和論壇登錄；注冊信息；基于web的電子郵件；在線問卷調查等。

表單 - <form> ... </form>

所有表單元素（如輸入框和按鈕）必須位于表單標記內。在大多數情況下，表單必須設置name、action屬性。

• name=“？” - 標識表單的唯一名稱，由操作腳本使用。
• action=“url” - 提交時處理表單數據的腳本的地址（url）。在某些情況下，不需要操作URL，而是由web頁面的JavaScript函數處理表單數據。
• method=“？” - 向操作腳本傳送數據時使用的請求方法，post或get。例如，post用于提交用戶注冊的表單數據，get用于搜索或必須取得返回信息的表單。

輸入字段 - <input>

用于為表單創建簡單的文本輸入字段，但也是許多其他表單輸入類型的基礎，使用type屬性來指定不同類型。

• name=“？” - 輸入字段被操作腳本使用時使用的唯一名稱。
• type=“？” - 輸入字段有幾種類型，文本text、密碼password、復選框checkbox、單選框radio、文件file、圖像image、隱藏hidden都是最常見的。
• value=“？” - 輸入字段在首次加載時顯示的初始值或數據。
• size=“？” - 輸入字段的大小或寬度，通常以數字字符寬度而不是像素定義。
• maxlength=“？” - 輸入字段的最大長度，例如輸入的最大字符數。
• checked - 與復選框類型和單選框類型一起使用，默認設置為已選中。

按鈕 - <button>

按鈕與表單輸入字段類似，但有自己的一組屬性：

• name=“？” - 按鈕中操作腳本中的唯一名稱。
• type=“？” - 按鈕類型（submit或reset），提交submit還是重置reset。
• value=“？” - 按鈕上顯示的文本，例如“確定”或“提交”。
• size=“？” - 按鈕的長度（或寬度）。

選擇列表 - <select> ... </select>

下拉列表，也稱為組合框，允許從項目列表中進行選擇。

• name=“？” - 選擇列表的名稱
• size=“？”-選擇列表的最小寬度，通常不需要，因為列表項的大小決定列表大小。
• multiple - 允許用戶從列表中選擇多個項目，默認為選。

選擇項 - <option> </option>

option標記定義選擇列表中的每一項，并且必須出現在select標記中。選擇項的文本必須出現在選項標記之間。

• value=“？” - 該值是在選擇項被選中的情況下發送到操作腳本的數據。注意，這不是在列表中顯示的文本
• selected - 設置選擇列表顯示時的默認選項。
• 文本區域 - <textarea></textarea>
• 文本區域允許輸入大量文本，并允許指定輸入框的高度與，不像input標記只能有固定高度。
• name=“？” - 文本區域的唯一名稱。
• rows=“？”-文本區域行數，定義文本區域的垂直大小。
• cols=“？”-文本區域水平大小，即列數，定義為字符數。

例子

瀏覽器顯示的內容如下所示：

您了解 HTML 和 Web 時，您可能會發現反復遇到一個通常未定義的特定單詞。那個詞是語義的。

你可能會讀到諸如“我們去尋找語義元素”或“我們盡量做到語義化”之類的陳述，但永遠無法清楚地了解語義這個詞的含義。在本文中，我們將探索語義標記的世界，提出術語的有效定義，并將該概念應用于我們編寫 HTML 標記的方式。

什么是語義標記？

根據 Dictionary.com 的說法，語義是指對單詞或句子含義的正確解釋。

從語義上使用一個詞就是以一種與該詞的含義正確對齊的方式使用它。當我們誤用一個詞時，我們并不是在語義上使用它。

許多 HTML 標簽具有語義含義。也就是說，元素本身傳達了一些關于包含在開始標簽和結束標簽之間的內容類型的信息。

例如，當瀏覽器遇到一個h1標題時，它會將該標記解釋為表示該元素的內容h1構成了包含該元素的部分的最重要的標題。標簽的語義含義h1是它用于標識特定網頁或部分的最重要的標題。

啟用語義標記的兩種做法

如果我們要編寫語義標記，必須采用兩種不同的做法。

0. 語義標記要求根據其預期目的使用 HTML 元素。
1. 語義標記需要內容和表示的分離。

正確使用 HTML 元素

在編寫語義標記時，我們使用 HTML 標簽來告訴瀏覽器元素的內容。在語義標記中，標簽不再只是讓內容以人類可讀的格式顯示在網頁上的一種方式。

標簽本身成為一種告訴機器（無論是瀏覽器、計算機、智能手機還是其他智能設備）有關內容含義的方式。

要編寫語義標記，我們必須正確使用 HTML 標簽，以便我們的標記既是人類可讀的，也是機器可讀的。

分離內容和演示

過去，通常使用標記來定義樣式和控制網頁布局。

標題級別的選擇不是基于層次結構，而是基于 Web 瀏覽器應用的樣式，表格用于網頁布局而不是組織表格數據，一些 HTML 標記（例如frameset）是為了明確定義網頁而創建的布局等等。

當我們編寫語義標記時，我們不能再根據視覺呈現來選擇 HTML 元素。相反，我們根據語義含義選擇 HTML 元素，然后使用CSS定義我們內容的視覺呈現。

在編寫語義標記時，網頁元素的表示與內容本身的標記完全分離和不同。

定義語義標記

考慮到這兩種做法，我們可以這樣定義語義標記：

語義標記是使用諸如 HTML 之類的標記語言通過正確選擇標記元素來傳達有關文檔中每個元素的含義的信息，并保持標記和文檔中包含的元素的視覺呈現之間的完全分離.

為什么語義標記很重要？

好的 CSS 可以使普通網站訪問者看不到不好的標記。然而，再多的樣式也不會讓糟糕的標記對計算機化的訪問者更有意義，例如搜索引擎網絡爬蟲、瀏覽器翻譯工具或屏幕閱讀器等輔助技術。

根據 Bruce Lawson的說法，HTML 元素的語義使用“增強了可訪問性、可搜索性、國際化和互操作性”。換句話說，如果您希望所有訪問者都可以訪問您的網站、實現較高的搜索引擎排名、可供來自世界各地的訪問者使用以及與其他 Web 服務有效交互，則必須編寫語義標記。

編寫語義標記是關于創建人類和計算機可讀的 Web 內容。當人類和計算機都可以很好地閱讀網絡時，它就變得更易于訪問，因為計算機能夠更好地分析其內容、索引、交付它，并且開發人員能夠更好地將不同的信息源結合到新的網絡服務中.

我們如何編寫語義標記？

我們通過正確選擇和使用 HTML 標記以及通過選擇傳達有關標記所標記信息的某些標記來編寫語義標記。

HTML 中有語義元素和非語義元素。非語義元素的示例是div和span。這些標簽不會告訴計算機有關元素內容含義的任何信息。

雖然有用，并且在某些情況下可以很好地使用，但如果語義標簽可用并且適合特定用途，請在使用非語義標簽之前使用它。

許多語義標簽來自谷歌和Opera等公司完成的網頁標記分析。這些公司發現，許多網站使用id和class屬性來暗示非語義元素內容的含義。

例如，他們發現了很多看起來像這樣的 div：<div id="nav">、<div id="header">和<div id="footer">。此類發現有助于 W3C 識別和定位新的語義標簽以包含在 HTML5 中，例如：nav和。我們可以將最常見和最重要的語義元素分為四類：header``footer``article``aside

• 文檔結構標簽
• 文本含義標簽
• 媒體類型標簽
• 相關標簽

文件結構

過去，div元素是識別和分組網站部分的主要方式。然而，隨著 HTML5 的發布，除了標簽提供的分組屬性之外，我們還有幾個新標簽可供使用，這些標簽提供語義含義div：

• header：用于網頁標題的容器，通常包含網站徽標、標題元素和網站導航。
• footer：用于網頁頁腳的容器，除了導航鏈接和返回網頁頂部的鏈接外，通常還包含作者身份、聯系方式和版權信息。
• main：一個高級元素，用于包含單個網頁獨有的所有內容，并且不會在多個網頁中重復。
• nav：包含站點導航鏈接塊的元素。該元素通常放置在頁面header和footer中，也可以在aside（側邊欄）元素中使用。
• section：該section元素用于標記文檔的各個部分，例如長篇文章的章節或主要部分。
• aside：用于標識與頁面上的主要內容相關但不屬于文檔主要流程的內容。例如，該什么是語義標記？

文本含義

在網絡的早期，通常會看到這樣的標記：

<style>
 .italics {     font-style: italic; }
</style> 
<p>Some paragraph content including one
   <span class="italics">italicized</span> word.
</p> 

今天我們（希望）不會夢想做這樣的事情，因為span元素告訴瀏覽器和其他計算機訪問者完全沒有關于嵌套在開始和結束標記之間的文本的含義或目的。我們不會使用非語義標簽，而是在應該以斜體顯示的單詞周圍span添加標簽。em通過使用em標簽，使用屏幕閱讀器或訪問內容的其他計算機的訪問者將了解應用標簽以增加對已標記內容的強調。該em元素只是 HTML 標記如何為文本內容添加語義含義的一個示例。其他示例包括：

• h1, h2, h3, h4, h5, 和h6: 標題元素標簽用于標識應該作為標題出現的文本。最高級別或最重要的標題是按照重要性降序排列的標題h1級別。h2``h6
• strong：帶有標簽的文本strong被賦予了額外的重要性，并且通常以粗體顯示。
• mark：mark標簽用于突出在特定上下文中具有特定重要性的文本。例如，它可用于突出顯示搜索結果頁面中搜索詞的每次出現。
• cite：該cite元素用于標識部分內容源自的原始作品。
• blockquoteand q: blockquoteand q(quote) 元素用于識別從另一個來源直接引用的文本。
• time：該time元素可用于告訴瀏覽器、網絡爬蟲和其他智能設備，特定的內容位代表 24 小時制的時間或特定的日歷日期。

我們的字體和 Web 排版教程提供了大量關于正確使用這些標簽來為文本內容分配語義含義的詳細信息。

媒體類型

HTML5 還包括三個標簽，用于標識標簽之間提供的媒體類型。這些標簽有雙重用途。首先，它們向瀏覽器發出信號，需要對特定技術資源（例如視頻播放引擎）進行排隊。其次，他們為內容賦予語義意義。

• audio：用于向文檔添加一個或多個音頻內容源，并允許瀏覽器根據訪問者的設備和瀏覽器選擇最佳選項。
• video：類似于audio元素，但用于將視頻內容添加到標記文檔。
• picture：圖片元素用于允許網絡瀏覽器根據媒體查詢的結果從可用選項中選擇最佳圖像。

您可以在我們的HTML5 媒體教程中了解有關嵌入audio和video元素的更多信息。此外，我們關于在網絡上使用圖像的文章提供了有關何時使用該元素以及何時堅持使用該元素的更多信息。picture``img

相關標簽

幾個 HTML 元素用于表示多個元素之間的相關性。例如，使用有序列表 ( ol) 告訴瀏覽器列表中的項目彼此相關，需要以特定的順序出現。用于表示多個元素之間相關性的其他元素包括：

• ul: 無序列表用于表示列表中項目之間的關系，并表明它們不需要按特定順序來理解。
• figure：該figure元素用于將一段內容（例如圖像、圖表、圖形或文本）和由figcaption標簽標記的標題組合在一起。通過在標簽之間嵌套標題和內容，figure可以識別嵌套元素之間的關系。我們的圖片頁面包含有關實施此有用標簽的更多信息。
• address：該屬性用于將聯系人信息與包含該address元素的父元素相關聯。例如，當添加到 時article，該address元素提供文章作者的聯系信息，當添加到網頁時footer，address標識網頁所有者的聯系信息。

結束的想法

如果您是 HTML 新手，請花時間學習如何在語義上使用所有這些不同的 HTML 標記。如果您不確定您使用的標簽是否正確，請花幾分鐘時間進行一些研究。正如我們所見，使用正確的標簽很重要。如果您已經使用 HTML 一段時間了，請花點時間了解新的 HTML5 元素以及如何正確使用它們。在過去的幾年里，HTML 變得越來越復雜，繼續使用div帶有class和id屬性，但語義 HTML5 標記的可訪問性和互操作性承諾足以接受這些新的語義元素。

那么你已經了解清楚語義標記了嗎？

節、分區和分割線

這些標記用于將頁面分成多個部分。熟練地掌握這些標記將意味著構建出具有良好的結構和布局的頁面，使其更加友好和易于閱讀。

分區 - <div> </div>

div標記定義了HTML文件中的一個部分或分區。它通常包含需要組合在一起的標題、段落、表格或其他元素。通過設置<div class="">與css一起使用來設置網頁某個部分的顯示。

段落 - <p> </p>

p標記用來定義文本的段落，就像你在書中看到的那樣，一旦文本達到屏幕邊緣就會自動折到下一行。當另一個<p>標記用于開始下一個段落時，瀏覽器將在段落之間添加一些空白。p標記具有以下屬性：

• align="" - 段落中文本的對齊方式：left, center or right
• width="" - 段落將占據頁面的固定寬度或百分比，默認為100%

內聯 - <span> </span>

span標記用于將內聯元素組合在一起，例如句子中的幾個單詞，以便僅對這些單詞應用css樣式。span標記可以在div和p標記中使用，因為它不會創建新的塊。

換行 - <br>

br標記相當于一個回車符，用于在新行開始文本。一行中的多個<br>標記將在網頁上創建一個很大的垂直空間。

水平分隔線 - <hr>

hr標記通常被稱為HTML行分隔符標記，創建一條通常用于視覺上分隔頁面的水平線。它具有以下屬性：

• width="" - 線條將占用固定寬度，默認100%寬度
• color="" - 線條顏色
• noshade - 取消3D外觀，創建一條平的實線分隔線

不換行 - <nobr> </nobr>

出于某種原因，你希望文本在一條直線上繼續，而不是在屏幕的邊緣換行，可以使用nobr。注意：這將迫使用戶向右滾動以查看行的其余部分，這是一種糟糕的設計。

例子

下面是以上標記的示例：

瀏覽器顯示內容如下所示：