10個未被充分利用或被誤解的HTML標籤_HTML/Xhtml_網頁製作

這裡有10個未被充分利用或被誤解的HTML標籤。或許它們不太廣為人知，但是在特定情況下他們卻非常有用。
網頁開發人員常常希望能夠了解並掌握多種語言，結果是，學習一門語言的所有內容是棘手的，但是卻很容易發現你並沒有完全利用那些比較特殊卻很有用的標籤。
譯自：TutsPlus
不幸的是我們到現在還沒有涉足的那些比較不知名的HTML標記所有潛力。但它永遠不會太晚重新進入領域，並開始編寫程式碼來發掘這些未開發的標籤的能量。
這裡有10個未被充分利用或被誤解的HTML標籤。或許它們不太廣為人知，但是在特定情況下他們卻非常有用。
1.
似乎每個人都比較熟悉

標籤，但是你可知道

的小弟弟？ 允許你定義元素內的文字作為一種參考。一般，瀏覽器會用斜體來顯示 標籤內的文字，但這可以用一點CSS來改變。
標籤對於引用目錄或其它網站的參考非常有用。這裡是一個在段落中使用cite標籤的例子:
David Allen的突破性組織性的圖書完成你的工作給忘了帶來了一場風暴。 2.
標籤是定義select標籤中的選項分組的一個很好的方法。例如，你需要按時間分組電影列表，那麼就可以這樣做：
1 2
label for="showtimes">上映時間// label> select id="showtimes" name= = "showtimes"> optgroup label="下午一點">optgroup> option value= >泰坦尼克號/option> option value= "nd">貧民窟的百萬富翁/option> option value="wab">怪物史瑞克/option/option optgroup label="下午兩點">/"下午兩點">/> option value="bkrw">"bkrw">獅子🎜>/option> option value=value= >全民超人
/
option> /select/ select 示範: 上映時間


泰坦尼克號 貧民窟的百萬富翁
怪物史瑞克
獅子王 全民超人 它可以在視覺上區分電影清單。 3. 是一種定義或更多解釋一組文字的方法。當你用滑鼠放到使用標籤的文字時，一個顯示title標籤的內容的框框將會出現在下邊。比如： 1 微部落格網站
acronym
title

=
"Founded in 2006"/acronym> 最近常常宕機。 範例: 微部落格網站 Twitter 最近常常宕機。 4.

標籤是一個非常不起眼的小標籤，但這並不意味著它沒有用。顧名思義

允許你在HTML中語意化標籤。這個小巧的標籤將預設斜體顯示標籤內的內容，當然，使用樣式可以輕鬆的改變預設的樣式。
1 2 3 4
address>Glen Stansberry 1234 Web Dev Lane Anywhere, USA /address> 5. 和
如果你想使用標籤來顯示編輯版本， 和 剛好適合。顧名思義， 用下劃線高亮顯示添加進來的內容，而 用刪除線顯示被移除的資訊。
1
John del>likes/del> ins >LOVES/ins> his new iPod.
範例:
大家都喜歡 擯棄了 Zblog。 6.
看似表單元素最容易忘記何時標記文字。對於表單元素，最常忘記的就是 標籤。不只是一個方便的標記文字的方式， 標籤還能傳遞一個”for” 屬性來指定哪個元素將會被關聯。 不僅易於用樣式來控制，還允許你讓標題可點擊。
1 2
label for="username">用戶名"username">用戶名label> input

id

=
"username"
type= "text" /> 7. Fieldset是一個小巧的標籤，你可以用來為你的表單元素添加邏輯分組。 標籤就會在其內部的元素周圍畫一個框。另外一點就是可以在fieldset裡面加上 標籤來定義分組的標題。 1 2 3 4 5 6 7 form>fieldset> legend>你比5年紀學生聰明嗎？ /legend> 當然input name="yes" type= type== >"radio" value="yes" /> 不知道input name="no" type= type= 🎜>"radio" value="no" /> /fieldset>
/form
> 範例: 8.

標籤相當類似於 標籤，不同的是 標籤只用來定義縮寫單字。就像一樣，你可以為這個標籤定義一個title屬性。當使用者將滑鼠放到縮寫文字上面時，全部內容就會在下面顯示。 標籤很少用，但是對於螢幕閱讀者、拼字檢查者以及搜尋引擎是非常有用的。 1 abbr title="腦殘">NC
>
abbr>
是一個不太文明的用語。
範例:
是一個不太文明的用語。 是一個不太文明的用語。 9. rel Rel 可以是一個極度有用的 屬性，任何HTML元素都可以套用一個rel屬性。它有助於傳遞沒有另外指定的額外參數。這對於在HTML中使用JavaScript的時候是非常有用的。如果你有一個想要在行內編輯的鏈接，你可以添加： 1 a rel="clickable" href"clickable" href
"page.html">
這個連結可編輯。
/a
>
Javascript 會尋找帶有rel屬性”clickable」的a鏈接，並應用一些Ajax並允許它在行內被編輯。這只是你可以使用rel屬性的眾多技術中的一種用法，因為它的潛力是無止境的。有興趣的朋友可以深入研究一下W3C關於Rel的介紹。 10. 標籤是一個難以相信的不出名的標籤。坦率的講，我也很懷疑你們會接觸到這個標籤， 因為它幾乎從來沒有用到。 (的確，在我寫這篇文章之前我幾乎沒有見過這個標籤)。事實上，這個標籤算是一個軟斷行，允許你在某一行內指定一個斷行點，表示在該點處可以斷行，但是不是一定會斷行，僅僅是在有需要斷行的時候才會斷行。如果你想避免出現水平捲軸，那麼使用這個標籤是很棒的。
範例： 下面是一個200像素寬的box，沒有定義overflow。 NoWbrNoWbrNoWbrNoWbrNoWbrNoWbrNoWbrNoWbrNoWbrHavaWbrHavaWbrHavaWbrHavaWbrHavaWbrHavaWbrHbrHbrHavaWbrHavaWbrHavaWbrHavaWbrHbrHbr如果你想要實現相同的效果而不使用 標籤，你可以試試看或。據說這三個標籤都未被所有瀏覽器完全支援。你可以透過這篇文章 來查看各個瀏覽器對著三個標籤的支援情況。
PS:頗困難的翻譯了這篇文章，神飛深深的感受到了語義化的魅力以及HTML標籤的強大，相信我們沒有認識到的標籤還有很多，結果，常見的標籤大家都很熟悉，不常見的標籤大家有都不會用。正如之前我在一篇文章中闡述的那樣，「語義化」很大的一部分是，在恰當的地方使用合適的標籤，而不是一味的div下去。如果，我們能夠了解更多的HTML標籤，我們就能寫出更具語意的HTML程式碼，也能大幅降低我們寫的CSS的難度和工作量，並使我們的頁面結構更趨合理。