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

代碼符合標(biāo)準(zhǔn)

標(biāo)準(zhǔn)的頁面會(huì)保證正確的渲染

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

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

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

停止使用不標(biāo)準(zhǔn)的標(biāo)簽和屬性，簡化HTML代碼

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

不推薦使用blink，marquee

讓HTML擁有更好的語義

移除不常用的HTML標(biāo)簽

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

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

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

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

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

添加JS禁用提示信息

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

最好使用noscript，采用漸進(jìn)增強(qiáng)的模式，平穩(wěn)降級(jí)

添加必要的meta的標(biāo)簽

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

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

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è)置頁面在移動(dòng)設(shè)備中的顯示

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

HTML語義化

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

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

div，span盡量少使用

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

添加一些隱藏文字

要求：

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

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

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

構(gòu)建頁面標(biāo)題的最佳實(shí)踐：

使用hx標(biāo)簽

頁面只是使用一個(gè)h1

hx使用過程中不要跳級(jí)

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

設(shè)計(jì)表單：

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

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

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

使用HTML5中引入的表單控件

HTML5新特性使用

async和defer屬性

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

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

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

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

標(biāo)簽上的自定義屬性data-*

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

選擇器注意

盡量不使用ID選擇器

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

使用組合CSS類選擇器

兼容IE瀏覽器

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

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

分離樣式兼容代碼

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