html規范

協作開發及分工: 根據各個模塊, 同時根據頁面相似程序, 事先寫好大體框架文件, 分配給前端人員實現內部結構&表現&行為; 共用html組件, 協作開發過程中， 此文件不可隨意修改.

1. 代碼格式

* 每個塊級、列表、表格元素單獨占一行，每個子元素都相對父元素縮進。 * 純文本在 HTML 標簽結束之前不要換行。 * 縮進: 統一兩個空格縮進（總之縮進統一即可），不要使用 Tab 或者 Tab、空格混搭。 * HTML 屬性值使用雙引號。 * 結構、樣式、行為分離: 盡量確保文檔和模板只包含 HTML 結構，樣式都放到樣式表里，行為都放到腳本里。 * 文件編碼: 使用不帶 BOM 的 UTF-8 編碼,在 HTML中指定編碼 <meta charset="utf-8">. * 充分利用html自身屬性及樣式繼承原理減少代碼量, 比如: <ul class="list"><li>這兒是標題列表<span>2010-09-15</span></ul> 定義 ul.list li{position:relative} ul.list li span{position:absolute; right:0} 即可實現日期居右顯示 * 書寫代碼前, 考慮并提高樣式重復使用率。 * 一律使用小寫字母 * 省略外鏈資源 URL 協議部分: 省略外鏈資源（圖片及其它媒體資源）URL 中的 http / https 協議，使 URL 成為相對地址，避免Mixed Content 問題，減小文件字節數。其它協議（ftp 等）的 URL 不省略。 * 語言屬性: lang屬性的取值應該遵循 BCP 47 - Tags for Identifying Languages。 * 文檔類型: 標準模式（standard mode）的聲明， 這樣能夠確保在每個瀏覽器中擁有一致的表現。 * 引號: 屬性的定義，統一使用雙引號。 * 統一注釋: 可以根據編譯器統一生成注釋。

2. 命名規則

* 頭：header * 內容：content/container * 尾：footer * 導航：nav * 側欄：sidebar * 欄目：column * 頁面外圍控制整體布局寬度：wrapper * 左右中：left right center * 登錄條：loginbar * 標志：logo * 廣告：banner * 頁面主體：main * 熱點：hot * 新聞：news * 下載：download * 子導航：subnav * 菜單：menu * 子菜單：submenu * 搜索：search * 友情鏈接：friendlink * 頁腳：footer * 版權：copyright * 滾動：scroll * 內容：content * 標簽頁：tab * 文章列表：list * 提示信息：msg * 小技巧：tips * 欄目標題：title * 加入：joinus * 指南：guild * 服務：service * 注冊：regsiter * 狀態：status * 投票：vote * 合作伙伴：partner

3. 標簽使用

* 自閉合（self-closing）標簽，無需閉合 ( 例如： img input br hr 等 )。 * 可選的閉合標簽（closing tag），需閉合 ( 例如：</li> 或 </body> )。 * 表格table: 互相嵌套時，嚴格按照的規范，對于單獨的一個<table>來說，<table><tr>對齊，<td> 縮進兩個半角空格，<td> 中如果還有嵌套的表格，<table>也縮進兩個半角空格，如果<td>中沒有任何嵌套的表格，</td> 結束標記應該與 <td> 處于同一行，不要換行 /*recommended*/<td><img src=”../images/sample.gif”></td>/*not recommended*/<td><img src=”../images/sample.gif”> </td>這是因為瀏覽器認為換行相當于一個半角空格，以上不規范的寫法相當于無意中增加一個半角空格，如果確實有必要增加一個半角空格，也應該這樣寫： <td><img src=”../images/sample.gif”> </td> * 鏈接a: 網站中的鏈接路徑全部采用相對路徑，一般鏈接到某一目錄下的缺省文件的鏈接路徑不必寫全名。 /*recommended*/<a href=”aboutus/index.htm”>/*not recommended*/<a href=”aboutus/”>所有內頁指向首頁的鏈接寫成<a href=”/”>在瀏覽器里，當我們點擊空鏈接時，它會自動將當前頁面重置到首端，從而影響用戶正常的閱讀內容，我們用代碼“javascript:void(null)”代替原來的“#”標記 * Alt和Title <p Title="給鏈接文字提示">文字</p><a href="#" Title="給鏈接文字提示">文字</a><img src="圖片.gif" alt="給圖片提示"> * 盡量減少標簽數量。

4. 圖片處理

* banner> 全尺寸banner為468X60px，半尺寸banner為234X60px，小banner為88X31px。另外120X90，120X60也是小圖標的標準尺寸。全尺寸banner不超過14K。普遍的banner尺寸760X100，750X120，468X60，468X95，728X90，585X140次級頁的pip尺寸360X300，336X280游標:100X100或120X120* LOGO的國際標準規范> 為了便于INTERNET上信息的傳播，一個統一的國際標準是需要的。實際上已經有了這樣的一整套標準。其中關于網站的LOGO，目前有三種規格：88*31 這是互聯網上最普遍的LOGO規格。120*60 這種規格用于一般大小的LOGO。120*90 這種規格用于大型LOGO。 * 頁面修飾圖片處理: 圖片經過優化以加快下載的速度,有較佳的視覺空間效果，用圖要與頁面風格、頁面內容相符；制作精美，細節處理得當。

5. Class 與 ID

* class 應以功能或內容命名，不以表現形式命名. * class 與 id 單詞字母小寫，多個單詞組成時，采用中劃線-分隔. * 使用唯一的 id 作為 Javascript hook, 同時避免創建無樣式信息的 class.

6. 屬性順序

HTML 屬性應該按照特定的順序出現以保證易讀性。 * 1. id * 2. class * 3. name * 4. data-xxx * 5. src, for, type, href * 6. title, alt * 7. aria-xxx, role

7. 注釋

<!--<div class="sell"></div>--><!-- HTML推薦注釋，注釋符號一上一下覆蓋整個要注釋的區塊，多行注釋 --><!--<div class="sell"><p>多行注釋</p><p>多行注釋</p><p>多行注釋</p><p>多行注釋</p></div> -->

參考文檔

• html: 主要有縮進，標簽，加載順序等等。可以參考：
  • Code Guide

ps:建議大家在各個產品，嚴格遵守規范，以便后期的維護以及代碼的健壯性等。

如果文檔有更好的補充和好的建議，歡迎聯系@博主

如有雷同，請聯系@博主。

歡迎進入個人公眾號 ，一起學習啊！

總結

以上是生活随笔為你收集整理的前端开发规范[html篇]的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。