XHTML標(biāo)簽語(yǔ)義化介紹
發(fā)布時(shí)間:2011-01-25 12:52:52 作者:佚名
我要評(píng)論
前兩天參加了公司組織的一個(gè)WD培訓(xùn),有一節(jié)課講了標(biāo)簽語(yǔ)義化,聽(tīng)了之后感覺(jué)特別有用,更正了我以前對(duì) HTML 和 CSS 的錯(cuò)誤看法。
首先說(shuō)明的一點(diǎn)是,人可以通過(guò)視覺(jué)的劃分判斷內(nèi)容的語(yǔ)義,搜索引擎看到的只是代碼。搜索引擎只能通過(guò)標(biāo)簽來(lái)判斷內(nèi)容的語(yǔ)義。 以前我真的沒(méi)有怎么重視過(guò)搜索引擎,現(xiàn)在開(kāi)始比較在意了,因?yàn)轫?yè)面的很大一部分流量是來(lái)自搜索引擎的,要使頁(yè)面盡可能地對(duì)搜索引擎友好,所以就要盡可能地使標(biāo)簽語(yǔ)義化。
以前以我對(duì)web開(kāi)發(fā)的粗淺理解,覺(jué)得寫(xiě)一個(gè)好的符合標(biāo)準(zhǔn)的頁(yè)面只需要把結(jié)構(gòu)和表現(xiàn)分離,然后不要使用table,font等標(biāo)簽就行了,至于通篇都是div我也不會(huì)覺(jué)得有什么問(wèn)題,因?yàn)镃SS很強(qiáng)大。但是,所有的標(biāo)簽都是有自己的語(yǔ)義的,下面給出一部分標(biāo)簽的語(yǔ)義:
div 語(yǔ)義:Division(分隔)
span 語(yǔ)義:Span(范圍)
ol 語(yǔ)義:Ordered List(排序列表)
ul 語(yǔ)義:Unordered List(不排序列表)
li 語(yǔ)義:List Item(列表項(xiàng)目)
…………
如果無(wú)視標(biāo)簽語(yǔ)義和默認(rèn)樣式,所有標(biāo)簽都用div,其實(shí)也是可以寫(xiě)出來(lái)視覺(jué)效果很好的頁(yè)面,只要你靈活運(yùn)用CSS。但是那樣的話雖然視覺(jué)上達(dá)到了要求,但是整個(gè)頁(yè)面一點(diǎn)語(yǔ)義都沒(méi)有,搜索引擎還是看不懂。所以,要記?。?
結(jié)構(gòu)(html)才是重點(diǎn),樣式(css)是用來(lái)修飾結(jié)構(gòu)的。所以,要先確定html,確定標(biāo)簽,再來(lái)選用合適的css。
一般來(lái)說(shuō),所有的標(biāo)簽都會(huì)有一個(gè)默認(rèn)的樣式,所以一個(gè)簡(jiǎn)單的判斷網(wǎng)頁(yè)標(biāo)簽語(yǔ)義是否良好的方法就是:去掉樣式,看網(wǎng)頁(yè)結(jié)構(gòu)是否組織良好有序,是否仍然有很好的可讀性。
另外,值得重點(diǎn)提及的是h標(biāo)簽,h標(biāo)簽的語(yǔ)意是標(biāo)題,搜索引擎對(duì)這個(gè)標(biāo)簽比較敏感,特別是h1,和h2。一個(gè)語(yǔ)義良好的頁(yè)面,h標(biāo)簽應(yīng)該是完整有序沒(méi)有斷層的。也就是說(shuō),要h1,h2,h3,h4這樣推下來(lái),不要h1,h3,h4,漏掉h2。一個(gè)結(jié)構(gòu)良好的網(wǎng)頁(yè),h標(biāo)簽可以組織起一個(gè)網(wǎng)頁(yè)的大綱。
以前以我對(duì)web開(kāi)發(fā)的粗淺理解,覺(jué)得寫(xiě)一個(gè)好的符合標(biāo)準(zhǔn)的頁(yè)面只需要把結(jié)構(gòu)和表現(xiàn)分離,然后不要使用table,font等標(biāo)簽就行了,至于通篇都是div我也不會(huì)覺(jué)得有什么問(wèn)題,因?yàn)镃SS很強(qiáng)大。但是,所有的標(biāo)簽都是有自己的語(yǔ)義的,下面給出一部分標(biāo)簽的語(yǔ)義:
div 語(yǔ)義:Division(分隔)
span 語(yǔ)義:Span(范圍)
ol 語(yǔ)義:Ordered List(排序列表)
ul 語(yǔ)義:Unordered List(不排序列表)
li 語(yǔ)義:List Item(列表項(xiàng)目)
…………
如果無(wú)視標(biāo)簽語(yǔ)義和默認(rèn)樣式,所有標(biāo)簽都用div,其實(shí)也是可以寫(xiě)出來(lái)視覺(jué)效果很好的頁(yè)面,只要你靈活運(yùn)用CSS。但是那樣的話雖然視覺(jué)上達(dá)到了要求,但是整個(gè)頁(yè)面一點(diǎn)語(yǔ)義都沒(méi)有,搜索引擎還是看不懂。所以,要記?。?
結(jié)構(gòu)(html)才是重點(diǎn),樣式(css)是用來(lái)修飾結(jié)構(gòu)的。所以,要先確定html,確定標(biāo)簽,再來(lái)選用合適的css。
一般來(lái)說(shuō),所有的標(biāo)簽都會(huì)有一個(gè)默認(rèn)的樣式,所以一個(gè)簡(jiǎn)單的判斷網(wǎng)頁(yè)標(biāo)簽語(yǔ)義是否良好的方法就是:去掉樣式,看網(wǎng)頁(yè)結(jié)構(gòu)是否組織良好有序,是否仍然有很好的可讀性。
另外,值得重點(diǎn)提及的是h標(biāo)簽,h標(biāo)簽的語(yǔ)意是標(biāo)題,搜索引擎對(duì)這個(gè)標(biāo)簽比較敏感,特別是h1,和h2。一個(gè)語(yǔ)義良好的頁(yè)面,h標(biāo)簽應(yīng)該是完整有序沒(méi)有斷層的。也就是說(shuō),要h1,h2,h3,h4這樣推下來(lái),不要h1,h3,h4,漏掉h2。一個(gè)結(jié)構(gòu)良好的網(wǎng)頁(yè),h標(biāo)簽可以組織起一個(gè)網(wǎng)頁(yè)的大綱。
相關(guān)文章
- 這篇文章主要介紹了HTML5語(yǔ)義化元素的相關(guān)知識(shí),非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2019-08-22
- HTML5 只有一個(gè)簡(jiǎn)單的文檔類型:<!DOCTYPE html>,表示瀏覽器會(huì)按照標(biāo)準(zhǔn)模式解析。今天小編給大家?guī)?lái)了HTML5新特性之語(yǔ)義化標(biāo)簽,感興趣的朋友一起看看吧2017-10-31
- b 和 i 標(biāo)簽在現(xiàn)在的 Web 標(biāo)準(zhǔn)潛規(guī)則中是不推薦使用,甚至是反對(duì)使用的,因?yàn)檎J(rèn)為他們只是“表現(xiàn)”粗體和斜體,而沒(méi)有任何“語(yǔ)義”。更多的用 strong2008-10-17
HTML5 語(yǔ)義化結(jié)構(gòu)化規(guī)范化
HTML結(jié)構(gòu)更加清晰、規(guī)范,學(xué)習(xí)HTML5優(yōu)化結(jié)構(gòu)的思路。 HTML5添加了一些新元素,用來(lái)標(biāo)識(shí)常用的結(jié)構(gòu),是html更具語(yǔ)義化,可是我們無(wú)法直接使用,即使可能用到還要等他個(gè)十年2008-10-17- 本篇文章小編為大家介紹HTML標(biāo)簽語(yǔ)義化(含H5) ,有需要的朋友可以參考一下2013-04-08
這篇文章主要介紹了詳解HTML5常用的語(yǔ)義化標(biāo)簽的相關(guān)資料,需要的朋友可以參考下2019-09-27淺談HTML的語(yǔ)義化和一些簡(jiǎn)單優(yōu)化
下面小編就為大家?guī)?lái)一篇淺談HTML的語(yǔ)義化和一些簡(jiǎn)單優(yōu)化。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-12淺談?wù)Z義化的HTML結(jié)構(gòu)到底有什么好處
下面小編就為大家?guī)?lái)一篇淺談?wù)Z義化的HTML結(jié)構(gòu)到底有什么好處。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-05使用語(yǔ)義化標(biāo)簽去寫(xiě)你的HTML 兼容IE6,7,8
下面小編就為大家?guī)?lái)一篇使用語(yǔ)義化標(biāo)簽去寫(xiě)你的HTML 兼容IE6,7,8。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考,一起跟隨小編過(guò)來(lái)看看吧2016-04-14- html標(biāo)簽語(yǔ)義:即html標(biāo)簽的含義2012-11-17


