HTML是描述網(wǎng)頁結(jié)構(gòu)的超文本標記語言，HTML規(guī)范能夠使HTML代碼風格保持一致碧浊，使得HTML更容易理解和維護。本文將詳細介紹HTML規(guī)范
整體結(jié)構(gòu)
【頁面頭部】
1、文件應(yīng)以<!DOCTYPE...>首行頂格開始退唠，推薦使用<!DOCTYPE html>
<!DOCTYPE html>
2、必須聲明文檔的編碼charset荤胁，且與文件本身編碼保持一致瞧预，指定字符編碼的 meta 必須是 head 的第一個直接子元素。推薦使用UTF-8編碼
<meta charset="utf-8">
3仅政、根據(jù)頁面內(nèi)容和需求填寫適當?shù)膋eywords和description
<meta name="description" content="不超過150個字符">
<meta name="keywords" content="">
4垢油、頁面title是不可缺少的一項，title 必須作為 head 的直接子元素圆丹，并緊隨 charset 聲明之后
<head>
<meta charset="UTF-8">
<title>頁面標題</title>
</head>
【資源引入】
1滩愁、保證 favicon 可訪問
<link rel="shortcut icon" href="path/to/favicon.ico">
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/jquery.js"></script>
【結(jié)構(gòu)優(yōu)化】
1、盡量遵循 HTML 標準和語義校套，但是不要以犧牲實用性為代價价脾。任何時候都要盡量使用最少的標簽并保持最小的復(fù)雜度
2、結(jié)構(gòu)順序和視覺順序基本保持一致笛匙，按照從上至下侨把、從左到右的視覺順序書寫HTML結(jié)構(gòu)。有時為了便于搜索引擎抓取妹孙，也會將重要內(nèi)容在HTML結(jié)構(gòu)順序上提前
3秋柄、結(jié)構(gòu)、表現(xiàn)蠢正、行為三者分離骇笔，避免內(nèi)聯(lián)
4、每一個塊級元素都另起一行嚣崭，每一行都使用Tab縮進對齊（head和body的子元素不需要縮進）笨触。刪除冗余的行尾空格
5、對于內(nèi)容較為簡單的表格雹舀，建議將tr寫成單行
6芦劣、可以在大的模塊之間用空行隔開，使模塊更清晰
【語義化】
瀏覽器會根據(jù)標簽的語義給定一個默認的樣式说榆。判斷網(wǎng)頁標簽語義化是否良好的一個簡單方法：去掉樣式虚吟，看網(wǎng)頁結(jié)構(gòu)是否組織良好有序，是否仍然有很好的可讀性
1娱俺、盡可能少地使用無語義標簽span和div
2稍味、在語義不明顯废麻，既可以使用p也可以使用div的地方荠卷，盡量用p
3、在既可以使用div也可以使用section的地方烛愧，盡量用section
4油宜、不要使用純樣式標簽，如b怜姿、u等慎冤，而改用CSS設(shè)置
代碼格式
【縮進】
使用2個空格代替1個Tab（大多數(shù)編輯器中可設(shè)置）
<ul>
<li>first</li>
<li>second</li>
</ul>
【命名】
1、class 必須單詞全字母小寫沧卢，單詞間以 - 分隔
2蚁堤、class 必須代表相應(yīng)模塊或部件的內(nèi)容或功能，不得以樣式信息進行命名
<!-- good -->
<div class="sidebar"></div>
<!-- bad -->
<div class="left"></div>
3但狭、同一頁面披诗，應(yīng)避免使用相同的 name 與 id撬即。因為IE7-瀏覽器會混淆元素的 id 和 name 屬性， document.getElementById 可能獲得不期望的元素呈队。所以在對元素的 id 與 name 屬性的命名需要非常小心
【標簽】
1剥槐、標簽名必須使用小寫字母
2、對于無需自閉合的標簽宪摧，不需要自閉合
3粒竖、對 HTML5 中規(guī)定允許省略的閉合標簽，不允許省略閉合標簽
4几于、HTML 標簽的使用應(yīng)該遵循標簽的語義蕊苗，且要符合標簽嵌套規(guī)則
<!-- good -->
<p>Hello StyleGuide!</p>
<!-- bad -->
<P>Hello StyleGuide!</P>
<!-- good -->
<input type="text" name="title">
<!-- bad -->
<input type="text" name="title" </>
<!-- good -->
<ul>
<li>first</li>
<li>second</li>
</ul>
<!-- bad -->
<ul>
<li>first
<li>second
</ul>
【注釋】
采用類似標簽閉合的寫法，與HTML統(tǒng)一格式沿彭；注釋文案兩頭空格岁歉，與CSS注釋統(tǒng)一格式
開始注釋：（文案兩頭空格）
結(jié)束注釋：（文案前加“/”符號，類似標簽的閉合）
允許只有開始注釋
<!-- 頭部 -->
<div class="g-hd">
<!-- LOGO -->
<h1 class="m-logo"><a href="#">LOGO</a></h1>
<!-- /LOGO -->
<!-- 導(dǎo)航 -->
<ul class="m-nav">
<li><a href="#">NAV1</a></li>
<li><a href="#">NAV2</a></li>
<!-- 更多導(dǎo)航項 -->
</ul>
<!-- /導(dǎo)航 -->
</div>
<!-- /頭部 -->
【屬性】
1膝蜈、屬性和值全部小寫
2锅移、屬性值必須用雙引號包圍
3、布爾類型的屬性非剃，建議不添加屬性值
4备绽、自定義屬性建議以 xxx- 為前綴鬓催，推薦使用 data-
5、可以省略style標簽和script標簽的type屬性
<!-- good -->
<table cellspacing="0">...</table>
<!-- bad -->
<table cellSpacing="0">...</table>
<!-- good -->
<script src="esl.js"></script>
<!-- bad -->
<script src='esl.js'></script>
<script src=esl.js></script>
【屬性順序】
HTML 屬性應(yīng)該按照特定的順序出現(xiàn)以保證易讀性
id
class
name
data-xxx
src, for, type, href
title, alt
aria-xxx, role
特殊元素
【圖片】
1倍靡、禁止 img 的 src 取值為空塌西，否則會導(dǎo)致部分瀏覽器重新加載一次當前頁面
2筝尾、為圖片添加 alt 屬性，提高圖片加載失敗時的用戶體驗
3站辉、避免為 img 添加不必要的 title 屬性饰剥，多余的 title 影響看圖體驗捐川，并且增加了頁面尺寸
4、為圖片添加 width 和 height 屬性古沥，以避免頁面抖動
<img src="#" alt="#" width="#" height="#">
5岩齿、有下載需求的圖片采用 img 標簽實現(xiàn)盹沈，無下載需求的圖片采用 CSS 背景圖實現(xiàn)
產(chǎn)品 logo、用戶頭像做裙、用戶產(chǎn)生的圖片等有潛在下載需求的圖片肃晚，以 img 形式實現(xiàn)关串，能方便用戶下載
無下載需求的圖片，比如：icon晋修、背景墓卦、代碼使用的圖片等趴拧，盡可能采用 css 背景圖實現(xiàn)
【表單】
1、有文本標題的控件使用 label 標簽將其與其標題相關(guān)聯(lián)。最好將控件置于 label 內(nèi)屁倔，以減少不必要的 id
<label><input type="checkbox" name="confirm" value="on"> 我已確認上述條款</label>
2、使用 button 元素時必須指明 type 屬性值往衷。因為button 元素的默認 type 為 submit席舍，如果被置于 form 元素中哮笆，點擊后將導(dǎo)致表單提交
<button type="submit">提交</button>
<button type="button">取消</button>
3、在針對移動設(shè)備開發(fā)的頁面時福铅，根據(jù)內(nèi)容類型指定輸入框的 type 屬性项阴，能獲得友好的輸入體驗
<input type="date">
【多媒體】
1滑黔、在支持 HTML5 的瀏覽器中優(yōu)先使用 audio 和 video 標簽來定義音視頻元素环揽，并使用退化到插件的方式來對多瀏覽器進行支持
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
<object width="100" height="50" data="audio.mp3">
<embed width="100" height="50" src="audio.swf">
</object>
</audio>
<video width="100" height="50" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
<object width="100" height="50" data="video.mp4">
<embed width="100" height="50" src="video.swf">
</object>
</video>
2撞芍、只在必要的時候開啟音視頻的自動播放
一個不是計算機專業(yè)的理科生跨扮，轉(zhuǎn)行學前端
如果你也有一個編程夢，這是咱們的前端學習QQ群：784-783-012
（在線學習帝嗡，8個月時間璃氢，目前就業(yè)，廣州工作巢寡，月薪16k）
