摘要：代碼符合標準標準的頁面會保證正確的渲染頁面容易被搜索引擎搜索，提高搜索排名提高網站的易用性網頁更好維護和擴展，屬于插件停止使用不標準的標簽和屬性，簡化代碼標簽沒有實際意義，僅設置樣式不推薦使用不推薦使用，讓擁有更好的語義移除不常用的標簽樣式

代碼符合標準

標準的頁面會保證正確的渲染

頁面容易被搜索引擎搜索，提高搜索排名(SEO)

提高網站的易用性

網頁更好維護和擴展（Validator，HTML Validator 屬于Firefox插件)

停止使用不標準的標簽和屬性，簡化HTML代碼

標簽沒有實際意義，僅設置樣式（不推薦使用）

不推薦使用blink，marquee

讓HTML擁有更好的語義

移除不常用的HTML標簽

樣式和結構分離

HTML頁面鏈接一個CSS（最優），提高加載速度

HTML內嵌CSS（單一頁面最佳，減少加載CSS樣式文件的請求數目，加快加載速度

內聯CSS樣式，可以使用JS動態來統一修改，很少使用，JQ中使用其實現動畫效果

在CSS樣式文件中引用CSS文件，避免使用

添加JS禁用提示信息

使用noscrpt，HTML4只在body中起作用，HTML5中可以出現在head中，支持HTML，不支持XHTML

最好使用noscript，采用漸進增強的模式，平穩降級

添加必要的meta的標簽

meta的屬性：name，http-equiv，content，charset

name和content屬性組合，構成名稱/值對

name中keywords，description最常用

http-equiv和content屬性結合，構成http命令

其中content-type，default-style，refresh已經確定，content-language，set-cookie 未正式確定

charset設置編碼

常用的meta方法

設置IE瀏覽器的兼容性

設置頁面在移動設備中的顯示

設置IE瀏覽器的固定網站功能

HTML語義化

語義化使搜索引擎和第三方抓取工具更容易讀懂代碼

去掉CSS也可以保持良好的外觀

div，span盡量少使用

把無關的元素重HTML中刪除

添加一些隱藏文字

要求：

熟悉所有規范中的HTML標簽，理解各標簽的語義

熟悉各標簽上規范的屬性，給HTML標簽設置必要的屬性

樣式和結構的分離

構建頁面標題的最佳實踐：

使用hx標簽

頁面只是使用一個h1

hx使用過程中不要跳級

不要使用hx設置樣式

設計表單：

使用label標簽，并設置label標簽的for屬性

給輸入控件設置合適的水印提示

輸入控件設置tab順序

使用HTML5中引入的表單控件

HTML5新特性使用

async和defer屬性

不使用在內聯里面

defer：以并行的方式下載腳本，而不是阻塞的方式下載，在腳本加載完成后，瀏覽器會在DOM觸發之前按照引用順序運行JS

async：以異步的方式下載腳本，在下載結束后立即執行代碼，而不會等待頁面解析結束

在設置async時候，推薦同時設置defer屬性，提高腳本加載執行的性能

標簽上的自定義屬性data-*

script可以編寫HTML模板和XML數據

選擇器注意

盡量不使用ID選擇器

減少子選擇器的層級（less和Sass的濫用）

使用組合CSS類選擇器

兼容IE瀏覽器

兼容舊瀏覽器的代碼，被稱為hack代碼

熟悉IE瀏覽器中常見的兼容樣式

分離樣式兼容代碼

.color{ _color:green;}  ( IE6 (含 IE6 ) 以下)
    
.color{ *color:gray; }  ( IE7 ( 含 IE7 )以下)
    
.color { color:green