HTML編碼規(guī)范
轉(zhuǎn)轉(zhuǎn)大師PDF轉(zhuǎn)換器
支持40多種格式轉(zhuǎn)換，高效辦公
馬上下載
排版規(guī)則
縮進(jìn) 使用2個(gè)空格縮進(jìn)
<ul>
<li>Fantastic</li>
<li>Great</li>
</ul>
.example {
color: blue;
}
大小寫 只允許使用小寫。
所有的代碼都用小寫字母：適用于元素名，屬性，屬性值（除了文本和CDATA）， 選擇器，特性，特性值（除了字符串）。
<!-- 不推薦 -->
<A HREF="/">Home</A>
<!-- 推薦 -->
<img src="google.png"
alt="Google">
行尾空格 建議刪除行尾白空格。
<!-- 不推薦 -->
<p>What? </p>
<!-- 推薦 -->
<p>Yes please.</p>
常規(guī)Meta規(guī)則
編碼 如果沒有特殊需求，一般采用utf-8編碼。如果是cms站點(diǎn)，則遵守該站點(diǎn)的編碼規(guī)則。
<!-- 網(wǎng)頁編碼 -->
<meta charset="utf-8">
注釋 盡可能的去解釋你寫的代碼。說明該代碼包括什么、目的是什么、能做什么、為什么使用它等。
注釋是否需要詳盡，取決于項(xiàng)目的復(fù)雜程度。
一般單行注釋：
<!-- col -->
模塊間注釋：
<!-- news -->
<div class="news">
<h2>News</h2>
<p>...</p>
</div>
<!--/ news -->
循環(huán)注釋：
<ul>
<!-- loop: new list -->
<li>new's title 1</li>
<li>new's title 2</li>
<li>new's title 3</li>
<li>new's title 4</li>
<li>new's title 5</li>
</ul>
cms輸出注釋：
<!-- cms: news list -->
<ul>
<li>new's title 1</li>
<li>new's title 2</li>
<li>new's title 3</li>
<li>new's title 4</li>
<li>new's title 5</li>
</ul>
<!-- /cms: news list -->
Tab選項(xiàng)卡內(nèi)容注釋：
<!-- tab: news list -->
<div class="tab"></div>
<!-- /tab: news list -->
HTML設(shè)計(jì)規(guī)則
文檔類型 使用html5文檔聲明，不再使用XHTML（application/xhtml+xml）。
HTML5是目前所有HTML文檔類型中的首選：
<!DOCTYPE html>
HTML 的正確性 編寫有效、正確的HTML代碼，否則很難達(dá)到性能上的提升。
可以使用一些工具驗(yàn)證你的代碼，如 W3C HTML validator
HTML 的語義性 根據(jù)HTML各個(gè)元素的用途而去使用它們。
<!-- 不推薦 -->
<div class="col">
<div class="title">
news</div>
<p>list1</p>
<p>list2</p>
<p>list3</p>
</div>
<!-- 推薦 -->
<div class="col">
<h2 class="title">
news</h2>
<p>list1</p>
<p>list2</p>
<p>list3</p>
</div>
部分標(biāo)簽說明：
div 主要用于布局，分割頁面的結(jié)構(gòu);
ul/ol 主要用于無序/有序列表;
dl/dt/dd 當(dāng)頁面中出現(xiàn)第一行為類似標(biāo)題/簡述，然后下面為詳細(xì)描述的內(nèi)容時(shí)應(yīng)該使用該標(biāo)簽;
span 沒有特殊的意義，可以用作排版的輔助，然后在css中定義span;
h1-h6 標(biāo)題, 根據(jù)重要性依次遞減;
h1 最重要的標(biāo)題;
label 使表單更有親和力而且能輔助表單排版;
不推薦使用的標(biāo)簽：
font 文字的外觀，大小和顏色;
u 文本下劃線;
center 居中對齊;
s 刪除線;
strike 刪除線;
noframes 無視框時(shí)的內(nèi)容;
iframe 定義嵌入視圖;
isindex 不建議使用（可搜尋，使用input代替）;
dir 目錄式列舉;
menu 菜單列表;
basefont 定義基本字體;
applet 定義java程序;
frame 定義個(gè)別視框;
frameset 視框格式總定義;
多媒體元素降級處理
給多媒體元素，比如canvas、videos、 images增加alt屬性，提高可用性（特別是常用的img標(biāo)簽，盡可量得加上alt屬性，提供圖片的描述信息）。
<!-- 不推薦 -->
<img src="world.jpg">
<!-- 推薦 -->
<img src="world.jpg"
alt="our world images">
type屬性
在樣式表和腳本的標(biāo)簽中忽略type屬性。
HTML5默認(rèn)type為text/css和text/javascript類型，所以沒必要指定。即便是老瀏覽器也是支持的。
<!-- 不推薦 -->
<link rel="stylesheet"
type="text/css">
<script src="
//www.google.com/
js/gweb/analytics/autotrack.js"
type="text/javascript">
</script>
<!-- 推薦 -->
<link rel="stylesheet"
>
<script src="
//www.google.com/
js/gweb/analytics/autotrack.js">
</script>
HTML代碼格式規(guī)則
每個(gè)塊元素、列表元素或表格元素都獨(dú)占一行，每個(gè)子元素都相對于父元素進(jìn)行縮進(jìn)。按設(shè)計(jì)稿劃分模塊，盡量使頁面模塊化，模塊與模塊之前要有清晰的注釋。
HTML與SEO
頁面良好層次
保證整個(gè)頁面在未加載樣式表時(shí)仍有較好的層次清晰的頁面結(jié)構(gòu)。
<!-- 不推薦 -->
<div class="logo">My Site</div>
<div class="nav">
<a href="#">Home</a>
<a href="#">News</a>
<a href="#">Mobile</a>
</div>
<div class="news">
<div>News</div>
<a href="#">
news list 1</a>
<a href="#">
news list 2</a>
<a href="#">
news list 3</a>
</div>
<!-- 推薦 -->
<h1 class="logo">My Site</h1>
<ul class="nav">
<li><a href="#">
Home</a></li>
<li><a href="#">
News</a></li>
<li><a href="#">
Mobile</a></li>
</ul>
<div class="news">
<h2>News</h2>
<ul>
<li><a href="#">
news list 1</a>
</li>
<li><a href="#">
news list 2</a>
</li>
<li><a href="#">
news list 3</a>
</li>
</ul>
</div>
權(quán)重標(biāo)簽使用
H標(biāo)簽使用
h1 權(quán)重高，體現(xiàn)當(dāng)前網(wǎng)頁中相對比較重要的信息，但不宜過多，建議一個(gè)頁面只放一個(gè);
h2 可以做副標(biāo)題;
h3 可以做新聞列表;
h4-h6 可做相關(guān)新聞的列表標(biāo)簽屬性完整;
strong、b使用
將需要加粗的文字使用b標(biāo)簽來顯示。
將需要強(qiáng)調(diào)的文字（主要指包含關(guān)鍵詞的信息）使用strong標(biāo)簽來強(qiáng)調(diào)主要內(nèi)容。
注：b是粗體標(biāo)簽，屬于實(shí)體標(biāo)簽，它所包圍的字符將被設(shè)為bold（粗體）；strong 是加重語氣標(biāo)簽，屬于邏輯標(biāo)簽，它的作用是加強(qiáng)字符語氣。
標(biāo)簽屬性使用
在很多情況下，a都要使用title來說明該鏈接的相關(guān)說明或目的意義。
例如：當(dāng)使用overflow隱藏掉a中的溢出文字時(shí)，該a中的title是必不可少的，它可以告訴用戶被隱藏掉的文字內(nèi)容是什么；又或者當(dāng)一個(gè)圖片型鏈接出現(xiàn)時(shí)，該a中的title同樣是必不可少的，它可以告訴用戶這個(gè)圖片鏈接是做什么用的。
注：僅在img里添加alt標(biāo)簽在火狐提示文字是出不來的，alt是圖片加載失敗或未加載完全時(shí)顯示出來的提示文字，要想鼠標(biāo)移上去顯示提示信息應(yīng)該用title，嚴(yán)謹(jǐn)?shù)膶懛ㄊ?/span>img里加入alt和title這兩個(gè)標(biāo)簽。
精簡代碼
代碼保持精簡，最優(yōu)化，這樣搜索引擎才更喜歡。
閩公網(wǎng)安備 閩ICP備16005963號-3