HTML是描述網頁結構的超文本標記語言，HTML規范能夠使HTML代碼風格保持一致，使得HTML更容易理解和維護。本文將詳細介紹HTML規范

【頁面頭部】

1、文件應以“ !DOCTYPE ...... ”首行頂格開始，推薦使用“ !DOCTYPE html ”

 !DOCTYPE html 

2、必須聲明文檔的編碼charset，且與文件本身編碼保持一致，指定字符編碼的 meta 必須是 head 的第一個直接子元素。推薦使用UTF-8編碼 meta charset= utf-8

 meta charset= utf-8 

3、根據頁面內容和需求填寫適當的keywords和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?1.1.11 

4、使用link將css文件引入，并置于head中；使用script將js文件引入，并置于body底部

5、移動環境或只針對現代瀏覽器設計的 Web 應用，如果引用外部資源的 URL 協議部分與頁面相同，建議省略協議前綴。這是因為使用 protocol-relative URL 引入 CSS，在 IE7/8 下，會發兩次請求。是否使用 protocol-relative URL 應充分考慮頁面針對的環境

 script src= //s1.bdstatic.com/cache/static/jquery-1.10.2.min_f2fb5194.js?1.1.11 /script 

【結構優化】

1、盡量遵循 HTML 標準和語義，但是不要以犧牲實用性為代價。任何時候都要盡量使用最少的標簽并保持最小的復雜度

2、結構順序和視覺順序基本保持一致，按照從上至下、從左到右的視覺順序書寫HTML結構。有時為了便于搜索引擎抓取，也會將重要內容在HTML結構順序上提前

3、結構、表現、行為三者分離，避免內聯

4、每一個塊級元素都另起一行，每一行都使用Tab縮進對齊（head和body的子元素不需要縮進）。刪除冗余的行尾空格

5、對于內容較為簡單的表格，建議將tr寫成單行

6、可以在大的模塊之間用空行隔開，使模塊更清晰

【縮進】

使用4個空格代替1個Tab（大多數編輯器中可設置）

 ul li first /li li second /li /ul 

【命名】

1、class 必須單詞全字母小寫，單詞間以 - 分隔

2、class 必須代表相應模塊或部件的內容或功能，不得以樣式信息進行命名

 !-- good -- div >
 3、同一頁面，應避免使用相同的 name 與 id。因為IE7-瀏覽器會混淆元素的 id 和 name 屬性， document.getElementById 可能獲得不期望的元素。所以在對元素的 id 與 name 屬性的命名需要非常小心
【標簽】
 1、標簽名必須使用小寫字母
 2、對于無需自閉合的標簽，不需要自閉合
 3、對 HTML5 中規定允許省略的閉合標簽，不允許省略閉合標簽
 4、HTML 標簽的使用應該遵循標簽的語義，且要符合標簽嵌套規則
 !-- 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統一格式；注釋文案兩頭空格，與CSS注釋統一格式
 開始注釋： !-- 注釋文案 -- （文案兩頭空格）
 結束注釋： !-- /注釋文案 -- （文案前加“/”符號，類似標簽的閉合）
 允許只有開始注釋
 !-- 頭部 -- 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?1.1.11 /script !-- bad -- script src= esl.js /script script src=esl.js /script 
【屬性順序】
 HTML 屬性應該按照特定的順序出現以保證易讀性
idclassdata-xxxsrc, for, type, hreftitle, altaria-xxx, role
 
特殊元素
【圖片】
 1、禁止 img 的 src 取值為空，否則會導致部分瀏覽器重新加載一次當前頁面
 2、為圖片添加 alt 屬性，提高圖片加載失敗時的用戶體驗
 3、避免為 img 添加不必要的 title 屬性，多余的 title 影響看圖體驗，并且增加了頁面尺寸
 4、為圖片添加 width 和 height 屬性，以避免頁面抖動
 img src= # alt= # width= # height= # 
 5、有下載需求的圖片采用 img 標簽實現，無下載需求的圖片采用 CSS 背景圖實現
 產品 logo、用戶頭像、用戶產生的圖片等有潛在下載需求的圖片，以 img 形式實現，能方便用戶下載
 無下載需求的圖片，比如：icon、背景、代碼使用的圖片等，盡可能采用 css 背景圖實現
【表單】
 1、有文本標題的控件使用 label 標簽將其與其標題相關聯。最好將控件置于 label 內，以減少不必要的 id
 label input type= checkbox name= confirm value= on 我已確認上述條款 /label 
 2、使用 button 元素時必須指明 type 屬性值。因為button 元素的默認 type 為 submit，如果被置于 form 元素中，點擊后將導致表單提交
 button type= submit 提交 /button button type= button 取消 /button 
 3、在針對移動設備開發的頁面時，根據內容類型指定輸入框的 type 屬性，能獲得友好的輸入體驗
 input type= date 
【多媒體】
 1、在支持 HTML5 的瀏覽器中優先使用 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、只在必要的時候開啟音視頻的自動播放
以上就是HTML相關規范學習的詳細內容，html教程        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。