前端面試題-HTML語義化標籤

1、HTML5語義化標籤

標籤	描述
<article>	頁面獨立的內容區域。
<aside>	頁面的側邊欄內容。
<bdi>	容許您設置一段文本，使其脫離其父元素的文本方向設置。
<command>	命令按鈕，好比單選按鈕、複選框或按鈕
<details>	用於描述文檔或文檔某個部分的細節
<dialog>	對話框，好比提示框
<summary>	標籤包含 details 元素的標題
<figure>	規定獨立的流內容（圖像、圖表、照片、代碼等等）。
<figcaption>	<figure> 元素的標題
<footer>	section 或 document 的頁腳。
<header>	文檔的頭部區域
<mark>	帶有記號的文本。
<meter>	度量衡。僅用於已知最大和最小值的度量。
<nav>	導航連接的部分。
<progress>	任何類型的任務的進度。
<ruby>	ruby 註釋（中文註音或字符）。
<rt>	字符（中文註音或字符）的解釋或發音。
<rp>	在 ruby 註釋中使用，不支持 ruby 元素的瀏覽器所顯示的內容。
<section>	文檔中的節（section、區段）。
<time>	日期或時間。
<wbr>	規定在文本中的何處適合添加換行符。

2、語義化標籤的使用

2.1 <title></title> 頁面主要內容

（1）<title> 標籤的特色是簡短、描述性、惟一，用於提高搜索引擎排名。

（2）搜索引擎會把 title 做爲判斷頁面主要內容的指標，有效的 title 應該包含幾個與頁面內容密切相關的關鍵字，建議將 title 的核心內容寫在前 60 個字符。

2.2 <header></header> 頁眉

（1）HTML5 規範描述爲「一組解釋性或導航型性的條目」，一般有網站標誌、主導航、全站連接以及搜索框。

2.3 <nav></nav> 導航

（1）頁面的導航連接區域，用於定義頁面的主要導航部分。

（2）導航一般使用 <ul> 無序列表。如果麪包屑連接，則使用 <ol> 有序列表。

（3）HTML5 規範不推薦對輔助頁腳連接使用 nav，除非頁腳再次顯示頂級全局導航、或者是招聘信息等重要連接。

2.4 <main></main> 主要內容

（1）網站頁面的主要內容，而且一個頁面只能使用一次 <main> 標籤。

（2）如果 web 應用，則包含其主要功能。

2.5 <article></article> 文章標記

（1）表示的是一個文檔、頁面、應用或是網站中的一個獨立的容器。

（2）HTML5 規範聲明 <article> 標籤適用於自包含的窗口小部件:股票行情，計算器，鐘錶，天氣窗口小部件等。

（3）<article>這個標籤能夠嵌套使用，可是他們必須是部分與總體的關係。

2.6 <section></section> 區塊

（1）一組類似主題的內容，通常會有一個標題。

（2）實現好比文章的章節，標籤式對話框中的各類標籤頁等功能。

2.7 <aside></aside> 側邊欄

（1）表示一部份內容與頁面的主體並無較大的關係，而且能夠獨立存在。

（2）實現好比升式引用、側邊欄、相關文章的連接、廣告、友情連接等功能。

2.8 <footer></footer> 頁腳

（1）和 <header> 標籤對應，能夠實現好比附錄、索引、版權頁、許可協議等功能。

2.9 <cite></cite> 引用

（1）表示它所包含的文本對某個參考文獻的引用，好比書籍或者雜誌的標題。

（2）按照慣例，引用的文本將以斜體顯示。

（3）用 <cite> 標籤把指向其餘文檔的引用分離出來，尤爲是分離那些傳統媒體中的文檔，如書籍、雜誌、期刊，等等。

2.10 <blockquote></blockquote> 塊引用

（1）<blockquote> 與 </blockquote> 之間的全部文本都會從常規文本中分離出來，常常會在左、右兩邊進行縮進（增長外邊距），並且有時會使用斜體。也就是說，塊引用擁有它們本身的空間。

2.11 <q></q> 短的引用

（1）瀏覽器常常在引用的內容周圍添加引號。

（2）根據 HTML 4.01 規範，q 元素應當使用分界引號來呈現，就是說，q 元素包含的文本必須以引號來開始和結束。

2.12 <time></time> 日期或時間

（1）若是未定義 datetime 屬性，則必須在元素的內容中規定日期或時間。

2.13 <abbr></abbr> 簡稱或縮寫

（1）經過對縮寫進行標記，您可以爲瀏覽器、拼寫檢查和搜索引擎提供有用的信息。

（2）能夠在 <abbr> 標籤中使用全局的 title 屬性，這樣就可以在鼠標指針移動到 <abbr> 元素上時顯示出簡稱/縮寫的完整版本。

2.14 <dfn></dfn> 特殊術語或短語的定義

（1）如今流行的瀏覽器一般用斜體來顯示 <dfn> 中的文本。

（2）與其餘許多基於內容的樣式和物理樣式標籤同樣，<dfn> 標籤儘可能少用爲妙。

2.15 <del></del> 刪除的文本

（1）和 <ins> 標籤配合使用，來描述文檔中的更新和修正。

2.16 <ins></ins> 插入文本

2.17 <code></code> 源代碼

（1）用於表示計算機源代碼或者其餘機器能夠閱讀的文本內容。

2.18 <pre></pre> 預格式化的文本

（1）被包圍在 pre 元素中的文本一般會保留空格和換行符。而文本也會呈現爲等寬字體。

（2）若使用 <pre> 標籤來定義計算機源代碼，好比 HTML 源代碼，則使用符號實體來表示特殊字符，好比 "<" 表明 "<"，">" 表明 ">"，"&" 表明 "&"。

（3）能夠致使段落斷開的標籤（例如標題、<p> 和 <address> 標籤）毫不能包含在 <pre> 所定義的塊裏。儘管有些瀏覽器會把段落結束標籤解釋爲簡單地換行，可是這種行爲在全部瀏覽器上並不都是同樣的。

（4）pre 元素中容許的文本能夠包括物理樣式和基於內容的樣式變化，還有連接、圖像和水平分隔線。

閱讀更多