理解Web標準（網站標準）

      我以爲一名Web前端應該好好理解Web標準究竟是什麼，爲何要在咱們的實際實踐中遵循Web標準。

      什麼是Web標準。百度百科的解釋是：

      WEB標準不是某一個標準，而是一系列標準的集合。網頁主要由三部分組成：結構（Structure）、表現（Presentation）和行爲（Behavior）。對應的標準也分三方面：結構化標準語言主要包括XHTML和XML，表現標準語言主要包括CSS，行爲標準主要包括對象模型（如W3C DOM）、ECMAScript等。

（url:http://baike.baidu.com/link?url=-XC1...）

        其餘網站也有不少解釋，這裏不做過多贅述。我以爲咱們遵循Web標準的目的不是爲了標準而標準，不是由於它是這麼要求的咱們纔去這麼作。一名優秀的Web前端，應該是Write less，do more。就是用更少的代碼，作更多的事。因此我以爲咱們遵循Web標準的目的應該是讓咱們的代碼效率更高更好，只有本着這個態度去理解Web標準才能體會其深刻的內涵。

        下面具體談談Web標準。我在網上看到的一道yahoo的面試題。題目是：

        有這麼一段html代碼，請指出代碼中的毛病。

<P>&nbsp;&nbsp;我寫的不是HTML代碼，是寂寞。<br><br>&nbsp;&nbsp;我說：<br>不要迷戀哥，哥只是一個傳說 

　      在這段代碼當中，第一眼看上去沒有明顯的語法錯誤。是的，在html 4.01 strict下是徹底正確的，可是在Web標準下，就是xhtml 1.0 strict下就是錯誤的，不合乎規範。xhtml有嚴謹的結構，全部標籤必須關閉。若是是單獨不成對的標籤，在標籤最後加一個"/"來關閉它。因此，代碼中的<P>要匹配一個</p>,<br>要改爲<br/>,其次全部標籤必須小寫，因此<P>也是錯誤的，要改爲<p>;最後&nbsp;空格符必須包含在容器當中，也是錯誤的。

      （考點1.html 4.01與Web標準xhtml 1.0的差異）

        起初，我覺得若是能回答到上面所說的錯誤基本能拿滿分了，其實否則，回答完上面的只能及格。Web標準要求的結構與表現分離，而考題當中運用了&nbsp;控制縮進，是錯誤的，咱們應該應用Css來控制文本的縮進，因此&nbsp;應該刪掉。

      （考點2.結構與表現分離）

        最後，還有一處錯誤，題目當中連續使用兩個<br>來製造了兩個段落，<br>是強制折行標籤，這樣作確實達到了兩個段落的效果，可是後期段間距不易控制，咱們應該合理運用標籤。因此正確的作法是咱們應該應用兩個<p>標籤來表示兩個段落。

      （考點3.合理運用標籤）

        因此，在xhtml標準下，正確的修改應該是：

<p>我寫的不是HTML代碼，是寂寞。</p><p>我說：<br/>不要迷戀哥，哥只是一個傳說</p> 

        這樣就完美了嗎？不是，還有加分點，爲了更符合Web標準，咱們應該適當的的運用標籤語義化（關於什麼是標籤語義化，可移步：http://www.cnblogs.com/mq0036/p/3954172.html，個人上一篇博文，也是Web標準的一部分）。也就是「我"說的話，能夠用<q>標籤標註。

<p>我寫的不是HTML代碼，是寂寞。</p><p>我說：<br/><q>不要迷戀哥，哥只是一個傳說</q></p> 

　     這樣就足夠了，標籤語義化也應該合理的運用，過度使用也會顯得太多此一舉。固然，若是還要添加，「我」字能夠用<cite>標註，「HTML」能夠用<abbr>標註：

<p><cite>我</cite>寫的不是<abbr title=」Hyper Text Markup Language」>HTML</abbr>代碼，是寂寞。</p><p><cite>我</cite>說：<br/><q>不要迷戀哥，哥只是一個傳說</q></p> 

　　   （加分點：標籤語義化）

        綜上，咱們使用Web標準去編寫代碼，就像我前面說的，目的是write less，do more。咱們的代碼更加規範，更加合乎標準，咱們的頁面就更容易被搜索引擎抓取收錄。

        上面沒有談到具體的Web標準包括什麼以及具體的採用Web標準的好處，由於這些其餘網站不少不少，具體瞭解能夠移步：

        http://www.baike.com/wiki/WEB%E6%A0%87%E5%87%86
        http://www.w3cn.org/article/tips/2007/123.html

出處：http://www.cnblogs.com/coco1s/p/3588716.html