8個(gè)你沒(méi)用過(guò)的HTML標(biāo)簽
在現(xiàn)今的網(wǎng)頁(yè)中，使用語(yǔ)義化標(biāo)簽?zāi)軌驇?lái)很多好處，但是，語(yǔ)義化到底是什么呢？為什么越來(lái)越受到重視呢？
語(yǔ)義化是指使用合理的HTML標(biāo)記以及其特有的屬性去格式化文檔內(nèi)容。通俗地講，語(yǔ)義化就是對(duì)數(shù)據(jù)和信息進(jìn)行處理，使得機(jī)器可以理解。語(yǔ)義化不關(guān)注頁(yè)面的外觀，而是關(guān)注頁(yè)面的內(nèi)容和結(jié)構(gòu)，良好的語(yǔ)義化能夠幫助人和機(jī)器更好的理解內(nèi)容和它的上下文。
語(yǔ)義化的(X)HTML文檔有助于提升你的網(wǎng)站對(duì)訪客的易用性，比如使用PDA、文字瀏覽器以及殘障人士將從中受益。對(duì)于搜索引擎或者爬蟲軟件來(lái)說(shuō)，則有助于它們建立索引，并可能給予一個(gè)較高的權(quán)值。同時(shí)，使用語(yǔ)義化可以減少很多不必要的代碼。
既然語(yǔ)義化有這么多的好處，那么如何使HTML語(yǔ)義化呢？一個(gè)最好的方法就是，把通用的HTML標(biāo)簽替換為富有表現(xiàn)力的HTML元素，下面介紹八個(gè)你可能沒(méi)有用過(guò)的HTML標(biāo)簽。
<q>標(biāo)簽
和<blockquote>一樣，<q>用于引用文本，瀏覽器通常在引用的內(nèi)容外面添加引號(hào)。那么，為什么不直接使用引號(hào)呢？因?yàn)橐?hào)并不總是表示引用，有時(shí)候引號(hào)也用作強(qiáng)調(diào)或特定的名稱等。
<i>和<b>
以前，<i>和<b>是被用作識(shí)別斜體和粗體文本。當(dāng)內(nèi)容和表現(xiàn)分離的思想廣為傳播后，<i>和<b>就讓我們覺(jué)得有點(diǎn)難受了，因?yàn)樗鼈兇淼氖俏谋救绾物@示，而不是文本的表現(xiàn)含義，取而代之的是<em>和<strong>標(biāo)簽，它們代表強(qiáng)調(diào)文本和強(qiáng)烈強(qiáng)調(diào)文本。
但是，在HTML5中，<i>和<b>被賦予了新的語(yǔ)義含義。<i>用于表達(dá)特定的語(yǔ)氣或某種類型，而不只是在布局中呈現(xiàn)樣式。而在HTML5中，<b>包含的內(nèi)容會(huì)被視為重要部分，并呈現(xiàn)為粗體。
<abbr>標(biāo)簽
<abbr>用于縮寫。在文本需要縮寫的時(shí)候使用會(huì)非常方便，<abbr>有一個(gè)可選的title屬性，它的值為未縮寫的文本。通過(guò)對(duì)縮寫詞語(yǔ)進(jìn)行標(biāo)記，您就能夠?yàn)闉g覽器、拼寫檢查程序、翻譯系統(tǒng)以及搜索引擎分度器提供有用的信息。
XHTML
|
1 2 3 4 5 6 |
<abbr title="laugh out loud">lol</abbr> <abbr title="I don't know">idk</abbr> <abbr title="got to go">g2g</abbr> <abbr title="talk to you later">ttyl</abbr>
|
<time>標(biāo)簽
讓我們先看一個(gè)典型的本地化問(wèn)題：日期。在美國(guó)，2014年4月8日用04/08/14表示。在英國(guó)，用08/04/14表示。在荷蘭，用08-04-14表示。在俄羅斯，用08.04.14表示。這樣就導(dǎo)致機(jī)器很難閱讀。<time>標(biāo)簽語(yǔ)序你使用機(jī)器可讀的格式表示日期和時(shí)間，比如：<timedatetime=”2014-04-08″>04/08/14</time>，這樣，無(wú)論它被如何格式化，HTML解析器都可以使用這個(gè)來(lái)確定確切的時(shí)間，還可以這樣用<time datetime=”2014-04-0822:00″>04/08/14 at 10 PM</time>。
<mark>標(biāo)簽
曾經(jīng)你是否寫過(guò)這樣的HTML代碼：
XHTML
|
1 2 3 4 5 |
<p> Three hundred pages of boring, useless text. <span>The one thing you need to know and will never be able to find again if you don't highlight it.</span> More boring stuff… </p>
|
好了，現(xiàn)在你不需要再這樣寫了，HTML5引入了<mark>標(biāo)簽，它表示突出顯示的文本，比如：
XHTML
|
1 2 3 4 5 6 7 8 |
<!DOCTYPE HTML> <html> <body> <p>Do not forget to buy <mark>milk</mark> today.</p> </body> </html>
|
<input>標(biāo)簽
也許你已經(jīng)用過(guò)<inputtype=”text” />，<inputtype=”submit” />或者<inputtype=”hidden” />。但是，你用過(guò)其他的類型嗎？在HTML5中，<input />可以用于更多的類型：
-
email
-
tel
-
number
-
range
-
date
-
time
-
search
-
color
這些類型的不錯(cuò)，但是使用前一定要看看瀏覽器是否支持，某些類型還沒(méi)有得到所有主流瀏覽器的支持。
<menu>標(biāo)簽
曾經(jīng)你是否這樣定義過(guò)一個(gè)菜單：
XHTML
|
1 2 3 4 5 6 7 8 |
<ul> <li>New</li> <li>Open</li> <li>Save</li> <li>Quit</li> </ul>
|
現(xiàn)在，你也不需要再這樣寫了，<menu>就是專門為定義菜單導(dǎo)航而設(shè)計(jì)的，<menu>中的內(nèi)容會(huì)表現(xiàn)為一個(gè)無(wú)序列表它的type屬性可以設(shè)置為popup或者toolbar，如：
XHTML
|
1 2 3 4 5 6 7 8 |
<menu type="toolbar"> <li>New</li> <li>Open</li> <li>Save</li> <li>Quit</li> </menu>
|
穩(wěn)定
產(chǎn)品高可用性高并發(fā)貼心
項(xiàng)目群及時(shí)溝通專業(yè)
產(chǎn)品經(jīng)理1v1支持快速
MVP模式小步快跑承諾
我們選擇聲譽(yù)堅(jiān)持
10年專注高端品質(zhì)開(kāi)發(fā)