- 相關(guān)推薦
精選Html技巧語(yǔ)義化代碼
同學(xué)們，你們知道Html技巧語(yǔ)義化代碼嗎？對(duì)其了解多少？下面是小編收集整理的Html技巧語(yǔ)義化代碼，僅供參考，大家一起來(lái)看看吧。
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)題類的; 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)單的例子：
Html技巧 語(yǔ)義化你的代碼1
Mr。Think的博客
專注Web前端技術(shù),熱愛(ài)Php,崇尚簡(jiǎn)單生活的凡夫俗子。
Mr。Think的博客
專注Web前端技術(shù),熱愛(ài)Php,崇尚簡(jiǎn)單生活的凡夫俗子。
通過(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ì)照表
a anchor 錨 abbr abbreviation 縮寫(xiě)詞 acronym acronym 取首字母的縮寫(xiě)詞 address address 地址 b bold 粗體 big big 變大 blockquote blockquotation 區(qū)塊引用于 br break 換行 caption caption 標(biāo)題 center center 居中 dd definitiondescription 定義描述 del 刪除 div division 分隔 dl definitionlist 定義列表 dt definitionterm 定義術(shù)語(yǔ) em emphasized 加重 fieldset fieldset 域集 font font 字體 h1~h6 header1~header6 標(biāo)題1~標(biāo)題6 hr horizontalrule 水平尺 i italic 斜體 ins ed 插入 legend legend 圖標(biāo) li listitem 列表項(xiàng)目 ol orderedlist 排序列表 p paragraph 段落 pre preformatted 預(yù)定義格式 s strikethrough 刪除線 small small 變小 span span 范圍 strong strong 加重 sub subscripted 下表 sup superscripted 上標(biāo) u underlined 下劃線 ul unorderedlist 不排序列表 var variable 變量
拓展知識(shí)：什么是Web語(yǔ)義化
Web語(yǔ)義化是指使用恰當(dāng)語(yǔ)義的html標(biāo)簽、class類名等內(nèi)容，讓頁(yè)面具有良好的結(jié)構(gòu)與含義，從而讓人和機(jī)器都能快速理解網(wǎng)頁(yè)內(nèi)容。語(yǔ)義化的web頁(yè)面一方面可以讓機(jī)器在更少的人類干預(yù)情況下收集并研究網(wǎng)頁(yè)的信息，從而可以讀懂網(wǎng)頁(yè)的內(nèi)容，然后將收集匯總的信息進(jìn)行分析，結(jié)果為人類所用；另一方面它可以讓開(kāi)發(fā)人員讀懂結(jié)構(gòu)和用戶以及屏幕閱讀器（如果訪客有視障）能夠讀懂內(nèi)容。 簡(jiǎn)單來(lái)說(shuō)就是利于 SEO，便于閱讀維護(hù)理解。
總結(jié)起來(lái)就是：
正確的標(biāo)簽做正確的事情
頁(yè)面內(nèi)容結(jié)構(gòu)化
無(wú)CSS樣子時(shí)也容易閱讀，便于閱讀維護(hù)和理解
便于瀏覽器、搜索引擎解析。 利于爬蟲(chóng)標(biāo)記、利于SEO
【Html技巧語(yǔ)義化代碼】相關(guān)文章：
過(guò)濾HTML代碼08-29
php如何過(guò)濾危險(xiǎn)html代碼09-21
實(shí)現(xiàn)html方法結(jié)構(gòu)化10-01
化淡妝的小技巧08-31
化煙熏妝的技巧07-08
HTML的語(yǔ)言剖析10-13