html規(guī)范

協(xié)作開發(fā)及分工: 根據(jù)各個(gè)模塊, 同時(shí)根據(jù)頁面相似程序, 事先寫好大體框架文件, 分配給前端人員實(shí)現(xiàn)內(nèi)部結(jié)構(gòu)&表現(xiàn)&行為; 共用html組件, 協(xié)作開發(fā)過程中， 此文件不可隨意修改.

1. 代碼格式

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

2. 命名規(guī)則

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

3. 標(biāo)簽使用

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

4. 圖片處理

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

5. Class 與 ID

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

6. 屬性順序

HTML 屬性應(yīng)該按照特定的順序出現(xiàn)以保證易讀性。 * 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推薦注釋，注釋符號(hào)一上一下覆蓋整個(gè)要注釋的區(qū)塊，多行注釋 --><!--<div class="sell"><p>多行注釋</p><p>多行注釋</p><p>多行注釋</p><p>多行注釋</p></div> -->

參考文檔

• html: 主要有縮進(jìn)，標(biāo)簽，加載順序等等。可以參考：
  • Code Guide

ps:建議大家在各個(gè)產(chǎn)品，嚴(yán)格遵守規(guī)范，以便后期的維護(hù)以及代碼的健壯性等。

如果文檔有更好的補(bǔ)充和好的建議，歡迎聯(lián)系@博主

如有雷同，請(qǐng)聯(lián)系@博主。

歡迎進(jìn)入個(gè)人公眾號(hào) ，一起學(xué)習(xí)啊！

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。