HTML中那些不經常使用標籤

　　先思考一個問題：爲何H5裏面又多了那麼多看似沒用的標籤？

　　咱們知道，<div>能幹百分之99的標籤能幹的事，而標籤的主要做用是用來包裹內容，只要把基本內容都包含進去不就行了？？胡鬧！不帶這麼將就了！！程序員大多可都是追求完美的，標籤的語義化纔是咱們選擇使用哪一個標籤的首要因素。固然，H5的不少新標籤在一些老版本流浪器中還不能獲得很好的支持，那就須要引用膩子腳本去兼容大多數瀏覽器了。

 

一、<cite>和<blockquote>

這倆個標籤都有定義文本引用的語義，<blockquote>定義的是塊引用，默認有縮進，開始結尾都與其餘元素有一行間隔，官方要求它內部應該包含一個塊級元素。而<cite>一般表示它所包含的文本對某個參考文獻的引用，好比書籍或者雜誌的標題，內容比較少，默認是斜體的。

好比: 張三的突破性專著<cite>張三自傳</cite>給網絡帶來一股新氣象.   

顯示爲：張三的突破性專著張三自傳給網絡帶來一股新氣象.

 

二、<optgroup>

當你想在一個下拉框中對根據不一樣類型分組的選項添加一些定義時,<optiongroup>標籤將會很是有用。例如，若是你想根據時間對食物進行分組，代碼能夠這樣寫：

 1 <select>
 2   <optgroup label="水果">
 3     <option value="">蘋果</option>
 4     <option value="香蕉">Saab</option>
 5   </optgroup>
 6   <optgroup label="蔬菜">
 7     <option value="白菜">Mercedes</option>
 8     <option value="西紅柿">Audi</option>
 9   </optgroup>
10 </select>

 

三、<abbr>

HTML5中已經消滅了<acronym>,因此熟悉<acronym>的童鞋記得不要再用它了，改用<abbr>吧，簡單省事。來看看這個新標籤的做用，經過對縮寫進行標記，您可以爲瀏覽器、拼寫檢查和搜索引擎提供有用的信息。使用這個標籤時，咱們只需定義英文首字母就能夠了，詳細信息交給title屬性，相信你們對這個屬性不會陌生，當鼠標移到這個縮寫單詞上面時，顯示title裏的內容。

 

四、<address>

<address> 標籤訂義文檔或文章的做者/擁有者的聯繫信息。其中的文本一般呈現爲斜體。大多數瀏覽器會在 address 元素先後添加折行。

提示：<address> 標籤不該該用於描述通信地址，除非它是聯繫信息的一部分。

提示：<address> 元素一般連同其餘信息被包含在 <footer> 元素中。

 

五、 <ins> 和 <del>

若是你想經過標記來顯示文檔編輯樣式，<ins>和<del>恰好能夠用到。就像它們的名字，<ins>經過一個下劃線來突出那些被添加進文檔的內容，而<del>則經過刪除線來顯示那些從中刪除的文字。

好比：

<p>價格：<ins>￥120</ins> <del>￥180</del>  </p>

顯示效果：  價格：￥120 ￥180

 

六、<label>

<label>的for屬性關聯到另外一個標籤的id，用戶點擊<label>的內容就至關於點擊了被關聯的那個id標籤。不用for關聯的話也能夠直接把須要關聯的標籤寫到<label>內部。

<form>
<label>Male<input type="radio" name="sex" /></label>  <!--用法1-->
<br />
<label for="female">Female</label>                    <!--用法2-->
<input type="radio" name="sex" id="female" />
</form>

 

七、<fieldset>

<fieldset>是一個至關好用的標籤，它可將表單內的相關元素按邏輯分組，將表單內容的一部分打包，生成一組相關表單的字段。

<form>
  <fieldset>
    <legend>健康信息</legend>
    身高：<input type="text" />
    體重：<input type="text" />
  </fieldset>
</form>

健康信息：

身高：  體重：

 

八、<bdo>定義文本方向

估計這個標籤不少人都沒見過吧，畢竟誰沒人把文本方向倒着排啊。其dir屬性規定了文本方向，ltr/rtl。

<bdo dir="rtl">Here is some Hebrew text.</bdo>

顯示效果： .txet werbeH emos si ereH

 

九、ruby、rt、rp

<ruby>
奣<rt> weng <rp>(不支持ruby)</rp></rt>
</ruby>

標籤訂義 ruby 註釋（中文註音或字符），當不支持<ruby>標籤時，顯示<rp>內容，支持則不顯示<rp>內容。

 

目前就整理這些不爲人知但有必要了解的標籤，後續還會添加...