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這兩個標簽。

精簡代碼

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

html網頁中顯示html代碼

方法1

<textarea> 這里是代碼<!DOCTYPE HTML><html lang="zh-CN"> <meta charset="UTF-8"> </textarea>

<textarea> 這里是代碼<!DOCTYPE HTML><html lang="zh-CN"> <meta charset="UTF-8"> </textarea>

效果

TML 代碼約定

很多 Web 開發人員對 HTML 的代碼規范知之甚少。

在2000年至2010年，許多Web開發人員從 HTML 轉換到 XHTML。

使用 XHTML 開發人員逐漸養成了比較好的 HTML 編寫規范。

而針對于 HTML5 ，我們應該形成比較好的代碼規范，以下提供了幾種規范的建議。

使用正確的文檔類型

文檔類型聲明位于HTML文檔的第一行：

<!DOCTYPE html>

如果你想跟其他標簽一樣使用小寫，可以使用以下代碼：

<!doctype html>

使用小寫元素名

HTML5 元素名可以使用大寫和小寫字母。

推薦使用小寫字母：

混合了大小寫的風格是非常糟糕的。
開發人員通常使用小寫 (類似 XHTML)。
小寫風格看起來更加清爽。
小寫字母容易編寫。

不推薦:

<p>這是一個段落。</p>

</SECTION>

非常糟糕:

<p>這是一個段落。</p>

</SECTION>

推薦:

<body>

<p>菜鳥教程，學的不僅是技術，更是夢想。

菜鳥教程，學的不僅是技術，更是夢想。

菜鳥教程，學的不僅是技術，更是夢想。</p>

</body>

表格實例:

<table>

<tr>

<th>Description</th>

</tr>

<tr>

<td>Description of A</td>

</tr>

<tr>

<td>Description of B</td>

</tr>

</table>

列表實例:

<ol>

<li>London</li>

<li>Paris</li>

<li>Tokyo</li>

</ol>

省略 <html> 和 <body>?

在標準 HTML5 中， <html> 和 <body> 標簽是可以省略的。

以下 HTML5 文檔是正確的:

實例:

<!DOCTYPE html>

<head>

</head>

<h1>這是一個標題</h1>

<p>這是一個段落。</p>

嘗試一下 ?

不推薦省略 <html> 和 <body> 標簽。

<html> 元素是文檔的根元素，用于描述頁面的語言：

<!DOCTYPE html>

聲明語言是為了方便屏幕閱讀器及搜索引擎。

省略 <html> 或 <body> 在 DOM 和 XML 軟件中會崩潰。

省略 <body> 在舊版瀏覽器 (IE9)會發生錯誤。

省略 <head>?

在標準 HTML5 中， <head>標簽是可以省略的。

默認情況下，瀏覽器會將 <body> 之前的內容添加到一個默認的 <head> 元素上。

實例

<!DOCTYPE html>

<html>

<body>

<h1>這是一個標題</h1>

<p>這是一個段落。</p>

</body>

</html>

嘗試一下 ?

	現在省略 head 標簽還不推薦使用。

元數據

HTML5 中 <title> 元素是必須的，標題名描述了頁面的主題:

標題和語言可以讓搜索引擎很快了解你頁面的主題:

<!DOCTYPE html>

<head>

</head>

HTML 注釋

注釋可以寫在  中:

比較長的評論可以在  中分行寫：

<!--

這是一個較長評論。這是一個較長評論。這是一個較長評論。

這是一個較長評論這是一個較長評論。這是一個較長評論。

-->

長評論第一個字符縮進兩個空格，更易于閱讀。

樣式表

樣式表使用簡潔的語法格式 ( type 屬性不是必須的):

短的規則可以寫成一行:

p.into {font-family: Verdana; font-size: 16em;}

長的規則可以寫成多行:

body {

background-color: lightgrey;

font-family: "Arial Black", Helvetica, sans-serif;

font-size: 16em;

color: black;

}

將左花括號與選擇器放在同一行。
左花括號與選擇器間添加以空格。
使用兩個空格來縮進。
冒號與屬性值之間添加已空格。
逗號和符號之后使用一個空格。
每個屬性與值結尾都要使用符號。
只有屬性值包含空格時才使用引號。
右花括號放在新的一行。
每行最多 80 個字符。

	在逗號和分號后添加空格是常用的一個規則。

在 HTML 中載入 JavaScript

使用簡潔的語法來載入外部的腳本文件 ( type 屬性不是必須的 ):

使用 JavaScript 訪問 HTML 元素

一個糟糕的 HTML 格式可能會導致 JavaScript 執行錯誤。

以下兩個 JavaScript 語句會輸出不同結果:

實例

var obj = getElementById("Demo")

var obj = getElementById("demo")

HTML 中 JavaScript 盡量使用相同的命名規則。

訪問 JavaScript 代碼規范。

使用小寫文件名

大多 Web 服務器 (Apache, Unix) 對大小寫敏感： london.jpg 不能通過 London.jpg 訪問。

其他 Web 服務器 (Microsoft, IIS) 對大小寫不敏感： london.jpg 可以通過 London.jpg 或 london.jpg 訪問。

你必須保持統一的風格，我們建議統一使用小寫的文件名。

文件擴展名

HTML 文件后綴可以是 .html (或r .htm)。

CSS 文件后綴是 .css 。

JavaScript 文件后綴是 .js 。

.htm 和 .html 的區別

.htm 和 .html 的擴展名文件本質上是沒有區別的。瀏覽器和 Web 服務器都會把它們當作 HTML 文件來處理。

區別在于：

.htm 應用在早期 DOS 系統，系統現在或者只能有三個字符。

在 Unix 系統中后綴沒有特別限制，一般用 .html。

技術上區別

如果一個 URL 沒有指定文件名 (如 http://www.runoob.com/css/), 服務器會返回默認的文件名。通常默認文件名為 index.html, index.htm, default.html, 和 default.htm。

如果服務器只配置了 "index.html" 作為默認文件，你必須將文件命名為 "index.html", 而不是 "index.htm"。

但是，通常服務器可以設置多個默認文件，你可以根據需要設置默認文件嗎。

不管怎樣，HTML 完整的后綴是 ".html"。

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

在線咨詢

上一篇：HTML+CSS：曾輝煌一時的table，詳解table標簽的語法與使用
下一篇：小程序的HTML和Markdown格式的富文本渲染組件，支持代碼高亮！

您的項目需求

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

整合營銷服務商

HTML編碼規范

版規則

縮進

大小寫

行為空格

常規Meta規則

編碼

注釋

常規HTML設計規則

文檔類型

HTML 的正確性

HTML 的語義性

多媒體元素降級處理

type屬性

HTML代碼格式規則

HTML與SEO

頁面良好層次

權重標簽使用

標簽屬性使用

精簡代碼

您的項目需求