不經常使用但很好用的標籤

雖然 html5 出了不少新標籤，可是本身工做中用到的除了 nav，header 等跟 div 相似的標籤之外，其餘的並沒怎麼用過，因此看了下菜鳥教程裏面，大致瀏覽的一下已有的標籤，發現不少有趣的標籤，如今總結一下，部分支持性比較差的就不介紹了，好比 <details> 標籤，看起來很不錯，可是顯示只有 Chrome 支持，因此就不介紹了，有興趣的能夠去看看。由於不知道怎麼在文章裏展現代碼效果，因此點這裏看看連接描述

---

標識類

abbr

<abbr>標籤指示簡稱或縮寫，好比 "WWW" 或 "NATO"。經過對縮寫進行標記，您可以爲瀏覽器、拼寫檢查和搜索引擎提供有用的信息。全稱寫在 title 屬性裏，在懸浮時便可顯示內容。title 是 html 的全局屬性，這意味着你用別的標籤，而後添加 title 屬性，也會有一樣效果，不過既然出了此標籤，而且瀏覽器和搜索引擎對此進行處理，因此遇到時，用它仍是不錯的。

<p> <abbr title="投幣，點贊，轉發">素質三連</abbr> 是每位讀者應有的態度</p>

area 和 map

當初在 DW 裏看到過這個功能，不過本身沒用過，能夠設置圖片可點擊區域，而後進行連接。好比點擊下圖的中間區域。會跳轉新的圖片。

<img src="https://s2.ax1x.com/2019/04/17/AzwvnK.png" width="500px" alt="AzwvnK.png" border="0" usemap="#eye"/>
<map name="eye" id="eye">
<area shape="circle" target="_blank" coords="250,150,50" href ="https://s2.ax1x.com/2019/04/17/Azwz7D.jpg" alt="Venus" />
</map>

bdo

<bdo>標籤用來指示文本的順序，從左到右 dir="ltr"）仍是右往左（dir="rtl"），這樣就不用去處理字符串顛倒了。

<bdo dir="ltr">上海自來</bdo>，水，<bdo dir="rtl">上海自來</bdo>

hr

<hr> 標籤在 HTML 頁面中建立一條水平線。這沒什麼可說的，不過如今都不怎麼推薦了，可是各瀏覽器還都是支持的，比用 div 的邊框仍是能省很多代碼的

---

mark

<mark> 標籤訂義帶有記號的文本。

五千六百萬啊，四捨五入就是 <mark>一個億</mark>啊

meter 和 progress

<meter> 標籤訂義已知範圍或分數值內的標量測量。也被稱爲 gauge（尺度）。
例子：磁盤用量、查詢結果的相關性，等等。
<progress> 標籤不適合用來表示度量衡（例如，磁盤空間使用狀況或查詢結果）。
個人理解就是<meter>用來表示那些有計量單位的，好比溫度，剩餘空間。而<progress>是用來那些任務的進度，好比下載上傳等。
value 屬性若是不設置 max 值得話，則最大值爲 1

c:盤<meter value="10" max="50">10G</meter><br />
迅雷下載<progress value="0.999">99.9%</progress>

ruby rt rp

ruby 元素由一個或多個字符（須要一個解釋/發音）和一個提供該信息的 rt 元素組成，還包括可選的 rp 元素，定義當瀏覽器不支持 "ruby" 元素時顯示的內容。
個人理解是 ruby 是字，rt 是註音，rp 是瀏覽器不支持時顯示的內容。

<ruby>福<rt>hu</rt></ruby
>建人

sub 和 sup

包含在 <sub>和 <sup>標籤和其結束標籤中的內容將會以當前文本流中字符高度的一半來顯示，可是與當前文本流中文字的字體和字號都是同樣的。在數學等式、科學符號、化學公式和腳註等比較好用，sup 也能夠用來寫通知的小紅點。

H<sub>2</sub>O是水，log<sub>5</sub><sup>25</sup>=2
<span style="border:1px solid ">贊<sup style="background:red;">22</sup></span>

wbr

若是單詞太長，或者您擔憂瀏覽器會在錯誤的位置換行，那麼您可使用 <wbr> 元素來添加 Word Break Opportunity（單詞換行時機）。能夠看到有 wbr 標籤包圍的 http 會換行。

<p style="width:100px;border:1px solid">ssssssssssssssss<wbr />Http<wbr /></p>
<p style="width:100px;border:1px solid">ssssssssssssssssHttp</p>

---

表格類

表格裏面不經常使用但好用的應該數 col 和 colgroun 標籤，他們能夠用來定義對應列的屬性。再此我把表格相關的元素寫在一塊兒。col 的 align 屬性支持比較差，因此推薦用 css 處理
thead、tfoot 以及 tbody 元素使您有能力對錶格中的行進行分組。當您建立某個表格時，您也許但願擁有一個標題行，一些帶有數據的行，以及位於底部的一個總計行。
這種劃分使瀏覽器有能力支持獨立於表格標題和頁腳的表格正文滾動。當長的表格被打印時，表格的表頭和頁腳可被打印在包含表格數據的每張頁面上。

caption、col、colgroup、thead、tbody、tfoot 和 table

<table>
  <caption>九宮</caption>
  <colgroup>
    <col></col>
    <col span="2" width="100px"></col>
  </colgroup>
  <thead>
    <tr><th>1</th><th>2</th><th>3</th></tr>
  </thead>
  <tbody>
    <tr><td>4</td><td>5</td><td>6</td></tr>
  </tbody>
  <tfoot>
    <tr><td>7</td><td>8</td><td>9</td>
    </tr>
  </tfoot>
</table>

---

表單類

表單這也有許多標籤，可是項目中應該多數都不會用瀏覽器所展現的樣式，不過有個 output 標籤比較有趣，下面只作一些簡單的結構展現

<form
  oninput="x.value=parseInt(a.value)*10000/(parseInt(b.value)*parseInt(b.value))"
>
  <figure>
    <figcaption>莫得感情莫得錢的殺手</figcaption>
    <img
      src="https://s2.ax1x.com/2019/04/17/Azl7Y8.jpg"
      width="350"
      height="234"
    />
  </figure>
  <fieldset>
    <legend>健康信息</legend>
    體重(kg)：0<input type="range" id="a" value="75" max="250" />250 <br />
    身高(cm)：<input type="number" id="b" value="160" max="250" /><br />
    體重指數：<output name="x" for="a b"></output>
  </fieldset>
</form>

結語

還有一些標籤沒寫裏面，好比 iframe 相關的，我的感受用的不是特別多，可能之後會加上吧。