HTML編碼規范

版規則

縮進

使用2個空格縮進

<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>

常規Meta規則

編碼

如果沒有特殊需求，一般采用utf-8編碼。如果是cms站點，則遵守該站點的編碼規則。

<!-- 網頁編碼 -->
<meta charset="utf-8">

注釋

盡可能的去解釋你寫的代碼。說明該代碼包括什么、目的是什么、能做什么、為什么使用它等。

注釋是否需要詳盡，取決于項目的復雜程度。

一般單行注釋：

<!-- col -->

模塊間注釋：

<!-- news -->
<div class="news">
  <h2>News</h2>
  <p>...</p>
</div>
<!--/ news -->

循環注釋：

<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>
  <!-- /loop: new list -->
</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選項卡內容注釋：

<!-- tab: news list -->
<div class="tab"></div>
<!-- /tab: news list -->

常規HTML設計規則

文檔類型

使用html5文檔聲明，不再使用XHTML（application/xhtml+xml）。

HTML5是目前所有HTML文檔類型中的首選：

<!DOCTYPE html>

HTML 的正確性

編寫有效、正確的HTML代碼，否則很難達到性能上的提升。

可以使用一些工具驗證你的代碼，如 W3C HTML validator

HTML 的語義性

根據HTML各個元素的用途而去使用它們。

<!-- 不推薦 -->
<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>

部分標簽說明：

div 主要用于布局，分割頁面的結構;
ul/ol 主要用于無序/有序列表;
dl/dt/dd 當頁面中出現第一行為類似標題/簡述，然后下面為詳細描述的內容時應該使用該標簽;
span 沒有特殊的意義，可以用作排版的輔助，然后在css中定義span;
h1-h6 標題, 根據重要性依次遞減;
h1 最重要的標題;
label 使表單更有親和力而且能輔助表單排版;

不推薦使用的標簽：

font 文字的外觀，大小和顏色;
u 文本下劃線;
center 居中對齊;
s 刪除線;
strike 刪除線;
noframes 無視框時的內容;
iframe 定義嵌入視圖;
isindex 不建議使用（可搜尋，使用input代替）;
dir 目錄式列舉;
menu 菜單列表;
basefont 定義基本字體;
applet 定義java程序;
frame 定義個別視框;
frameset 視框格式總定義;

多媒體元素降級處理

給多媒體元素，比如canvas、videos、 images增加alt屬性，提高可用性（特別是常用的img標簽，盡可量得加上alt屬性，提供圖片的描述信息）。

<!-- 不推薦 -->
<img src="world.jpg">

<!-- 推薦 -->
<img src="world.jpg"
alt="our world images">

type屬性

在樣式表和腳本的標簽中忽略type屬性。

HTML5默認type為text/css和text/javascript類型，所以沒必要指定。即便是老瀏覽器也是支持的。

<!-- 不推薦 -->
<link rel="stylesheet"
 href="//www.google.com/css/maia.css"
 type="text/css">
<script src="
 //www.google.com/
 js/gweb/analytics/autotrack.js"
 type="text/javascript">
 </script>

<!-- 推薦 -->
<link rel="stylesheet"
 href="//www.google.com/css/maia.css">
<script src="
 //www.google.com/
 js/gweb/analytics/autotrack.js">
 </script>

HTML代碼格式規則

每個塊元素、列表元素或表格元素都獨占一行，每個子元素都相對于父元素進行縮進。按設計稿劃分模塊，盡量使頁面模塊化，模塊與模塊之前要有清晰的注釋。

如上面頁面框架，推薦寫法：

<!-- hader -->
<div class="header">header</div>
<!-- /hader -->
<!-- nav -->
<div class="nav">nav</div>
<!-- /nav -->
<!-- main -->
<div class="main">
  <!-- container -->
  <div class="container">
    <!--news-->
    <div class="news">
      <h2>news<h2>
      <p>...</p>
    </div>
    <!--news-->
  </div>
  <!--/container-->
  <!--sidebar-->
  <div class="sidebar">
sidebar</div>
  <!--sidebar-->
</div>
<!--/main-->
<!--footer-->
<div class="footer">
footer</div>
<!--/footer-->

HTML與SEO

頁面良好層次

保證整個頁面在未加載樣式表時仍有較好的層次清晰的頁面結構。

<!-- 不推薦 -->
<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>

權重標簽使用

H標簽使用

h1 權重高，體現當前網頁中相對比較重要的信息，但不宜過多，建議一個頁面只放一個;
h2 可以做副標題;
h3 可以做新聞列表;
h4-h6 可做相關新聞的列表標簽屬性完整;

strong、b使用

將需要加粗的文字使用b標簽來顯示。

將需要強調的文字（主要指包含關鍵詞的信息）使用strong標簽來強調主要內容。

注：b是粗體標簽，屬于實體標簽，它所包圍的字符將被設為bold（粗體）；strong 是加重語氣標簽，屬于邏輯標簽，它的作用是加強字符語氣。

標簽屬性使用

在很多情況下，a都要使用title來說明該鏈接的相關說明或目的意義。

例如：當使用overflow隱藏掉a中的溢出文字時，該a中的title是必不可少的，它可以告訴用戶被隱藏掉的文字內容是什么；又或者當一個圖片型鏈接出現時，該a中的title同樣是必不可少的，它可以告訴用戶這個圖片鏈接是做什么用的。

注：僅在img里添加alt標簽在火狐提示文字是出不來的，alt是圖片加載失敗或未加載完全時顯示出來的提示文字，要想鼠標移上去顯示提示信息應該用title，嚴謹的寫法是img里加入alt和title這兩個標簽。

精簡代碼

代碼保持精簡，最優化，這樣搜索引擎才更喜歡。

法

用兩個空格來代替制表符（tab） -- 這是唯一能保證在所有環境下獲得一致展現的方法。
嵌套元素應當縮進一次（即兩個空格）。
對于屬性的定義，確保全部使用雙引號，絕不要使用單引號。
不要在自閉合（self-closing）元素的尾部添加斜線 -- HTML5 規范中明確說明這是可選的。
不要省略可選的結束標簽（closing tag）（例如，</li> 或 </body>）。

實例：

<!DOCTYPE html><html>

HTML5 doctype

為每個 HTML 頁面的第一行添加標準模式（standard mode）的聲明，這樣能夠確保在每個瀏覽器中擁有一致的展現。

實例：

<!DOCTYPE html><html>

語言屬性

根據 HTML5 規范：

強烈建議為 html 根元素指定 lang 屬性，從而為文檔設置正確的語言。這將有助于語音合成工具確定其所應該采用的發音，有助于翻譯工具確定其翻譯時所應遵守的規則等等。

lang 屬性的知識可以從此規范中了解。

這里列出了語言代碼表。

<html lang="zh-CN">

IE 兼容模式

IE 支持通過特定的 <meta> 標簽來確定繪制當前頁面所應該采用的 IE 版本。除非有強烈的特殊需求，否則最好是設置為 edge mode，從而通知 IE 采用其所支持的最新的模式。

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

字符編碼

通過明確聲明字符編碼，能夠確保瀏覽器快速并容易的判斷頁面內容的渲染方式。這樣做的好處是，可以避免在 HTML 中使用字符實體標記（character entity），從而全部與文檔編碼一致（一般采用 UTF-8 編碼）。

<head>

引入 CSS 和 JavaScript 文件

根據 HTML5 規范，在引入 CSS 和 JavaScript 文件時一般不需要指定 type 屬性，因為 text/css 和 text/javascript 分別是它們的默認值。

HTML5 spec links

Using link
Using style
Using script

<!-- External CSS --><link rel="stylesheet" href="code-guide.css"><!-- In-document CSS --><style>

實用為王

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

屬性順序

HTML 屬性應當按照以下給出的順序依次排列，確保代碼的易讀性。

class
id, name
data-*
src, for, type, href
title, alt
aria-*, role

class 用于標識高度可復用組件，因此應該排在首位。id 用于標識具體組件，應當謹慎使用（例如，頁面內的書簽），因此排在第二位。

<a class="..." id="..." data-modal="toggle" href="#">

布爾（boolean）型屬性

布爾型屬性可以在聲明時不賦值。XHTML 規范要求為其賦值，但是 HTML5 規范不需要。

更多信息請參考 WhatWG section on boolean attributes：

元素的布爾型屬性如果有值，就是 true，如果沒有值，就是 false。

如果一定要為其賦值的話，請參考 WhatWG 規范：

如果屬性存在，其值必須是空字符串或 [...] 屬性的規范名稱，并且不要在首尾添加空白符。

簡單來說，就是不用賦值。

<input type="text" disabled><input type="checkbox" value="1" checked><select>

減少標簽的數量

編寫 HTML 代碼時，盡量避免多余的父元素。很多時候，這需要迭代和重構來實現。請看下面的案例：

<!-- Not so great --><span class="avatar">

JavaScript 生成的標簽

通過 JavaScript 生成的標簽讓內容變得不易查找、編輯，并且降低性能。能避免時盡量避免。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

TML5聲明與編碼設置

HTML5的DOCTYPE聲明

<!DOCTYPE html>

語言的聲明方式

lang屬性設置為zh-CN，表示文件內容使用簡體中文

網頁編碼的聲明

HTML5編號列表新增的屬性

type 設置值有5種

1 默認值。數字有序列表。(1、2、3、4)

a 按字母順序排列的有序列表，小寫。(a、b、c、d)

A 按字母順序排列的有序列表，大寫。(A、B、C、D)

i 羅馬字母，小寫。(i, ii, iii, iv)

I 羅馬字母，大寫。(I, II, III, IV)

HTML5新增的屬性

start 設定編號的起始值。默認值：start=1

reversed 反向排序,數字改為由大到小(IE9不支持)。設定值reversed

HTML5與HTML4的差異

1.語法簡化

HTML,XHTML的DOCTYPE,html,meta,script等標記,在HTML5中有大同謀的簡化;

2.統一網頁內嵌影音和語法

以前我們在網頁中播放影音時,需要使用Active或Plug-in的方式來完成;

3.新增<header>,<foot>,<section>,<article>等語義標記

4.HTML5廢除了一些舊的標記

HTML5中已經去除了<font>,<big>,<u>等.

5.全新的表單設計

對于網頁程序設計者來說,表彰是最常用的功能,在這方面,HTML5做了很大的更改,不但新增了幾項新的標記,原來的<form>標記也增加了許多屬性;

6.利用<canvas>標記繪制圖形

HTML5新增了具有繪圖功能的<canvas>標記,利用它可以搭配Javascript語法在網頁上畫出線條和圖形;

7.提供API開發網頁應用程序

為了讓網頁程序設計者開發網頁設計應用程序,HTML5提供了多種API供設計者使用,例如Web SQL Database讓設計者可以脫機訪問客戶端的數據庫.

量化評分網站：http://html5test.com HTML5一共555個新特性, 每個小點算一個, 不分權重。

https://caniuse.com/

在線咨詢

上一篇：HTML圖像標記
下一篇：騷操作：如何讓一個網頁一直處于空白情況？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商