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

代碼符合標準

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

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

提高網(wǎng)站的易用性

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

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

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

不推薦使用blink，marquee

讓HTML擁有更好的語義

移除不常用的HTML標簽

樣式和結(jié)構(gòu)分離

HTML頁面鏈接一個CSS（最優(yōu)），提高加載速度

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

內(nèi)聯(lián)CSS樣式，可以使用JS動態(tài)來統(tǒng)一修改，很少使用，JQ中使用其實現(xiàn)動畫效果

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

添加JS禁用提示信息

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

最好使用noscript，采用漸進增強的模式，平穩(wěn)降級

添加必要的meta的標簽

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

name和content屬性組合，構(gòu)成名稱/值對

name中keywords，description最常用

http-equiv和content屬性結(jié)合，構(gòu)成http命令

其中content-type，default-style，refresh已經(jīng)確定，content-language，set-cookie 未正式確定

charset設(shè)置編碼

常用的meta方法

設(shè)置IE瀏覽器的兼容性

設(shè)置頁面在移動設(shè)備中的顯示

設(shè)置IE瀏覽器的固定網(wǎng)站功能

HTML語義化

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

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

div，span盡量少使用

把無關(guān)的元素重HTML中刪除

添加一些隱藏文字

要求：

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

熟悉各標簽上規(guī)范的屬性，給HTML標簽設(shè)置必要的屬性

樣式和結(jié)構(gòu)的分離

構(gòu)建頁面標題的最佳實踐：

使用hx標簽

頁面只是使用一個h1

hx使用過程中不要跳級

不要使用hx設(shè)置樣式

設(shè)計表單：

使用label標簽，并設(shè)置label標簽的for屬性

給輸入控件設(shè)置合適的水印提示

輸入控件設(shè)置tab順序

使用HTML5中引入的表單控件

HTML5新特性使用

async和defer屬性

不使用在內(nèi)聯(lián)里面

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

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

在設(shè)置async時候，推薦同時設(shè)置defer屬性，提高腳本加載執(zhí)行的性能

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

script可以編寫HTML模板和XML數(shù)據(jù)

選擇器注意

盡量不使用ID選擇器

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

使用組合CSS類選擇器

兼容IE瀏覽器

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

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

分離樣式兼容代碼

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