這個(gè)實(shí)際就是定義了你的文檔模型，是用xhtml 1.0標(biāo)準(zhǔn)去解釋的。

但是到了后來(lái)網(wǎng)頁(yè)排版越來(lái)越復(fù)雜，僅僅是靠這些html標(biāo)記無(wú)法做出漂亮，美觀(guān)的頁(yè)面，必須還得輔助一些其它的工具，比如我想讓某個(gè)圖片偏移20px，又或者想文字間隔5px，僅僅靠html實(shí)現(xiàn)實(shí)在是比登天還難。這個(gè)時(shí)候W3C又坐不住了，于是乎又站出來(lái)呼吁：“我們?cè)俣x一些東西可能實(shí)現(xiàn)這個(gè)功能”，在經(jīng)過(guò)無(wú)數(shù)次的討論之后，CSS 1.0的標(biāo)準(zhǔn)出臺(tái)了。用這個(gè)可以很簡(jiǎn)單的實(shí)現(xiàn)內(nèi)容偏移，間隔等效果。經(jīng)過(guò)發(fā)展，到后面的css 2.0，css 3.0。所有人在用CSS定義樣式的時(shí)候，都必須遵循這個(gè)標(biāo)準(zhǔn)。

再到了后面，人們又發(fā)現(xiàn)僅靠html和CSS還是不完美。它缺乏人機(jī)界面的交互，無(wú)法實(shí)現(xiàn)動(dòng)態(tài)的效果。要是能讓網(wǎng)頁(yè)上的東西動(dòng)起來(lái)就更完美了，于是w3c又出臺(tái)了emascript標(biāo)準(zhǔn)，他規(guī)定了文檔對(duì)象模型接口。語(yǔ)法等內(nèi)容。比如大家常用的javascript就是符合emascript標(biāo)準(zhǔn)的。

OK，到了現(xiàn)在一切似乎都完美了。有了html標(biāo)準(zhǔn)，有了css標(biāo)準(zhǔn)，也有了emascript標(biāo)準(zhǔn)，我們終于可以做出很好看的網(wǎng)頁(yè)了，我們把這些標(biāo)準(zhǔn)收聚在一起，就形成了web標(biāo)準(zhǔn)，那么什么樣的網(wǎng)頁(yè)才是符合web標(biāo)準(zhǔn)的：

比如一段html是這樣寫(xiě)的

那么這段代碼是否符合web標(biāo)準(zhǔn)呢，我們?cè)賮?lái)分析這些代碼，第一行你定義了你的文檔類(lèi)型是xhtml 1.0，也就是說(shuō)你的所有html標(biāo)簽的寫(xiě)法必須遵行這個(gè)標(biāo)準(zhǔn)，在body內(nèi)的第一個(gè)p>標(biāo)簽中,font標(biāo)簽已經(jīng)在這個(gè)標(biāo)準(zhǔn)中被棄用了，color屬性也在這個(gè)標(biāo)簽中被棄用了,所以這段話(huà)不符合web標(biāo)準(zhǔn)，再來(lái)看img>標(biāo)簽，它的align屬性定義了圖片的對(duì)齊方式，但缺少了alt屬性，在xhtml 1.0標(biāo)準(zhǔn)中，img是必須定義alt屬性的.所以這段代碼也不符合1.0的標(biāo)準(zhǔn),再看dl標(biāo)簽,dt定義了標(biāo)題,嵌套了h1>標(biāo)簽，根據(jù)xhtml 1.0的定義。dt>標(biāo)簽中不允許嵌套h1>標(biāo)簽,所以同樣也不符合1.0標(biāo)準(zhǔn),再看最后一個(gè)b>標(biāo)簽，謝天謝地。這個(gè)標(biāo)簽終于符合web標(biāo)準(zhǔn)了。但是w3c已經(jīng)說(shuō)了。我們暫時(shí)保留這個(gè)標(biāo)簽的意義。不過(guò)還是推薦大家使用strong>標(biāo)簽，這個(gè)語(yǔ)義性更強(qiáng)。在后面新的標(biāo)準(zhǔn)中，我們可能取消b>標(biāo)簽做為標(biāo)準(zhǔn)標(biāo)簽。關(guān)于html標(biāo)準(zhǔn)的約束請(qǐng)大家查看相應(yīng)文檔。

 說(shuō)到這里。我想大家都明白了。這個(gè)頁(yè)面連xmhtml 1.0標(biāo)準(zhǔn)都不符合，那么肯定也不符合web標(biāo)準(zhǔn)了，至于符不符合web標(biāo)準(zhǔn)，完全在于你定義的版本.但是這段段碼在瀏覽器中是可以正常解析的，因?yàn)槲覀兦懊嬲f(shuō)過(guò)，標(biāo)準(zhǔn)都是向前兼容的，只是不符合你現(xiàn)在所定義的標(biāo)準(zhǔn)而已，那么我該如何讓這段代碼符合我的web標(biāo)準(zhǔn)呢。只有兩種辦法。1.降低你的文檔模型的標(biāo)準(zhǔn)（這樣可能帶來(lái)更多的麻煩）2.重新修改你的代碼,比如把顏色放到style屬性中,img加上alt屬性.相比起來(lái)，我們更愿意選擇第二種.

網(wǎng)絡(luò)上有一種解釋?zhuān)簑eb標(biāo)準(zhǔn)=div+css.不能用table布局.看了上面的文章，我們不難理解。這個(gè)概念純粹是混淆視聽(tīng).以偏概全.不能說(shuō)table布局的網(wǎng)頁(yè)就不符合web標(biāo)準(zhǔn)，w3c從來(lái)沒(méi)有定義過(guò)用table布局就不符合標(biāo)準(zhǔn)。table>標(biāo)簽一直都是各個(gè)版本的標(biāo)準(zhǔn)標(biāo)簽。雖然我們都是用div來(lái)布局,但我們要明白：別人推薦的做法不等于標(biāo)準(zhǔn)。

前面說(shuō)到，web標(biāo)準(zhǔn)取決于我們?cè)趯?xiě)html/css/js時(shí)所定義的版本，比如我html用的是xhtml 1.0標(biāo)準(zhǔn)，那么我的html也應(yīng)該是要符合x(chóng)html 1.0規(guī)范的。但是事實(shí)似乎并不是這樣，互聯(lián)網(wǎng)上幾乎接近99.999%的網(wǎng)頁(yè)都無(wú)法通過(guò)驗(yàn)證，總是有這樣或那樣的錯(cuò)誤，w3c的官方網(wǎng)站:http://www.w3.org所有頁(yè)面都是可以通過(guò)驗(yàn)證的,有興趣的朋友可以去測(cè)試下，說(shuō)到這里，我們的文章似乎走入了一個(gè)死胡同，既然這么多的網(wǎng)頁(yè)不符合web標(biāo)準(zhǔn)，他們同樣也能取得很好的排名和流量，那web標(biāo)準(zhǔn)與SEO到底還有啥聯(lián)系呢，這個(gè)還得從html結(jié)構(gòu)和解析說(shuō)起.

網(wǎng)頁(yè)設(shè)計(jì)中強(qiáng)調(diào)結(jié)構(gòu)(html)和表現(xiàn)(css)分離,我們可以這樣去理解它們的概念。結(jié)構(gòu)是一幢房子。是鋼筋水泥和磚堆成的架子，而表現(xiàn)是對(duì)結(jié)構(gòu)的裝修和修飾，他就像裝修，給房子裝了地板，墻面抹了石灰和油漆。沒(méi)有了結(jié)構(gòu)，表現(xiàn)也就沒(méi)有了實(shí)際表現(xiàn)的價(jià)值，這也是為什么在xhtml 1.0 strict及其更高的標(biāo)準(zhǔn)中取消了font color="#ccc" size="12">文本/font>或之類(lèi)的標(biāo)簽或性性，因?yàn)閷?duì)于結(jié)構(gòu)來(lái)說(shuō)，它更像是一種表現(xiàn)，它應(yīng)該呆在表現(xiàn)層也就是CSS之中，如果我們?cè)趚html 1.0 strict頁(yè)面應(yīng)用了font標(biāo)簽，實(shí)際上它也可以正確解析，因?yàn)樵诘谝黄形覀冋f(shuō)過(guò)，標(biāo)準(zhǔn)都是向前兼容的。

我們?cè)賮?lái)理解瀏覽器和搜索引擎如何來(lái)解析我們的html,為什么在這里說(shuō)到瀏覽器，因?yàn)樵谖铱磥?lái)搜索引擎和瀏覽器在解析html的時(shí)候它們的方法大致是一樣的，當(dāng)網(wǎng)頁(yè)抓取下來(lái)之后，就開(kāi)始了html的解析，它最終會(huì)把整個(gè)頁(yè)面解析成一棵擁有嚴(yán)格父子關(guān)系節(jié)點(diǎn)的dom樹(shù)。然后再呈現(xiàn)給用戶(hù),比如當(dāng)我寫(xiě)了如下這段代碼：

 可以看到這是一段xhtml 1.0過(guò)渡標(biāo)準(zhǔn)下的html.卻有很多錯(cuò)誤(錯(cuò)誤包括：第一個(gè)div中h1>標(biāo)簽沒(méi)有結(jié)束標(biāo)簽.img沒(méi)有alt屬性。p>標(biāo)簽也沒(méi)有結(jié)束標(biāo)簽)，但是如果把這段代碼放到瀏覽器中去執(zhí)行，卻可以看到正確的效果，h1>標(biāo)簽起作用了。P標(biāo)簽也起作用了,圖片也能顯示出來(lái)了，我們很奇怪為什么這段代碼連標(biāo)簽都沒(méi)寫(xiě)對(duì)為什么在瀏覽器中卻能正確解析,如果我們假設(shè)這段代碼是沒(méi)有錯(cuò)的，它正確的dom結(jié)構(gòu)應(yīng)該為下(圖一)所示

瀏覽器為什么能把錯(cuò)誤的代碼給正確解析出來(lái)呢？而且似乎能“猜測(cè)”到錯(cuò)誤代碼的真實(shí)意圖。原理就在于瀏覽器在構(gòu)建標(biāo)簽樹(shù)的時(shí)候，使用了詞典分析模式和整理模式（html tidy）。簡(jiǎn)單的說(shuō)，瀏覽器會(huì)把所有的標(biāo)簽及屬性與內(nèi)置的詞典里面的信息去匹配，如果匹配正常，就直接解析，如果匹配不正常。就啟用整理模式，整理模式會(huì)分析你錯(cuò)誤的代碼并進(jìn)行修復(fù)，比如將上面結(jié)尾處的h1>，p>標(biāo)簽自動(dòng)改為結(jié)束標(biāo)記，又比如你寫(xiě)入了一個(gè)jiacu>文本/jiacu>的標(biāo)簽對(duì)。這個(gè)根本匹配不到，也無(wú)法修復(fù)。它就會(huì)將這個(gè)無(wú)效的標(biāo)簽對(duì)直接清除掉，僅保留里面的文字。當(dāng)然瀏覽將html解析成dom樹(shù)時(shí)它并不會(huì)更改你的html源代碼，它只是一種解析的動(dòng)作，所以很多時(shí)候我們頁(yè)面的html錯(cuò)誤我們不去做驗(yàn)證，是不會(huì)發(fā)現(xiàn)這些錯(cuò)誤的，因?yàn)闉g覽器已經(jīng)自動(dòng)給我們修復(fù)了。通常來(lái)說(shuō).瀏覽器對(duì)html中的錯(cuò)誤保證了充分的兼容性。能幫你修正的就修正。多余的標(biāo)簽或?qū)傩阅芮宄颓宄?，無(wú)法清除和修正的就自動(dòng)幫你將標(biāo)簽剔除以保證正常顯示。

但是“整理模式”并不是萬(wàn)能的，我們不能苛求瀏覽器能幫我們修復(fù)所有的錯(cuò)誤，所以很多時(shí)候當(dāng)我們的頁(yè)面嵌套層次越來(lái)越深，標(biāo)簽越來(lái)越多，內(nèi)容越來(lái)越多的時(shí)候，在瀏覽器無(wú)法修正標(biāo)簽的時(shí)候，它唯一能做的就是“將某個(gè)錯(cuò)誤塊內(nèi)的所有標(biāo)簽全部去除，僅保留內(nèi)容”。

從搜索引擎的角度來(lái)講，在分析內(nèi)容之前它的前提也跟瀏覽器一樣要先構(gòu)建一棵完整的dom樹(shù)，只有當(dāng)這棵樹(shù)構(gòu)建完成，搜索引擎才能確定頁(yè)面中上下文的關(guān)系，以及你在頁(yè)面中使用了哪些加權(quán)（如strong>,h1>）的標(biāo)簽，以及它們的分布位置等等。但是搜索引擎在解析時(shí)更強(qiáng)調(diào)“內(nèi)容塊”的概念，即一個(gè)標(biāo)簽一個(gè)塊。還是以上html的例子。當(dāng)搜索引擎在構(gòu)建這個(gè)dom樹(shù)時(shí)，當(dāng)它解析到第一個(gè)div內(nèi)的h1>標(biāo)簽時(shí)，發(fā)現(xiàn)這里出現(xiàn)了錯(cuò)誤，解析到P標(biāo)簽的時(shí)候，又遇到了錯(cuò)誤，這個(gè)時(shí)候?yàn)榱苏_構(gòu)建這棵dom樹(shù)，它會(huì)啟用整理模式，但這個(gè)時(shí)候的模式可能并不是幫你修復(fù)錯(cuò)誤，而是以“塊”為單位。查找錯(cuò)誤塊(節(jié)點(diǎn))的上級(jí)塊(節(jié)點(diǎn))（如果上一級(jí)還有錯(cuò)誤，則繼續(xù)往上一級(jí)查找）,如果上一級(jí)塊沒(méi)有錯(cuò)誤，則將這個(gè)上級(jí)塊內(nèi)的所有子塊及子子塊有錯(cuò)誤的標(biāo)簽全部剔除，也就是說(shuō)把div id="top">之內(nèi)的所有有錯(cuò)誤的標(biāo)簽全部剔除，最終構(gòu)建的dom樹(shù)則為上面圖二所示(2011.4.5 修正：圖二中有一處小錯(cuò)誤，左側(cè)的div標(biāo)簽下是還有img標(biāo)簽的)。

這樣一來(lái)，我們看到自己精心寫(xiě)入的h1>和strong>標(biāo)簽在解析后都不見(jiàn)了，整個(gè)塊的“權(quán)重”發(fā)生了偏移，根據(jù)html解析原理，我們很容易能得出一些結(jié)論：

1.當(dāng)頁(yè)面節(jié)點(diǎn)層次越來(lái)越多的時(shí)候，我們要特別小心標(biāo)簽層次的錯(cuò)誤，越是接近頂層的的節(jié)點(diǎn)越是要小心，比如少寫(xiě)了結(jié)束標(biāo)簽，這個(gè)影響對(duì)seo也許是致命的.

2.不論你用什么布局，節(jié)點(diǎn)嵌套層次是越少越好，一來(lái)可以減小搜索引擎解析節(jié)點(diǎn)時(shí)的負(fù)擔(dān)，二來(lái)搜索引擎更容易確定節(jié)點(diǎn)之間（上下文）的關(guān)系，第二點(diǎn)對(duì)關(guān)鍵詞的加權(quán)很重要。

3.當(dāng)標(biāo)簽的屬性能用css替代時(shí)，則盡可能移到css中去.

4.瀏覽器和搜索引擎都允許html錯(cuò)誤，但標(biāo)準(zhǔn)的html在外部條件相同的情況，顯然更容易獲得更好的排名。

寫(xiě)這篇文章花了我近四個(gè)小時(shí)，有些地方講得還不是很透徹，在第三篇文章中再分享吧。

文章來(lái)源：光年論壇 （轉(zhuǎn)載請(qǐng)注明出處鏈接及作者）

文章作者：newyhj