| !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
這個實際就是定義了你的文檔模型，是用xhtml 1.0標準去解釋的。
但是到了后來網(wǎng)頁排版越來越復雜，僅僅是靠這些html標記無法做出漂亮，美觀的頁面，必須還得輔助一些其它的工具，比如我想讓某個圖片偏移20px，又或者想文字間隔5px，僅僅靠html實現(xiàn)實在是比登天還難。這個時候W3C又坐不住了，于是乎又站出來呼吁：“我們再定義一些東西可能實現(xiàn)這個功能”，在經(jīng)過無數(shù)次的討論之后，CSS 1.0的標準出臺了。用這個可以很簡單的實現(xiàn)內(nèi)容偏移，間隔等效果。經(jīng)過發(fā)展，到后面的css 2.0，css 3.0。所有人在用CSS定義樣式的時候，都必須遵循這個標準。
再到了后面，人們又發(fā)現(xiàn)僅靠html和CSS還是不完美。它缺乏人機界面的交互，無法實現(xiàn)動態(tài)的效果。要是能讓網(wǎng)頁上的東西動起來就更完美了，于是w3c又出臺了emascript標準，他規(guī)定了文檔對象模型接口。語法等內(nèi)容。比如大家常用的javascript就是符合emascript標準的。
OK，到了現(xiàn)在一切似乎都完美了。有了html標準，有了css標準，也有了emascript標準，我們終于可以做出很好看的網(wǎng)頁了，我們把這些標準收聚在一起，就形成了web標準，那么什么樣的網(wǎng)頁才是符合web標準的：
比如一段html是這樣寫的
| !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> html> head> title>demo/title> /head> body> p>font color="#ff0000">正文內(nèi)容/font>p> img src="x.jpg" /> dl> dt>h1>標題/h1>/dt> dd>內(nèi)容/dd> dd>內(nèi)容/dd> dl> b>內(nèi)容/b> /body> |
那么這段代碼是否符合web標準呢，我們再來分析這些代碼，第一行你定義了你的文檔類型是xhtml 1.0，也就是說你的所有html標簽的寫法必須遵行這個標準，在body內(nèi)的第一個p>標簽中,font標簽已經(jīng)在這個標準中被棄用了，color屬性也在這個標簽中被棄用了,所以這段話不符合web標準，再來看img>標簽，它的align屬性定義了圖片的對齊方式，但缺少了alt屬性，在xhtml 1.0標準中，img是必須定義alt屬性的.所以這段代碼也不符合1.0的標準,再看dl標簽,dt定義了標題,嵌套了h1>標簽，根據(jù)xhtml 1.0的定義。dt>標簽中不允許嵌套h1>標簽,所以同樣也不符合1.0標準,再看最后一個b>標簽，謝天謝地。這個標簽終于符合web標準了。但是w3c已經(jīng)說了。我們暫時保留這個標簽的意義。不過還是推薦大家使用strong>標簽，這個語義性更強。在后面新的標準中，我們可能取消b>標簽做為標準標簽。關于html標準的約束請大家查看相應文檔。
說到這里。我想大家都明白了。這個頁面連xmhtml 1.0標準都不符合，那么肯定也不符合web標準了，至于符不符合web標準，完全在于你定義的版本.但是這段段碼在瀏覽器中是可以正常解析的，因為我們前面說過，標準都是向前兼容的，只是不符合你現(xiàn)在所定義的標準而已，那么我該如何讓這段代碼符合我的web標準呢。只有兩種辦法。1.降低你的文檔模型的標準（這樣可能帶來更多的麻煩）2.重新修改你的代碼,比如把顏色放到style屬性中,img加上alt屬性.相比起來，我們更愿意選擇第二種.
網(wǎng)絡上有一種解釋：web標準=div+css.不能用table布局.看了上面的文章，我們不難理解。這個概念純粹是混淆視聽.以偏概全.不能說table布局的網(wǎng)頁就不符合web標準，w3c從來沒有定義過用table布局就不符合標準。table>標簽一直都是各個版本的標準標簽。雖然我們都是用div來布局,但我們要明白：別人推薦的做法不等于標準。
前面說到，web標準取決于我們在寫html/css/js時所定義的版本，比如我html用的是xhtml 1.0標準，那么我的html也應該是要符合xhtml 1.0規(guī)范的。但是事實似乎并不是這樣，互聯(lián)網(wǎng)上幾乎接近99.999%的網(wǎng)頁都無法通過驗證，總是有這樣或那樣的錯誤，w3c的官方網(wǎng)站:http://www.w3.org所有頁面都是可以通過驗證的,有興趣的朋友可以去測試下，說到這里，我們的文章似乎走入了一個死胡同，既然這么多的網(wǎng)頁不符合web標準，他們同樣也能取得很好的排名和流量，那web標準與SEO到底還有啥聯(lián)系呢，這個還得從html結(jié)構(gòu)和解析說起.
網(wǎng)頁設計中強調(diào)結(jié)構(gòu)(html)和表現(xiàn)(css)分離,我們可以這樣去理解它們的概念。結(jié)構(gòu)是一幢房子。是鋼筋水泥和磚堆成的架子，而表現(xiàn)是對結(jié)構(gòu)的裝修和修飾，他就像裝修，給房子裝了地板，墻面抹了石灰和油漆。沒有了結(jié)構(gòu)，表現(xiàn)也就沒有了實際表現(xiàn)的價值，這也是為什么在xhtml 1.0 strict及其更高的標準中取消了font color="#ccc" size="12">文本/font>或之類的標簽或性性，因為對于結(jié)構(gòu)來說，它更像是一種表現(xiàn)，它應該呆在表現(xiàn)層也就是CSS之中，如果我們在xhtml 1.0 strict頁面應用了font標簽，實際上它也可以正確解析，因為在第一篇中我們說過，標準都是向前兼容的。
我們再來理解瀏覽器和搜索引擎如何來解析我們的html,為什么在這里說到瀏覽器，因為在我看來搜索引擎和瀏覽器在解析html的時候它們的方法大致是一樣的，當網(wǎng)頁抓取下來之后，就開始了html的解析，它最終會把整個頁面解析成一棵擁有嚴格父子關系節(jié)點的dom樹。然后再呈現(xiàn)給用戶,比如當我寫了如下這段代碼：
| !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> html xmlns="http://www.w3.org/1999/xhtml"> head> title>標題/title> /head> body> div id="top"> h1>這是標題h1> img src="xx.jpg"/> p>這是一段strong>文本/strong>內(nèi)容p> /div> div id="container"> h2>這是另一個標題/h2> p>這是另一段strong>文本/strong>/p> /div> /body> /html> |
可以看到這是一段xhtml 1.0過渡標準下的html.卻有很多錯誤(錯誤包括：第一個div中h1>標簽沒有結(jié)束標簽.img沒有alt屬性。p>標簽也沒有結(jié)束標簽)，但是如果把這段代碼放到瀏覽器中去執(zhí)行，卻可以看到正確的效果，h1>標簽起作用了。P標簽也起作用了,圖片也能顯示出來了，我們很奇怪為什么這段代碼連標簽都沒寫對為什么在瀏覽器中卻能正確解析,如果我們假設這段代碼是沒有錯的，它正確的dom結(jié)構(gòu)應該為下(圖一)所示
瀏覽器為什么能把錯誤的代碼給正確解析出來呢？而且似乎能“猜測”到錯誤代碼的真實意圖。原理就在于瀏覽器在構(gòu)建標簽樹的時候，使用了詞典分析模式和整理模式（html tidy）。簡單的說，瀏覽器會把所有的標簽及屬性與內(nèi)置的詞典里面的信息去匹配，如果匹配正常，就直接解析，如果匹配不正常。就啟用整理模式，整理模式會分析你錯誤的代碼并進行修復，比如將上面結(jié)尾處的h1>，p>標簽自動改為結(jié)束標記，又比如你寫入了一個jiacu>文本/jiacu>的標簽對。這個根本匹配不到，也無法修復。它就會將這個無效的標簽對直接清除掉，僅保留里面的文字。當然瀏覽將html解析成dom樹時它并不會更改你的html源代碼，它只是一種解析的動作，所以很多時候我們頁面的html錯誤我們不去做驗證，是不會發(fā)現(xiàn)這些錯誤的，因為瀏覽器已經(jīng)自動給我們修復了。通常來說.瀏覽器對html中的錯誤保證了充分的兼容性。能幫你修正的就修正。多余的標簽或?qū)傩阅芮宄颓宄瑹o法清除和修正的就自動幫你將標簽剔除以保證正常顯示。
但是“整理模式”并不是萬能的，我們不能苛求瀏覽器能幫我們修復所有的錯誤，所以很多時候當我們的頁面嵌套層次越來越深，標簽越來越多，內(nèi)容越來越多的時候，在瀏覽器無法修正標簽的時候，它唯一能做的就是“將某個錯誤塊內(nèi)的所有標簽全部去除，僅保留內(nèi)容”。
從搜索引擎的角度來講，在分析內(nèi)容之前它的前提也跟瀏覽器一樣要先構(gòu)建一棵完整的dom樹，只有當這棵樹構(gòu)建完成，搜索引擎才能確定頁面中上下文的關系，以及你在頁面中使用了哪些加權（如strong>,h1>）的標簽，以及它們的分布位置等等。但是搜索引擎在解析時更強調(diào)“內(nèi)容塊”的概念，即一個標簽一個塊。還是以上html的例子。當搜索引擎在構(gòu)建這個dom樹時，當它解析到第一個div內(nèi)的h1>標簽時，發(fā)現(xiàn)這里出現(xiàn)了錯誤，解析到P標簽的時候，又遇到了錯誤，這個時候為了正確構(gòu)建這棵dom樹，它會啟用整理模式，但這個時候的模式可能并不是幫你修復錯誤，而是以“塊”為單位。查找錯誤塊(節(jié)點)的上級塊(節(jié)點)（如果上一級還有錯誤，則繼續(xù)往上一級查找）,如果上一級塊沒有錯誤，則將這個上級塊內(nèi)的所有子塊及子子塊有錯誤的標簽全部剔除，也就是說把div id="top">之內(nèi)的所有有錯誤的標簽全部剔除，最終構(gòu)建的dom樹則為上面圖二所示(2011.4.5 修正：圖二中有一處小錯誤，左側(cè)的div標簽下是還有img標簽的)。
這樣一來，我們看到自己精心寫入的h1>和strong>標簽在解析后都不見了，整個塊的“權重”發(fā)生了偏移，根據(jù)html解析原理，我們很容易能得出一些結(jié)論：
1.當頁面節(jié)點層次越來越多的時候，我們要特別小心標簽層次的錯誤，越是接近頂層的的節(jié)點越是要小心，比如少寫了結(jié)束標簽，這個影響對seo也許是致命的.
2.不論你用什么布局，節(jié)點嵌套層次是越少越好，一來可以減小搜索引擎解析節(jié)點時的負擔，二來搜索引擎更容易確定節(jié)點之間（上下文）的關系，第二點對關鍵詞的加權很重要。
3.當標簽的屬性能用css替代時，則盡可能移到css中去.
4.瀏覽器和搜索引擎都允許html錯誤，但標準的html在外部條件相同的情況，顯然更容易獲得更好的排名。
寫這篇文章花了我近四個小時，有些地方講得還不是很透徹，在第三篇文章中再分享吧。
文章來源：光年論壇 （轉(zhuǎn)載請注明出處鏈接及作者）
文章作者：newyhj
