你需要了解卻不常見的10個Html標籤
- 高洛峰原創
- 2017-03-12 17:36:171312瀏覽
這篇文章講述你需要了解卻不常見的10個Html標籤
現今,Web開發工程師在學習和工作中通常都使用了不只一門語言。因此，對一門語言的方方面面我們很難說得上都去了解,要精通一門語言也是相當有難度，比如語言中一些生僻但可能很有用處的關鍵字用法。
雖然我們以前可能對這些非常少見的HTML標籤並不了解或沒能完全用好他們，不過亡羊補牢，為時未晚，現在開始了解並能在以後的開發中正確的用上這些以前沒用過的標籤也不算太晚。
這裡我給了10個最不常見且常被誤用的HTML標籤。雖然可能不像其他HTML標籤那麼常見，但在某些特殊的情境下，他們仍然相當有用。
1. f3a85e1241a187c5ac462d886e9a968b
相信大家都對b8a712a75cab9a5aded02f74998372b4不陌生吧，但你知道b8a712a75cab9a5aded02f74998372b4其實有個小弟叫f3a85e1241a187c5ac462d886e9a968b不？ f3a85e1241a187c5ac462d886e9a968b允許在一個元素中定義一段文字作為引用。一般情況下，瀏覽器會把f3a85e1241a187c5ac462d886e9a968b標籤下的文字設為斜體字，不過這可能會根據CSS有所改變。
f3a85e1241a187c5ac462d886e9a968b標籤在書籍目錄和其他網站地址引用的時候非常有用。這裡舉出一個如何在一段文字中使用f3a85e1241a187c5ac462d886e9a968b標籤的例子:
張三的突破性專著張三自傳為網路帶來一股新氣象.
2. 5b7a15bed8615d1b843806256bebea72
當你想要在一個下拉框中對根據不同類型分組的選項添加一些定義時,3b5b1885f576f7b4a7d80372c223d3e8標籤將會非常有用。例如，如果你想根據時間對電影進行分組，程式碼可以這樣寫：
<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>
範例：
3. eb37297a59d90581fe5571fb4ef859fe
eb37297a59d90581fe5571fb4ef859fe標籤通常用於對一句話(詞組)添加定義或更詳細的解釋。當使用者將滑鼠停留在新增了eb37297a59d90581fe5571fb4ef859fe標籤的文字上面，新增的註解或定義會在文字下方顯示。如：
微博網站 ad5878783392653c68d4889a48d0e1e1 Twitterb6f41a61ff4e4deff620eada73edefdb 最近引起了網路上的一股新的風潮！
範例：
微博網站最近引起了網路上的一股新的風潮！
4. 208700f394e4cf40a7aa505373e0130b
208700f394e4cf40a7aa505373e0130b標籤是個相當少見的標籤，但這並不代表它沒什麼用處。望文生義，208700f394e4cf40a7aa505373e0130b允許你在HTML中根據語意來標記地址。這個很好用的標籤同樣會把它內部的資料用斜體字標識，不過，這個樣式很容易透過CSS修改。
<address> 中国，上海市，闵行区，XX路，XX小区，XXX室 </address>
範例：
中國，上海市，閔行區，XX路，XX小區，XXX室
5. 426be984ffbbb815d7d88e3543a85d91 和823db3943044a0a9a620ada8d4b1d965
如果你想透過標記來顯示文件編輯樣式，426be984ffbbb815d7d88e3543a85d91和823db3943044a0a9a620ada8d4b1d965剛好可以用到。就像它們的名字，426be984ffbbb815d7d88e3543a85d91透過一個底線來突出那些被加入文件的內容，而823db3943044a0a9a620ada8d4b1d965則透過刪除線來顯示那些從中刪除的文字。
没有了驴子,我们的日子还要怎么<DEL>过下去</DEL> <INS>活下去</INS>?
範例:沒有了驢子,我們的日子還要怎麼過下去#活下去?
6. 2e1cf0710519d5598b1f0f14c36ba674
當標記文件時，表格元素很容易被遺忘。在表格元素中，最容易被遺忘的元素之一怕要數2e1cf0710519d5598b1f0f14c36ba674標籤了。但對2e1cf0710519d5598b1f0f14c36ba674標籤來說，它不僅可以相當方便的表示一段文字，同時，它更能透過for屬性來指定標籤被用於哪個元素。這些2e1cf0710519d5598b1f0f14c36ba674不僅很容易被定義樣式，它們還允許你將標籤的文字設計成像按鈕一樣可以被使用者點擊。
<LABEL for="username">用户名</LABEL> <INPUT id="username" type="text">
7. 2b5469ab79cf842344327415c3b3bb95
2b5469ab79cf842344327415c3b3bb95是相當好用的標籤，它可將表單內的相關元素按邏輯分組。一旦這些元素透過2b5469ab79cf842344327415c3b3bb95標籤放在一起，另外透過將2e1cf0710519d5598b1f0f14c36ba674標籤和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. 8a7974376be5f6c00c121222b727adb9
8a7974376be5f6c00c121222b727adb9和eb37297a59d90581fe5571fb4ef859fe是一类的标签，只是8a7974376be5f6c00c121222b727adb9标签只用于定义缩写的词组。就像eb37297a59d90581fe5571fb4ef859fe,相当于你给元素添加了一个标题或称号。当用户将鼠标悬停在缩写词上面，它的全称会在下方显示。8a7974376be5f6c00c121222b727adb9标签很少被用到，不过它对屏幕阅读器，拼写检查程序和搜索引擎很有用。
他<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. 37fcc81822f151c26d66e5caf9953670
37fcc81822f151c26d66e5caf9953670(注2)是个基本已经销声匿迹的标签。坦诚的说，我怀疑读者中的大多数都没接触过这个标签，毕竟它太少用到了(真的，在写这篇文章之前，我自己都没见过这个标签)。这个标签允许你指定一块区域来强制使用换行符，但仅仅是确实必要的时候。该元素很特殊因为它定义在浏览器中添加换行符，如果需要的话，它可以在你极力避免浏览器中出现横向的滚动条时实现符合要求的界面。
如果你想在不必使用37fcc81822f151c26d66e5caf9953670标签的情况下达到相同的效果，你也可以尝试或 。但千万注意，这三个标签中没有一个可以完全支持所有浏览器的。如果你想看看哪些浏览器支持这三种标签可以看看这篇文章。
译者注：
注1，实际上rel通常用在a和link标签中，它常和rev一起出现。
注2，wbr不是标准的html标签，它最开始是网景公司添加的，但随后被移除掉了。
附注：
这篇文章仅仅是一个参考，实际上，由于一些地方使用和解释得并不清楚, 它也引起了比较多的争论，建议如果确实对这些标签有兴趣研究的朋友，可以参看下原文地址并仔细的查看文章的一些回复。
另外有朋友认为这些少见的标签兼容性会很差，所以我们应少用。然而恰恰相反，上面列举的标签，除了最后一个不符合标准不推荐使用之外，其他都符合W3C标准，它们兼容目前任何主流浏览器。当然，由于eb37297a59d90581fe5571fb4ef859fe和8a7974376be5f6c00c121222b727adb9功能基本一样，在新的html 5标准中不推荐使用eb37297a59d90581fe5571fb4ef859fe，w3c推荐用8a7974376be5f6c00c121222b727adb9代替eb37297a59d90581fe5571fb4ef859fe。
最后有人可能认为这里的一些标签都可以用其他一些常见标签实现相同功能，因此没必要使用。不过正如回复中沉默杨仔所说：“w3c就是要语义化页面内容”，对用户说，可能你可以通过普通标签实现一样的功能，但对机器(e.g.屏幕阅读器，单词拼写检查程序，搜索引擎等)来说，这种标签它们更容易懂。所以我认为，如果你的网页中真有这些标签可以应用的场合，最好还是使用这些标签来实现相应的功能。
以上是你需要了解卻不常見的10個Html標籤的詳細內容。更多資訊請關注PHP中文網其他相關文章！