認識10個未被充分利用或被誤解的HTML標籤

2009110321:08

 

10個未被充分利用或被誤解的HTML標籤。
 

或許它們不太廣為人知,但是在特定情況下他們卻非常有用。

1. <cite>

貌似每個人都比較熟悉<blockquote> 標籤,

但是你可知道<blockquote>的小弟弟<cite>?<cite> 允許你定義元素內的文字作為一種參考。

一般,瀏覽器會用斜體來顯示<cite> 標籤內的文字,但是這可以用一點CSS來改變。

<cite> 標籤對於引用目錄或其它網站的參考非常有用。這裡是一個在段落中使用cite標籤的例子:

 

HTML代碼
<p>David Allen的突破性組織性的圖書<em><cite>完成你的工作</cite></em>給忘了帶來了一場風暴。</p>

[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]


2. <optgroup>

<optgroup>標籤是定義select標籤中的選項分組的一種很好的方法。

比如,你需要按時間來分組電影列表,那麼就可以這樣做:
 

程序代碼 程序代碼
<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>


示例:
 
HTML代碼
<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>

[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]


3. <acronym>

<acronym> 是一種定義或更多解釋一組文字的方法。

當你用鼠標放到使用<acronym>標籤的文字時,一個顯示title標籤的內容的框框將會出現在下邊。

比如:

微博客網站<acronym title="Founded in 2006"> Twitter</acronym> 最近常常宕機。

示例:
 

HTML代碼
博客網站<acronym title="Founded in 2006"> wowbox</acronym> 最近常常新訊息。

[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]


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.


示例:
 
HTML代碼
John <del>likes</del> <ins>LOVES</ins> his new iPod.

[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]


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>


示例:
 
HTML代碼
<form><fieldset> <legend>你比5年紀學生聰明嗎?</legend> 當然<input name="yes" type="radio" value="yes" /> 不知道<input name="no" type="radio" value="no" /> </fieldset> </form>

[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]


8. <abbr>

<abbr> 標籤頗類似於<acronym> 標籤,不同的是<abbr> 標籤只用於定義縮寫單詞。

就像<acronym>一樣,你可以為這個標籤定義一個title屬性。

當用戶將鼠標放到縮寫文字上面時,全部內容就會在下面顯示。

<abbr> 標籤很少用,但是對於屏幕閱讀者、拼寫檢查者以及搜索引擎是非常有用的。
 

程序代碼 程序代碼
<abbr title="腦殘">NC</abbr> 是一個不太文明的用語。


示例:
 
HTML代碼
<p><abbr title="腦殘">NC</abbr> 是一個不太文明的用語。</p>

[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]


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>標籤是一個難以相信的不出名的標籤。

坦率的講,我也很懷疑你們會接觸到這個標籤, 因為它幾乎從來沒有用到。

(的確,在我寫這篇文章之前我幾乎沒有見到過這個標籤)。

事實上,這個標籤算是一個軟斷行,允許你在某一行內指定一個斷行點,

表明在該點處可以斷行,但是不是一定會斷行,僅僅是在有需要斷行的時候才會斷行。

如果你想避免出現水平滾動條,那麼使用這個標籤是很棒的。

示例:

下面是一個200像素寬的box,沒有定義overflow。
 

HTML代碼
<div style="width:200px;border:1px solid #00f;"> NoWbrNoWbrNoWbrNoWbrNoWbrNoWbrNoWbrNoWbrNoWbr<br /> HavaWbr<wbr>HavaWbr<wbr>HavaWbrHavaWbrHavaWbrHavaWbrHavaWbr<wbr>HavaWbr </div>

[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]


如果你想要實現相同的效果而不使用<wbr> 標籤,你可以試一下​或­。

據說這三個標籤都未被所有瀏覽器完全支持。

你可以通過 這篇文章 來查看各個瀏覽器對著三個標籤的支持情況。

PS:
頗困難的翻譯了這篇文章,深深的感受到了語義化的魅力以及HTML標籤的強大,

相信我們沒有認識到的標籤還有很多,結果,常見的標籤大家都很熟悉,

不常見的標籤大家有都不會用。

如果,我們能夠瞭解更多的HTML標籤,我們就能寫出更具語義的HTML代碼,

也能大大的降低我們寫CSS的難度和工作量,並使我們的頁面結構更趨合理。