網頁開發人員常常希望能夠了解并掌握多種語言，結果是，學習一門語言的所有內容是棘手的，但是卻很容易發現你并沒有完全利用那些比較特殊卻很有用的標簽。
譯自：tutsplus
不幸的是我們到現在還沒有涉足的那些比較不知名的html標記所有潛力。但它永遠不會太晚重新進入領域，并開始編寫代碼來發掘這些未開發的標簽的能量。
這里是10個未被充分利用或被誤解的html標簽。或許它們不太廣為人知，但是在特定情況下他們卻非常有用。
貌似每個人都比較熟悉<blockquote> 標簽，但是你可知道<blockquote>的小弟弟<cite>？<cite> 允許你定義元素內的文字作為一種參考。一般，瀏覽器會用斜體來顯示<cite> 標簽內的文字，但是這可以用一點css來改變。
<cite> 標簽對于引用目錄或其它網站的參考非常有用。這里是一個在段落中使用cite標簽的例子:
david allen的突破性組織性的圖書完成你的工作給忘了帶來了一場風暴。
<optgroup>標簽是定義select標簽中的選項分組的一種很好的方法。比如，你需要按時間來分組電影列表，那么就可以這樣做：
12 | <label for="showtimes">上映時間</label><select id="showtimes" name="showtimes"> <optgroup label="下午一點"></optgroup> <option value="titanic">泰坦尼克號</option> <option value="nd">貧民窟的百萬富翁</option> <option value="wab">怪物史瑞克</option> <optgroup label="下午兩點"></optgroup> <option value="bkrw">獅子王</option> <option value="stf">全民超人</option> </select> |
演示:
它可以在視覺上區分電影列表。
<acronym> 是一種定義或更多解釋一組文字的方法。當你用鼠標放到使用<acronym>標簽的文字時，一個顯示title標簽的內容的框框將會出現在下邊。比如：
1 | 微博客網站<acronym title="founded in 2006"> twitter</acronym> 最近常常宕機。 |
示例:
微博客網站 twitter 最近常常宕機。
<address> 標簽是一個非常不起眼的小標簽，但是這并不意味著它沒有用。顧名思義<address> 允許你在html中語義化標簽。這個小巧的標簽將默認斜體顯示標簽內的內容，當然，使用樣式可以很容易的改變默認的樣式。
1234 | <address>glen stansberry1234 web dev laneanywhere, usa</address> |
如果你想使用標簽來顯示編輯版本，<ins> 和<del> 正好適合。顧名思義，<ins> 用下劃線高亮顯示添加進來的內容，而<del> 用刪除線顯示被移除的信息。
1 | john <del>likes</del> <ins>loves</ins> his new ipod. |
示例:
大家都喜歡 擯棄了 zblog。
貌似表單元素最容易忘掉何時標記文本。對于表單元素，最常忘記的就是<label> 標簽。不僅僅是一個便捷的標記文本的方式，<label> 標簽還能傳遞一個”for” 屬性來指定哪個元素將會被關聯。<label> 不僅易于用樣式來控制，還允許你讓標題可點擊。
12 | <label for="username">用戶名</label><input id="username" type="text" /> |
fieldset是一個小巧的標簽，你可以用來為你的表單元素添加邏輯分組。<fieldset>標簽就會在其內部的元素周圍畫一個框。另外一點就是可以在fieldset里面添加<label> 標簽來定義分組的標題。
1234567 | <form><fieldset><legend>你比5年紀學生聰明嗎？</legend>當然<input name="yes" type="radio" value="yes" /> 不知道<input name="no" type="radio" value="no" /></fieldset></form> |
示例:
<abbr> 標簽頗類似于<acronym> 標簽，不同的是<abbr> 標簽只用于定義縮寫單詞。就像<acronym>一樣，你可以為這個標簽定義一個title屬性。當用戶將鼠標放到縮寫文字上面時，全部內容就會在下面顯示。<abbr> 標簽很少用，但是對于屏幕閱讀者、拼寫檢查者以及搜索引擎是非常有用的。
1 | <abbr title="腦殘">nc</abbr> 是一個不太文明的用語。 |
示例:
是一個不太文明的用語。 是一個不太文明的用語。
rel 可以是一個極度有用的 屬性，任何html元素都可以應用一個rel屬性。它有助于傳遞沒有另外指定的額外參數。這對于在html中使用javascript的時候是非常有用的。如果你有一個想要在行內編輯的鏈接，你可以添加：
1 | <a rel="clickable" href="page.html">這個鏈接可編輯。</a> |
javascript 會尋找帶有rel屬性”clickable”的a鏈接，并應用一些ajax并允許它在行內被編輯。這只是你可以使用rel屬性的眾多技術中的一種用法，因為它的潛力是無止境的。感興趣的朋友可以深入研究一下w3c關于rel的介紹。
<wbr>標簽是一個難以相信的不出名的標簽。坦率的講，我也很懷疑你們會接觸到這個標簽， 因為它幾乎從來沒有用到。(的確，在我寫這篇文章之前我幾乎沒有見到過這個標簽)。事實上，這個標簽算是一個軟斷行，允許你在某一行內指定一個斷行點，表明在該點處可以斷行，但是不是一定會斷行，僅僅是在有需要斷行的時候才會斷行。如果你想避免出現水平滾動條，那么使用這個標簽是很棒的。
示例：
下面是一個200像素寬的box，沒有定義overflow。
如果你想要實現相同的效果而不使用<wbr> 標簽，你可以試一下​或­。據說這三個標簽都未被所有瀏覽器完全支持。你可以通過這篇文章 來查看各個瀏覽器對著三個標簽的支持情況。
ps:頗困難的翻譯了這篇文章，神飛深深的感受到了語義化的魅力以及html標簽的強大，相信我們沒有認識到的標簽還有很多，結果，常見的標簽大家都很熟悉，不常見的標簽大家有都不會用。正如之前我在一篇文章中闡述的那樣，“語義化”很大的一部分是，在恰當的地方使用合適的標簽，而不是一味的div下去。如果，我們能夠了解更多的html標簽，我們就能寫出更具語義的html代碼，也能大大的降低我們寫css的難度和工作量，并使我們的頁面結構更趨合理。
新聞熱點
疑難解答
