域名預(yù)訂/競(jìng)價(jià)，好“米”不錯(cuò)過(guò)

最近在讀阿當(dāng)?shù)摹禬eb前端開(kāi)發(fā)修煉之道》 ，其中有不少東西值得前端路上的朋友學(xué)習(xí)。 結(jié)合自己日常編碼的一些經(jīng)驗(yàn)， 我將陸陸續(xù)續(xù)將一些從書(shū)中學(xué)到的以及自己總結(jié)的一些前端方面的技巧分享給大家。

Html語(yǔ)義化， 似乎是一個(gè)老生常談的問(wèn)題。 Google 一下，也有大把關(guān)于語(yǔ)義化的文章。 為什么要語(yǔ)義化標(biāo)簽? 我是這樣認(rèn)為的:Html的每個(gè)標(biāo)簽都有它特定的意義，而語(yǔ)義化，就是讓我們?cè)谶m當(dāng)?shù)奈恢糜眠m當(dāng)?shù)臉?biāo)簽， 以更好的讓人和機(jī)器(機(jī)器可理解為瀏覽器可理解為搜索引擎)都一目了然。 如果我的解釋不夠明了， 請(qǐng)Google。

如何在合適的位置使用合適的標(biāo)簽?

這是一個(gè)簡(jiǎn)單的理解邏輯。 比如， h1~h6標(biāo)簽是用于標(biāo)題類(lèi)的; ul是用于無(wú)序列表的; ol是用于有充列表的; dl是用于定義列表的; em，strong標(biāo)簽是用來(lái)強(qiáng)調(diào)的…說(shuō)白了， Html標(biāo)簽的每個(gè)英文釋義決定了它的語(yǔ)義(本文后面， 我會(huì)放一份常用Html標(biāo)簽的英文釋義對(duì)照表供參考)。

什么是讓人和機(jī)器都能一目了然?

檢查Html頁(yè)面是否語(yǔ)義化最好的方法， 便是去掉頁(yè)面的Css鏈接， 看網(wǎng)頁(yè)結(jié)構(gòu)是否井然有序， 頁(yè)面是否仍然有很好的可讀性。 為什么可以這么說(shuō)? 大家都知道瀏覽器都有默認(rèn)的樣式(推薦使用Chrome的Web Developer Tools for Chrome 插件， 或者Firefox的Web Developer 插件)， 比如h1~h6， 會(huì)有加粗/字號(hào)依次減小、上下邊距的默認(rèn)樣式， ul、ol、dl都有默認(rèn)的項(xiàng)目符號(hào)， strong默認(rèn)有加粗的樣式…所以， 同樣的頁(yè)面， 語(yǔ)義化良好的Html可以在頁(yè)面Css去掉的情況下依然有良好的表現(xiàn)。

還有一點(diǎn)， 好的語(yǔ)義化編碼， 對(duì)搜索引擎有更好的友好性。 搜索蜘蛛是不認(rèn)識(shí)你的Css的， 但它能識(shí)別Html標(biāo)簽。

下面是一個(gè)簡(jiǎn)單的例子: 

<!--未語(yǔ)義化-->

<div id="header">

<div class="h1">Mr.Think的博客</div>

<div class="h2">專(zhuān)注Web前端技術(shù),熱愛(ài)Php,崇尚簡(jiǎn)單生活的凡夫俗子.</div>

</div>

<!--語(yǔ)義化之后-->

<div id="header">

<h1>Mr.Think的博客</h1>

<h2>專(zhuān)注Web前端技術(shù),熱愛(ài)Php,崇尚簡(jiǎn)單生活的凡夫俗子.</h2>

</div>

通過(guò)上面的簡(jiǎn)單的示例和沒(méi)有任何Css定義情況下的效果圖， 該明白了兩者的區(qū)別了吧。 如果你在學(xué)習(xí)Html5， 它的header、footer、sidebar、article等元素都是新增的語(yǔ)義化標(biāo)簽。

Html編碼語(yǔ)義化是邁向高質(zhì)量前端開(kāi)發(fā)的一步。 即更好的遵循Web標(biāo)準(zhǔn)， 也能讓你頁(yè)面在去掉樣式后依然井然有序。 關(guān)于語(yǔ)義化更多更詳細(xì)的介紹， 可以自行Google或閱讀阿當(dāng)?shù)摹禬eb前端開(kāi)發(fā)修煉之道》 第三章。

附: 標(biāo)簽語(yǔ)義中英文對(duì)照表

下面補(bǔ)充一下

1、什么是html語(yǔ)義化

選擇合適的html標(biāo)簽，便于開(kāi)發(fā)者閱讀和寫(xiě)出更優(yōu)雅的代碼的同時(shí)讓瀏覽器的爬蟲(chóng)和機(jī)器很好地解析。

2、為什么要語(yǔ)義化？

為了在沒(méi)有CSS的情況下，頁(yè)面也能呈現(xiàn)出很好地內(nèi)容結(jié)構(gòu)、代碼結(jié)構(gòu):為了裸奔時(shí)好看；

用戶(hù)體驗(yàn)：例如title、alt用于解釋名詞或解釋圖片信息、label標(biāo)簽的活用；

有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲(chóng)抓取更多的有效信息：爬蟲(chóng)依賴(lài)于標(biāo)簽來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重；

方便其他設(shè)備解析（如屏幕閱讀器、盲人閱讀器、移動(dòng)設(shè)備）以意義的方式來(lái)渲染網(wǎng)頁(yè)；

便于團(tuán)隊(duì)開(kāi)發(fā)和維護(hù)，語(yǔ)義化更具可讀性，是下一步吧網(wǎng)頁(yè)的重要?jiǎng)酉?，遵循W3C標(biāo)準(zhǔn)的團(tuán)隊(duì)都遵循這個(gè)標(biāo)準(zhǔn)，可以減少差異化。

3、寫(xiě)HTML代碼時(shí)應(yīng)注意什么？

1. 盡可能少的使用無(wú)語(yǔ)義的標(biāo)簽div和span；

2.在語(yǔ)義不明顯時(shí)，既可以使用div或者p時(shí)，盡量用p， 因?yàn)閜在默認(rèn)情況下有上下間距，對(duì)兼容特殊終端有利；

3.不要使用純樣式標(biāo)簽和規(guī)范不支持的標(biāo)簽，如：b、font、u、center，strike，menu等，改用css設(shè)置。

4.需要強(qiáng)調(diào)的文本，可以包含在strong或者em標(biāo)簽中（瀏覽器預(yù)設(shè)樣式，能用CSS指定就不用他們），strong默認(rèn)樣式是加粗（不要用b），em是斜體（不用i）；

5.使用表格時(shí)，標(biāo)題要用caption，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。表頭和一般單元格要區(qū)分開(kāi)，表頭用th，單元格用td；

6.表單域要用fieldset標(biāo)簽包起來(lái)，并用legend標(biāo)簽說(shuō)明表單的用途；

7.每個(gè)input標(biāo)簽對(duì)應(yīng)的說(shuō)明文本都需要使用label標(biāo)簽，并且通過(guò)為input設(shè)置id屬性，在lable標(biāo)簽中設(shè)置for=someld來(lái)讓說(shuō)明文本和相對(duì)應(yīng)的input關(guān)聯(lián)起來(lái)。

8.不要省略某些標(biāo)簽的屬性，

標(biāo)簽的alt屬性的作用是當(dāng)圖片不能正常顯示的時(shí)候的替換文字，標(biāo)簽的title屬性可作為說(shuō)明信息，并且當(dāng)鼠標(biāo)hover時(shí)顯示為提示信息。

雅虎一道面試題：

<P>  哥寫(xiě)的不是HTML，是寂寞。<br><br>  我說(shuō)：<br>不要迷戀哥，哥只是一個(gè)傳說(shuō)

其中存在的問(wèn)題：

1.html與xhtml標(biāo)準(zhǔn)的區(qū)別，xhtml有嚴(yán)謹(jǐn)?shù)慕Y(jié)構(gòu)，標(biāo)簽必須關(guān)閉，單標(biāo)簽最后需要添加/來(lái)關(guān)閉，并且標(biāo)簽都必須小寫(xiě)；

2.結(jié)構(gòu)和樣式的分離，不應(yīng)該使用

來(lái)控制樣式，合理設(shè)計(jì)結(jié)構(gòu)，換行的段落需要為每個(gè)段落都添加p，樣式需要利用css實(shí)現(xiàn);

3.合理利用標(biāo)簽，注重標(biāo)簽語(yǔ)義化，縮略可以用標(biāo)注，“我”可以用<q>標(biāo)記；

//代碼參考如下
<p>哥寫(xiě)的不是<abbr title="Hypertext Markup Language">HTML</abbr>，是寂寞。</p> 
<p><cite>我</cite>說(shuō)：<q>不要迷戀哥，哥只是一個(gè)傳說(shuō)</q></p>

以上就是Html技巧 語(yǔ)義化你的代碼 的詳細(xì)內(nèi)容，更多關(guān)于Html語(yǔ)義化的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

來(lái)源：腳本之家

鏈接：https://www.jb51.net/web/33912.html

申請(qǐng)創(chuàng)業(yè)報(bào)道，分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處，共同探討創(chuàng)業(yè)新機(jī)遇！