必須知道的10個不常用HTML標簽

2020-03-24 16:05:25

字體：大中小

來源：轉載

供稿：網友

譯自：TutsPlus

網頁開發人員常常希望能夠了解并掌握多種語言，結果是，學習一門語言的所有內容是棘手的，但是卻很容易發現你并沒有完全利用那些比較特殊卻很有用的標簽。

不幸的是我們到現在還沒有涉足的那些比較不知名的HTML標記所有潛力。但它永遠不會太晚重新進入領域，并開始編寫代碼來發掘這些未開發的標簽的能量。

這里是10個未被充分利用或被誤解的HTML標簽。或許它們不太廣為人知，但是在特定情況下他們卻非常有用。

1. cite
貌似每個人都比較熟悉 blockquote 標簽，但是你可知道 blockquote 的小弟弟 cite ？ cite 允許你定義元素內的文字作為一種參考。一般，瀏覽器會用斜體來顯示 cite 標簽內的文字，但是這可以用一點CSS來改變。

例子： p David Allen的突破性組織性的圖書 em cite 完成你的工作 /cite /em 給忘了帶來了一場風暴。 /p
2、 optgroup
optgroup 標簽是定義select標簽中的選項分組的一種很好的方法。比如，你需要按時間來分組電影列表，那么就可以這樣做：
label for= showtimes 上映時間 /label
select id= showtimes name= showtimes optgroup label= 下午一點 /optgroup option html' target='_blank'>value= titanic 泰坦尼克號 /option option value= nd 貧民窟的百萬富翁 /option option value= wab 怪物史瑞克 /option optgroup label= 下午兩點 /optgroup option value= bkrw 獅子王 /option option value= stf 全民超人 /option /select
3. acronym
acronym 是一種定義或更多解釋一組文字的方法。當你用鼠標放到使用 acronym 標簽的文字時，一個顯示title標簽的內容的框框將會出現在下邊。比如：
微博客網站 acronym title= Founded in 2006 Twitter /acronym 最近常常宕機。
4. address
address 標簽是一個非常不起眼的小標簽，但是這并不意味著它沒有用。顧名思義 address 允許你在HTML中語義化標簽。這個小巧的標簽將默認斜體顯示標簽內的內容，當然，使用樣式可以很容易的改變默認的樣式。
address Glen Stansberry
1234 Web Dev Lane
Anywhere, USA
/address
5. ins 和 del
如果你想使用標簽來顯示編輯版本， ins 和 del 正好適合。顧名思義， ins 用下劃線高亮顯示添加進來的內容，而 del 用刪除線顯示被移除的信息。
John del likes /del ins LOVES /ins his new iPod.
6. label
貌似表單元素最容易忘掉何時標記文本。對于表單元素，最常忘記的就是 label 標簽。不僅僅是一個便捷的標記文本的方式， label 標簽還能傳遞一個 for 屬性來指定哪個元素將會被關聯。 label 不僅易于用樣式來控制，還允許你讓標題可點擊。
label for= username 用戶名 /label
input id= username type= text /
7. fieldset
Fieldset是一個小巧的標簽，你可以用來為你的表單元素添加邏輯分組。 fieldset 標簽就會在其內部的元素周圍畫一個框。另外一點就是可以在fieldset里面添加 label 標簽來定義分組的標題。
form fieldset
legend 你比5年紀學生聰明嗎？ /legend
當然 input name= yes type= radio value= yes /

不知道 input name= no type= radio value= no /
/fieldset
/form
8. abbr
abbr 標簽頗類似于 acronym 標簽，不同的是 abbr 標簽只用于定義縮寫單詞。就像 acronym 一樣，你可以為這個標簽定義一個title屬性。當用戶將鼠標放到縮寫文字上面時，全部內容就會在下面顯示。 abbr 標簽很少用，但是對于屏幕閱讀者、拼寫檢查者以及搜索引擎是非常有用的。
abbr title= 腦殘 NC /abbr 是一個不太文明的用語。
9. rel
Rel 可以是一個極度有用的屬性，任何HTML元素都可以應用一個rel屬性。它有助于傳遞沒有另外指定的額外參數。這對于在HTML中使用JavaScript的時候是非常有用的。如果你有一個想要在行內編輯的鏈接，你可以添加：
a rel= clickable href= page.html 這個鏈接可編輯。 /a
Javascript 會尋找帶有rel屬性 clickable 的a鏈接，并應用一些Ajax并允許它在行內被編輯。這只是你可以使用rel屬性的眾多技術中的一種用法，因為它的潛力是無止境的。感興趣的朋友可以深入研究一下W3C關于Rel的介紹。

10. wbr
wbr 標簽是一個難以相信的不出名的標簽。坦率的講，我也很懷疑你們會接觸到這個標簽，因為它幾乎從來沒有用到。(的確，在我寫這篇文章之前我幾乎沒有見到過這個標簽)。事實上，這個標簽算是一個軟斷行，允許你在某一行內指定一個斷行點，表明在該點處可以斷行，但是不是一定會斷行，僅僅是在有需要斷行的時候才會斷行。如果你想避免出現水平滾動條，那么使用這個標簽是很棒的。

示例：
div >NoWbrNoWbrNoWbrNoWbrNoWbrNoWbrNoWbrNoWbrNoWbr br /
HavaWbr wbr HavaWbr wbr HavaWbrHavaWbrHavaWbrHavaWbrHavaWbr wbr HavaWbr
/div
如果你想要實現相同的效果而不使用 wbr 標簽，你可以試一下 #8203;或 shy;。據說這三個標簽都未被所有瀏覽器完全支持。
更多編程語言

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：快速搭建TP-LINK電信拓撲設備面板基于HTML5的實現方法

下一篇：淺談HTML5的未來發展