對web標準的理解

W3C標準

萬維網聯盟（World Wide Web Consortium）標準不是某一個標準，而是一些列標準的集合。

網頁主要有三部分組成：

• 結構（Structure）
• 表現（Presentation）
• 行爲（Behavior）

對應的標準也有三方面：

• 結構化標準主要包括XHTML和XML
• 表現標準語言主要包括CSS
• 行爲標準主要包括（如W3C DOM、ECMAScript)

爲何要遵循標準：

用一個程序語言來講，咱們是轉換器........adapter，咱們千方百計讓咱們的頁面、咱們的程序可以支持全部瀏覽器，可以知足儘量多的用戶。咱們要知足全部的用戶，即便作不到，咱們也要知足咱們技術範圍以內的全部用戶。

標準規範：

一、 須要聲明DOCTYPE

DOCTYPE（document type）文檔類型的簡寫，用來講明你用的XHTML或者HTML是什麼版本。

其中DTD叫文檔類型定義，裏面包含了文檔的規則，瀏覽器就根據你定義的DTD來解釋你頁面的標識，並展示出來。

要創建符合標準的網頁，DOCTYPE聲明是必不可少的關鍵組成部分；除非你的XHTML肯定了一個正確的DOCTYPE，不然你的標識和css都不會生效。

XHTML 1.0 提供了三種DTD聲明可供選擇：有過分的（Transitional）、嚴格的（strict）、框架的（frameset）。

二、須要定義語言編碼

<meta http-equiv=「Content-Type」 content=「text/html; charset=gb2312」 />

注：若是忘記了定義語言編碼，可能會出現頁面亂碼現象。

三、JavaScript定義

Js必需要<script language="javascript" type="text/javascript">來開頭定義，以保證在不支持js的瀏覽器上直接顯示出來。

四、CSS定義

CSS必需要用<style type=「text/css」>開頭來定義，爲保證各瀏覽器的兼容性，在寫CSS時請都寫上數量單位。

例如：錯誤：.space_10{padding-left:10} 正確：.space_10 {padding-left:10px}

五、使用註釋

正確的應用等號或者空格替換內部的虛線。

<!--這裏是註釋============這裏是註釋-->

六、全部標籤的元素和屬性名字都必須使用小寫

與HTML不同，XHTML對大小寫是敏感的，<title>和<TITLE>是不一樣的標籤。XHTML要求全部的標籤和屬性的名字都必須使用小寫。

七、全部屬性值必須用引號括起來（"" ''）雙引號或單引號

八、把全部特殊符號用編碼表示

空格爲  、小於號（<）&lt、大於號（>）&gt、和號（&）&amp等。

九、全部屬性必須有屬性值

XHTML規定全部屬性都必須有個值，沒有值就是重複自己。

十、全部的標記都必須有相應的結束標記

雙標記：<div></div>

單標記：<img />

十一、全部的標記都必須合理嵌套

<p><b></p></b> 必須修改成：<p><b></b></p>

十二、圖片添加有意義的alt屬性

圖片加載失敗時能夠用alt屬性代表圖片內容。同理添加文字連接的title屬性，幫助顯示不完整的內容顯示完整。

1三、在form表單中增長label，以增長用戶友好度

<form>
    <labelfor="firstname">first name: </label>
    <inputtype="text" id="firstname"/>
</form>
複製代碼

以上是規範標準

WEB標準（結構、表現、行爲分離）有哪些優勢呢?

• 易於維護：只需更改CSS文件，就能夠改變整站的樣式
• 頁面響應快：HTML文檔體積變小，響應時間短
• 可訪問性：語義化的HTML（結構和表現相分離的HTML）編寫的網頁文件，更容易被屏幕閱讀器識別
• 設備兼容性：不一樣的樣式表可讓網頁在不一樣的設備上呈現不一樣的樣式
• 搜索引擎：語義化的HTML能更容易被搜索引擎解析，提高排名

結論

• 標籤規範能夠提升搜索引擎對頁面的抓取效率，對SEO（搜索引擎優化）頗有幫助。

• 儘可能使用外鏈css樣式表和js腳本。是結構、表現和行爲分爲三塊，符合規範。同時提升頁面渲染速度，提升用戶的體驗。

• 樣式儘可能少用行間樣式表，使結構與表現分離，標籤的id和class等屬性命名要作到見文知義，標籤越少，加載越快，用戶體驗提升，代碼維護簡單，便於改版

參考連接：

blog.csdn.net/Hhy_9288/ar… www.w3cschool.cn/xuexiw3c/xu…