文章目錄
- 1. <cite>
- 2. <optgroup>
- 3. <acronym>
- 4. <address>
- 5. <ins> 和 <del>
- 6. <label>
- 7. <fieldset>
- 8. <abbr>
- 9. rel
- 10. <wbr>
原文地址:http://net.tutsplus.com/articles/web-roundups/10-rare-html-tags-you-really-should-know/
如今,Web開發工程師在學習和工作中通常都使用了不止一門語言。因此,對一門語言的方方面面我們很難說得上都去瞭解,要精通一門語言也是相當有難度,比如語言中一些生僻但可能很有用處的關鍵字用法。
雖然我們以前可能對這些非常少見的HTML標籤並不瞭解或沒能完全用好他們,不過亡羊補牢,為時未晚,現在開始瞭解並能在以後的開發中正確的用上這些以前沒用過的標籤也不算太晚。
這裡我給出了10個最不常見並且常被人誤用的HTML標籤。雖然可能並不像其他HTML標籤那麼常見,但在某些特殊的情景下,他們仍然相當有用。
1. <cite>
相信大家都對<blockquote>不陌生吧,但你知道<blockquote>其實有個小弟叫<cite>不?<cite>允許在一個元素中定義一段文本作為引用。一般情況下,瀏覽器會把<cite>標籤下的文本設定為斜體字,不過這可能會根據CSS有所改變。
<cite>標籤在書籍目錄和其他網站地址引用的時候非常有用。這裡給出一個如何在一段文字中使用<cite>標籤的例子:
張三的突破性專著張三自傳給網路帶來一股新氣象.
2. <optgroup>
當你想在一個下拉框中對根據不同類型分組的選項添加一些定義時,<optiongroup>標籤將會非常有用。例如,如果你想根據時間對電影進行分組,代碼可以這樣寫:
<LABEL for=showtimes>Showtimes</LABEL>
<SELECT id=showtimes name=showtimes><OPTGROUP label=1PM></OPTGROUP> <OPTION selected value=titanic>Twister</OPTION> <OPTION value=nd>Napoleon Dynamite</OPTION><OPTION value=wab>What About Bob?</OPTION><OPTGROUP label=2PM></OPTGROUP> <OPTION value=bkrw>Be Kind Rewind</OPTION> <OPTION value=stf>Stranger Than Fiction</OPTION></SELECT>
例子:
Showtimes
TwisterNapoleon DynamiteWhat About Bob?Be Kind RewindStranger Than Fiction3. <acronym>
<acronym>標籤通常用於對一句話(片語)添加定義或者更詳細的解釋。當使用者將滑鼠停留在添加了<acronym>標籤的文字上面,添加的注釋或定義會在文字下方顯示。如:
微博網站 <ACRONYM title="Founded in 2006"> Twitter</ACRONYM> 最近引起了互連網上的一股新的風潮!
例子:
微博網站 Twitter最近引起了互連網上的一股新的風潮!
4. <address>
<address>標籤是個相當少見的標籤,不過這並不代表它沒什麼用處。望文生義,<address>允許你在HTML中根據語義來標記地址。這個很好用的標籤同樣會把它內部的資料用斜體字標識,不過,這個樣式很容易通過CSS修改。
<address>
中國,上海市,閔行區,XX路,XX小區,XXX室
</address>
例子:
中國,上海市,閔行區,XX路,XX小區,XXX室
5. <ins> 和 <del>
如果你想通過標記來顯示文檔編輯樣式,<ins>和<del>剛好可以用到。就像它們的名字,<ins>通過一個底線來突出那些被添加進文檔的內容,而<del>則通過刪除線來顯示那些從中刪除的文字。
沒有了驢子,我們的日子還要怎麼<DEL>過下去</DEL> <INS>活下去</INS>?
例子:沒有了驢子,我們的日子還要怎麼過下去 活下去?
6. <label>
當標記文檔時,表格元素很容易被遺忘。在表格元素中,最容易被遺忘的元素之一怕要數<label>標籤了。但對<label>標籤來說,它不僅可以相當方便的表示一段文字,同時,它更能通過for屬性來指定標籤被用於哪個元素。這些<label>不僅很容易被定義樣式,它們還允許你將標籤的文字設計成像按鈕一樣可以被使用者點擊。
<LABEL for="username">使用者名稱</LABEL>
<INPUT id="username" type="text">
7. <fieldset>
<fieldset>是一個相當好用的標籤,它可將表單內的相關元素按邏輯分組。一旦這些元素通過<fieldset>標籤放到一起,另外通過將<label>標籤和fieldset綁定可以為分組定義標題。
<FORM><FIELDSET>
<LEGEND>你覺得自己牛X麼?</LEGEND>
Yes<INPUT value=yes type=radio name=yes>
No <INPUT value=no type=radio name=no>
</FIELDSET>
</FORM>
例子:
8. <abbr>
<abbr>和<acronym>是一類的標籤,只是<abbr>標籤只用於定義縮寫的片語。就像<acronym>,相當於你給元素添加了一個標題或稱號。當使用者將滑鼠移至上方在縮寫詞上面,它的全稱會在下方顯示。<abbr>標籤很少被用到,不過它對螢幕助讀程式,拼字檢查程式和搜尋引擎很有用。
他<ABBR title="媽">文明用語</ABBR>的
例子:他文明用語的!
9. rel
Rel是一個相當有用的屬性,基本上任何一個HTML元素都可以應用Rel屬性(注1)。它可以為那些沒有別的方式提供詳細資料的元素提供額外的資訊。這在javascript和HTML一起工作時尤其有用。如果你有一個你可能想在內部編輯,你可以這樣添加代碼:
代碼
<html>
<body>
<p><a id="myAnchor" rel="index"
href="http://www.w3school.com.cn">Visit W3School.com.cn</a></p>
<script type="text/javascript">
x=document.getElementById("myAnchor");
document.write(x.rel);
</script>
</body>
</html>
javascript會找到rel屬性為clickable的link元素,然後它可以接著通過ajax內部改變元素。當然,這個只是你可以應用rel屬性的無數種情況中的一種,你可以用其他方式來很好的使用rel屬性。
10. <wbr>
<wbr>(注2)是個基本已經銷聲匿跡的標籤。坦誠的說,我懷疑讀者中的大多數都沒接觸過這個標籤,畢竟它太少用到了(真的,在寫這篇文章之前,我自己都沒見過這個標籤)。這個標籤允許你指定一塊地區來強制使用分行符號,但僅僅是確實必要的時候。該元素很特殊因為它定義在瀏覽器中添加分行符號,如果需要的話,它可以在你極力避免瀏覽器中出現橫向的捲軸時實現符合要求的介面。
如果你想在不必使用<wbr>標籤的情況下達到相同的效果,你也可以嘗試​或­ 。但千萬注意,這三個標籤中沒有一個可以完全支援所有瀏覽器的。如果你想看看哪些瀏覽器支援這三種標籤可以看看這篇文章。
譯者註:
注1,實際上rel通常用在a和link標籤中,它常和rev一起出現。
注2,wbr不是標準的html標籤,它最開始是網景公司添加的,但隨後被移除掉了。
附註:
這篇文章僅僅是一個參考,實際上,由於一些地方使用和解釋得並不清楚, 它也引起了比較多的爭論,建議如果確實對這些標籤有興趣研究的朋友,可以參看下原文地址並仔細的查看文章的一些回複。
另外有朋友認為這些少見的標籤相容性會很差,所以我們應少用。然而恰恰相反,上面列舉的標籤,除了最後一個不符合標準不推薦使用之外,其他都符合W3C標準,它們相容目前任何主流瀏覽器。當然,由於<acronym>和<abbr>功能基本一樣,在新的html 5標準中不推薦使用<acronym>,w3c推薦用<abbr>代替<acronym>。
最後有人可能認為這裡的一些標籤都可以用其他一些常見標籤實現相同功能,因此沒必要使用。不過正如回複中沉默楊仔所說:“w3c就是要語義化頁面內容”,對使用者說,可能你可以通過普通標籤實現一樣的功能,但對機器(e.g.螢幕助讀程式,單詞拼字檢查程式,搜尋引擎等)來說,這種標籤它們更容易懂。所以我認為,如果你的網頁中真有這些標籤可以應用的場合,最好還是使用這些標籤來實現相應的功能。