8 個有用的 HTML5 標籤

做爲一個 web 前端開發者，在製做頁面的時候你會從一大堆不一樣的標籤中選擇合適的標籤來完成相應的功能。有些 HTML5 標籤廣爲流傳，例如 <article> <header> <footer>，然而有些標籤可能知道的人很少，用的也少。

1. 上下文高亮 <mark>

<mark> 標籤應該用來表示 「相關的（relevance）」 或 「注意觀察的 （scrutiny）」
元素和文本應該與咱們作的活動相關，而且這個相關性在那個時刻對咱們是有用的。

http://codepen.io/SitePoint/p...

2. <small>

你可能以前用過這個標籤，和它字面意思同樣，它的做用就是讓字看起來小一點。

這個標籤應該用來下降文本或信息的重要程度。

http://codepen.io/SitePoint/p...

3. <q> 和 <blockquote>

這兩個標籤都是引用，<q> 用於小段內聯文本，<blockquote> 用於大段文本的引用

<div class="big-banner">
  <h2>Try our latest sandwich!</h2>
  <p>Come and try our latest, biggest and tastiest
  sandwich. John Smith told us <q>he hasn't eaten 
  anything as good in his whole life!</q></p>
</div>

<div class="motivational-quote">
  <blockquote 
    cite="http://bit.ly/1pbvjsL">
      Infuse your life with action.
      Don't wait for it to happen.
      Make it happen. Make your own
      future. Make your own hope.
      Make your own love. And
      whatever your beliefs, honor 
      your creator, not by passively 
      waiting for grace to come down 
      from upon high, but by doing 
      what you can to make grace 
      happen... yourself, right now,
      right down here on Earth.
    <cite>Bradley Whitford - Author</cite>
  </blockquote>
</div>

4. <ins>, <del> 和 <s>

<ins> 用於定義剛剛被添加到文檔的內容
<del> 用於定義從文檔被移除的內容
以上兩個標籤都支持2個可選的屬性，
cite 屬性用來連接到一個解釋當前變動緣由的連接，datetime 用來定義什麼時候發生這個變化。
<s> 用於表示當前的文本再也不相關或正確，一般狀況下它會附帶一個替換的文本內容。

http://codepen.io/SitePoint/p...
http://codepen.io/SitePoint/p...

5. <optgroup>

<optgroup> 標籤用來和 <select> 標籤配合，有助於對 <options> 元素 進行分類。

http://codepen.io/SitePoint/p...
http://codepen.io/SitePoint/p...

6. <datalist>

使用 <datalist> 定義 <input>標籤可用的選擇列表。

datalist 的表現就是輸入框下面會出現一個選擇框和一個下拉箭頭，用來選擇一些預約義好的內容。當你輸入部分關鍵詞的時候，選擇列表中的內容若被匹配到，則會高亮顯示。

選擇列表出現的內容必須符合 input 設定的 type 類型，例如 type = email，那麼選擇列表中只會出現符合email規則的內容。

該特性被普遍支持，除了 safari。

http://codepen.io/SitePoint/p...