整體結(jié)構(gòu)
【頁面頭部】
1. `<!DOCTYPE html>`首行頂格開始号坡。
2. 必須聲明文檔類型的編碼charset状原，且與文件本身編碼保持一致，指定字符編碼的meta必須是head的第一個子元素增热。
推薦使用UTF-8編碼障贸。
- 網(wǎng)頁顯示字符集
? ? <!--html5格式-->
? ? ? ? `<meta charset="UTF-8">`
? ? <!--簡體中文-->
? ? ? ? `<meta http-equiv="content-type" content="text/css;charset=gb2312">`
? ? <!--繁體中文-->
? ? ? ? `<meta http-equiv="content-type" content="text/css;charset=gbk">`
? ? <!--英文-->
? ? ? ? `<meta http-equiv="content-type" content="text/css;charset=utf-8">`? ? ? ? ? ?
- 可選標(biāo)簽
```
? ? 公司的版權(quán)注釋
? ? ? ? <!--the site is designed by Bob at 2016.9.24-->
? ? 網(wǎng)頁制作者信息
? ? ? ? ` <meta name="author" content="123456@qq.com">`
? ? 網(wǎng)站簡介
? ? ? ? `<meta name="description" content="xx學(xué)院創(chuàng)立于xxx年，學(xué)院開設(shè)了xxx課程,老師擁有x年的教學(xué)經(jīng)歷">`
? ? 設(shè)定網(wǎng)頁的到期時間堪夭，一旦網(wǎng)頁過期愕把，必須到服務(wù)器上重新調(diào)閱
? ? ? ? `<meta http-equiv="expires" content="Wed,26 Feb 2017 08:24:00 GMT">`
? ? 禁止瀏覽器從本地機緩存中調(diào)閱內(nèi)容
? ? ? ? `<meta http-equiv="pragma" content="no-cache">`
? ? 用來防止別人在框架中調(diào)用你的頁面
? ? ? ? `<meta http-equiv="Window-target" content="_top">`
? ? 自動跳轉(zhuǎn)
? ? ? ? `<meta http-equiv="refresh" content="5;url=http://www.baidu.com">`
? ? 網(wǎng)頁搜索機器人向?qū)В脕砀嬖V機器人哪些頁面需要搜索森爽，哪些頁 面不需要搜索
? ? ? ? `<meta name="robots" content="none">`
? ? 收藏夾圖標(biāo)
? ? ? ? `<link rel="Shortcut Icon" href="favicon.icon">`
```
3. 根據(jù)頁面內(nèi)容和需求填寫適當(dāng)?shù)膋eywords和description
```
? ? `<meta name="description" content="不超過150個字符">`
? ? `<meta name="keywords" content="">`
```
4. 頁面title是不可缺少的一項恨豁，title 必須作為 head 的直接子元素，并緊隨 charset 聲明之后
```
? ? `<head>`
? ? ? ? `<meta charset="UTF-8">`
? ? ? ? `<title>頁面標(biāo)題</title>`
? ? ????`</head>`
? 資源引入
1. 保證 favicon 可訪問
? ? `<link rel="shortcut icon" href="path/to/favicon.ico">`用于顯示網(wǎng)頁導(dǎo)航欄上的logo
2. 引入 CSS 和 JavaScript 時無須指明 type 屬性
3. 引入 CSS 時必須指明 rel="stylesheet"
? ? `<link rel="stylesheet" href="page.css">`
4. 使用link將css文件引入爬迟，并置于head中橘蜜；使用script將js文件引入，并置于body底部
5. 移動環(huán)境或只針對現(xiàn)代瀏覽器設(shè)計的 Web 應(yīng)用付呕，如果引用外部資源的 URL 協(xié)議部分與頁面相同计福，建議省略協(xié)議前綴。這是因為使用 protocol-relative URL 引入 CSS徽职，在 IE7/8 下象颖，會發(fā)兩次請求。是否使用 protocol-relative URL 應(yīng)充分考慮頁面針對的環(huán)境
? ? `<script src="http://s1.bdstatic.com/cache/static/jquery-1.10.2.min_f2fb5194.js"></script>`
? 結(jié)構(gòu)優(yōu)化
1. 盡量遵循h(huán)tml標(biāo)準(zhǔn)和語義姆钉，但是不要以犧牲使用性為代價说订。任何時候都要盡量使用最少的標(biāo)簽并保持少的復(fù)雜程度抄瓦。
2. 結(jié)構(gòu)順序和視覺順序節(jié)本保持一致，按照從上至下陶冷，從左至右的順序書寫html結(jié)構(gòu)钙姊。
3. 結(jié)構(gòu)(html)，表現(xiàn)(css)埂伦，行為(Js)三者分離,避免內(nèi)聯(lián)煞额。
4. 每一個塊級元素都要另起一行，每行都使用Tab縮進對齊（head和body作為子元素可以不縮進）沾谜。
5. 對于內(nèi)容較為簡單的表格膊毁，建議將tr寫成單行。
6. 可以在大的模塊之間用空行隔開类早，使模塊更清晰媚媒。
? 語義化
瀏覽器會根據(jù)標(biāo)簽的語義給一個默認的樣式，判斷網(wǎng)頁標(biāo)簽語義化是否良好的一個簡單方法：去掉樣式涩僻，看網(wǎng)頁結(jié)構(gòu)是否組織良好有序，是否仍然有很好的可讀性
1. 盡可能少的使用無語義標(biāo)簽栈顷，例如span和div逆日。
2. 在語義不明顯，既可以使用p也可以使用div的地方萄凤，盡量使用p室抽。
3. 在既可以使用div又可以使用section的地方，盡量使用section靡努。
4. 不要使用純樣式標(biāo)簽坪圾，例如：b，u等……惑朦，而改用css設(shè)置兽泄。
代碼格式
【命名】
1. class必須單詞全字母小寫，單詞之間以 - 分割漾月。
2. class必須代表相應(yīng)模塊或部件的內(nèi)容或功能病梢，不得以樣式信息進行命名。
3. 同一頁面梁肿，應(yīng)該避免使用相同的name與id蜓陌。因為IE7瀏覽器會混淆元素的id和name屬性。
【標(biāo)簽】
1. 標(biāo)簽名必須使用小寫字母吩蔑。
2. 對于無需自閉合的標(biāo)簽钮热，不需要自閉合。
3. 對HTML5中規(guī)定允許省略的閉合標(biāo)簽烛芬，不允許省略閉合標(biāo)簽隧期。
4. html標(biāo)簽的使用應(yīng)遵循標(biāo)簽語義飒责，且要符合標(biāo)簽嵌套規(guī)則。
【注釋】
采用類似標(biāo)簽閉合的寫法厌秒，與html統(tǒng)一格式读拆。注釋文案兩頭空格，與css注釋統(tǒng)一格式鸵闪。
- 開始注釋：`<!-- 注釋文案 -->`(文案兩頭空格)
- 結(jié)束注釋：`<!-- /注釋文案 -->`(文案前加"/"符號檐晕，類似標(biāo)簽的閉合)
- 注意：允許只有開始注釋。
【屬性】
1. 屬性和值全部小寫蚌讼。
2. 屬性中必須用雙引號包裹辟灰。
3. 布爾類型的屬性，建議不添加屬性值篡石。
4. 自定義屬性建議以xxx-為前綴芥喇，推薦使用data-。
5. 可以省略style標(biāo)簽和script標(biāo)簽的type屬性凰萨。
【圖片】
1. 進制img的src屬性取值為空继控，否則會導(dǎo)致部分瀏覽器重新加載一次當(dāng)前頁面。
2. 為圖片添加alt屬性胖眷，提高圖片加載失敗時的用戶體驗武通。
3. 避免為img添加不必要的title屬性，多余的title影響看圖效果珊搀，并增加了頁面尺寸冶忱。
4. 為圖片添加width和height屬性，避免頁面抖動境析。
5. 有下載需求的圖片采用img標(biāo)簽實現(xiàn)囚枪，無需下載的圖片采用css背景圖實現(xiàn)。
- 產(chǎn)品logo劳淆，用戶頭像链沼，用戶產(chǎn)生圖片等潛在需求的圖片，以img形式實現(xiàn)憔儿，能方便用戶下載忆植。
- 無需下載需求的圖片，例如：icon谒臼，背景朝刊，代碼使用的圖片等，盡量使用css背景圖實現(xiàn)蜈缤。
【表單】
1. 有文本標(biāo)題的空間使用label標(biāo)簽將其與其標(biāo)題相關(guān)聯(lián)拾氓。最好將控件置于label內(nèi)，以減少不必要的id底哥。
2. 使用button元素時咙鞍，必須指明type屬性值房官。因為button元素的默認type為submit，如果被置于form元素中续滋，點擊后將導(dǎo)致表單提交翰守。
