前端開發(fā)規(guī)范-【HTML編碼規(guī)范】

1、html編碼規(guī)范基本規(guī)范使用符合語義的標(biāo)簽書寫html 文檔 , 選擇恰當(dāng)?shù)脑乇磉_(dá)所需的含義; 元素的標(biāo)簽和屬性名必須小寫, 屬性值必須加雙引號; 元素嵌套遵循(x)html strict 嵌套規(guī)則 , 推薦使用firefox 插件 html validator進(jìn)行檢查 ; 正確區(qū)分自閉合元素和非自閉合元素. 非法閉合包括：.、, 非法閉合會導(dǎo)致頁面嵌套錯(cuò)誤問題; 通過給元素設(shè)置自定義屬性來存放與javascript 交互的數(shù)據(jù) , 屬性名格式為data-xx ( 例如： data-lazyload-url) 文檔模板sample page頁頭主體頁尾/ 你的代碼doctype 頁面文檔類型

2、統(tǒng)一使用html5 doctype. 代碼如下：編碼聲明方法遵循h(huán)tml5 的規(guī)范 . 注釋建議對超過10 行的頁面模塊進(jìn)行注釋, 以降低開發(fā)人員的嵌套成本和后期的維護(hù)成本. 例如： . . 元素結(jié)構(gòu)性元素p 表示段落 . 只能包含內(nèi)聯(lián)元素, 不能包含塊級元素; div 本身無特殊含義, 可用于布局 . 幾乎可以包含任何元素; br 表示換行符 ; hr 表示水平分割線; h1-h6表示標(biāo)題 . 其中h1 用于表示當(dāng)前頁面最重要的內(nèi)容的標(biāo)題; blockquote表示引用 , 可以包含多個(gè)段落. 請勿純粹為了縮進(jìn)而使用blockquote, 大部分瀏覽器默認(rèn)將blockquote 渲染為帶有左

3、右縮進(jìn); pre 表示一段格式化好的文本; 頭部元素title每個(gè)頁面必須有且僅有一個(gè)title 元素 ; base 可用場景：首頁、頻道等大部分鏈接都為新窗口打開的頁面; link link 用于引入css 資源時(shí) , 可省去media( 默認(rèn)為 all) 和 type( 默認(rèn)為text/css) 屬性 ; style type 默認(rèn)為text/css, 可以省去 ; script type 屬性可以省去 ; 不贊成使用lang 屬性 ; 不要使用古老的 這種hack 腳本 , 它用于阻止第一代瀏覽器(netscape 1和 mosaic) 將腳本顯示成文字; noscript在用戶代理不支

4、持javascript 的情況下提供說明; 文本元素a a 存在href 屬性時(shí)表示鏈接, 無 href 屬性但有name 屬性表示錨點(diǎn) ; em,strong em 表示句意強(qiáng)調(diào) , 加與不加會引起語義變化, 可用于表示不同的心情或語調(diào) ; strong 表示重要性強(qiáng)調(diào), 可用于局部或全局, strong強(qiáng)調(diào)的是重要性, 不會改變句意; abbr表示縮寫 ; sub,sup主要用于數(shù)學(xué)和化學(xué)公式, sup 還可用于腳注; span本身無特殊含義; ins,del分別表示從文檔中增加(插入 )和刪除媒體元素img請勿將 img 元素作為定位布局的工具, 不要用他顯示空白圖片; 必要時(shí)給 img

5、元素增加alt 屬性 ; object可以用來插入flash; 列表元素dl 表示關(guān)聯(lián)列表 , dd 是對 dt 的解釋 ; dt 和 dd 的對應(yīng)關(guān)系比較隨意：一個(gè)dt 對應(yīng)多個(gè) dd、多個(gè) dt 對應(yīng)一個(gè)dd、多個(gè) dt 對應(yīng)多個(gè)dd, 都合法 ; 可用于名詞 / 單詞解釋、 日程列表、站點(diǎn)目錄 ; ul 表示無序列表; ol 表示有序列表 , 可用于排行榜等; li 表示列表項(xiàng) , 必須是 ul/ol 的子元素 ; 表單元素推薦使用button 代替input, 但必須聲明type; 推薦使用fieldset, legend 組織表單表單元素的name 不能設(shè)定為action, enctype, method, novalidate, target