HTML編碼規(guī)范

法

縮進(jìn)使用soft tab（4個(gè)空格）；
嵌套的節(jié)點(diǎn)應(yīng)該縮進(jìn)；
在屬性上，使用雙引號(hào)，不要使用單引號(hào)；
屬性名全小寫(xiě)，用中劃線(xiàn)做分隔符；
不要在自動(dòng)閉合標(biāo)簽結(jié)尾處使用斜線(xiàn)（HTML5 規(guī)范指出他們是可選的）；
不要忽略可選的關(guān)閉標(biāo)簽，例:

<!DOCTYPE html>
 <html>
 	<head>
 		<title>Page title</title>
 	</head>
 	<body> <img src="images/company_logo.png" alt="Company">
 		<h1 class="hello-world">Hello, world!</h1>
 	</body>
 </html>

HTML5 doctype在頁(yè)面開(kāi)頭使用這個(gè)簡(jiǎn)單地doctype來(lái)啟用標(biāo)準(zhǔn)模式，使其在每個(gè)瀏覽器中盡可能一致的展現(xiàn)；雖然doctype不區(qū)分大小寫(xiě)，但是按照慣例，doctype大寫(xiě) （關(guān)于html屬性，大寫(xiě)還是小寫(xiě)）。<!DOCTYPE html> <html> ... </html> lang屬性根據(jù)HTML5規(guī)范：應(yīng)在html標(biāo)簽上加上lang屬性。這會(huì)給語(yǔ)音工具和翻譯工具幫助，告訴它們應(yīng)當(dāng)怎么去發(fā)音和翻譯。
更多關(guān)于 lang 屬性的說(shuō)明在這里；在sitepoint上可以查到語(yǔ)言列表；
但sitepoint只是給出了語(yǔ)言的大類(lèi)，例如中文只給出了zh，但是沒(méi)有區(qū)分香港，臺(tái)灣，大陸。而微軟給出了一份更加詳細(xì)的語(yǔ)言列表.aspx)，其中細(xì)分了zh-cn, zh-hk, zh-tw。<!DOCTYPE html> <html lang="en-us"> ... </html> 字符編碼通過(guò)聲明一個(gè)明確的字符編碼，讓瀏覽器輕松、快速的確定適合網(wǎng)頁(yè)內(nèi)容的渲染方式，通常指定為’UTF-8’。<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> ... </html> IE兼容模式用 <meta> 標(biāo)簽可以指定頁(yè)面應(yīng)該用什么版本的IE來(lái)渲染；<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> </head> ... </html> 引入CSS, JS根據(jù)HTML5規(guī)范, 通常在引入CSS和JS時(shí)不需要指明 type，因?yàn)?text/css 和 text/javascript 分別是他們的默認(rèn)值。HTML5 規(guī)范鏈接使用link
使用style
使用script <link rel="stylesheet" href="code_guide.css">  <style> ... </style>  <script src="code_guide.js"></script>  <script> ... </script> 屬性順序屬性應(yīng)該按照特定的順序出現(xiàn)以保證易讀性；

class
id
name
data-*
src, for, type, href, value , max-length, max, min, pattern
placeholder, title, alt
aria-*, role
required, readonly, disabled

class是為高可復(fù)用組件設(shè)計(jì)的，所以應(yīng)處在第一位；
id更加具體且應(yīng)該盡量少使用，所以將它放在第二位。

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

<input class="form-control" type="text">

<img src="..." alt="...">

boolean屬性

boolean屬性指不需要聲明取值的屬性，XHTML需要每個(gè)屬性聲明取值，但是HTML5并不需要；
更多內(nèi)容可以參考 WhatWG section on boolean attributes：
boolean屬性的存在表示取值為true，不存在則表示取值為false。

<input type="text" disabled>

<input type="checkbox" value="1" checked>

<select>
    <option value="1" selected>1</option>
</select>

JS生成標(biāo)簽

在JS文件中生成標(biāo)簽讓內(nèi)容變得更難查找，更難編輯，性能更差。應(yīng)該盡量避免這種情況的出現(xiàn)。

減少標(biāo)簽數(shù)量

在編寫(xiě)HTML代碼時(shí)，需要盡量避免多余的父節(jié)點(diǎn)；很多時(shí)候，需要通過(guò)迭代和重構(gòu)來(lái)使HTML變得更少。

<!-- Not well -->
<span class="avatar">
    <img src="...">
</span>

<!-- Better -->
<img class="avatar" src="...">

實(shí)用高于完美

盡量遵循HTML標(biāo)準(zhǔn)和語(yǔ)義，但是不應(yīng)該以浪費(fèi)實(shí)用性作為代價(jià)；任何時(shí)候都要用盡量小的復(fù)雜度和盡量少的標(biāo)簽來(lái)解決問(wèn)題。

TML 代碼約定

很多 Web 開(kāi)發(fā)人員對(duì) HTML 的代碼規(guī)范知之甚少。

在2000年至2010年，許多Web開(kāi)發(fā)人員從 HTML 轉(zhuǎn)換到 XHTML。

使用 XHTML 開(kāi)發(fā)人員逐漸養(yǎng)成了比較好的 HTML 編寫(xiě)規(guī)范。

而針對(duì)于 HTML5 ，我們應(yīng)該形成比較好的代碼規(guī)范，以下提供了幾種規(guī)范的建議。

使用正確的文檔類(lèi)型

文檔類(lèi)型聲明位于HTML文檔的第一行：

<!DOCTYPE html>

如果你想跟其他標(biāo)簽一樣使用小寫(xiě)，可以使用以下代碼：

<!doctype html>

使用小寫(xiě)元素名

HTML5 元素名可以使用大寫(xiě)和小寫(xiě)字母。

推薦使用小寫(xiě)字母：

混合了大小寫(xiě)的風(fēng)格是非常糟糕的。
開(kāi)發(fā)人員通常使用小寫(xiě) (類(lèi)似 XHTML)。
小寫(xiě)風(fēng)格看起來(lái)更加清爽。
小寫(xiě)字母容易編寫(xiě)。

不推薦:

</SECTION>

非常糟糕:

</SECTION>

推薦:

<body>

<p>菜鳥(niǎo)教程，學(xué)的不僅是技術(shù)，更是夢(mèng)想。

菜鳥(niǎo)教程，學(xué)的不僅是技術(shù)，更是夢(mèng)想。

菜鳥(niǎo)教程，學(xué)的不僅是技術(shù)，更是夢(mèng)想。</p>

</body>

表格實(shí)例:

<table>

<tr>

<th>Description</th>

</tr>

<tr>

<td>Description of A</td>

</tr>

<tr>

<td>Description of B</td>

</tr>

</table>

列表實(shí)例:

<ol>

<li>London</li>

<li>Paris</li>

<li>Tokyo</li>

</ol>

省略 <html> 和 <body>?

在標(biāo)準(zhǔn) HTML5 中， <html> 和 <body> 標(biāo)簽是可以省略的。

以下 HTML5 文檔是正確的:

實(shí)例:

<!DOCTYPE html>

<head>

</head>

嘗試一下 ?

不推薦省略 <html> 和 <body> 標(biāo)簽。

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

<!DOCTYPE html>

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

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

省略 <body> 在舊版瀏覽器 (IE9)會(huì)發(fā)生錯(cuò)誤。

省略 <head>?

在標(biāo)準(zhǔn) HTML5 中， <head>標(biāo)簽是可以省略的。

默認(rèn)情況下，瀏覽器會(huì)將 <body> 之前的內(nèi)容添加到一個(gè)默認(rèn)的 <head> 元素上。

實(shí)例

<!DOCTYPE html>

<html>

<body>

</body>

</html>

嘗試一下 ?

	現(xiàn)在省略 head 標(biāo)簽還不推薦使用。

元數(shù)據(jù)

HTML5 中 <title> 元素是必須的，標(biāo)題名描述了頁(yè)面的主題:

標(biāo)題和語(yǔ)言可以讓搜索引擎很快了解你頁(yè)面的主題:

<!DOCTYPE html>

<head>

</head>

HTML 注釋

注釋可以寫(xiě)在  中:

比較長(zhǎng)的評(píng)論可以在  中分行寫(xiě)：

<!--

這是一個(gè)較長(zhǎng)評(píng)論。這是一個(gè)較長(zhǎng)評(píng)論。這是一個(gè)較長(zhǎng)評(píng)論。

這是一個(gè)較長(zhǎng)評(píng)論這是一個(gè)較長(zhǎng)評(píng)論。這是一個(gè)較長(zhǎng)評(píng)論。

-->

長(zhǎng)評(píng)論第一個(gè)字符縮進(jìn)兩個(gè)空格，更易于閱讀。

樣式表

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

短的規(guī)則可以寫(xiě)成一行:

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

長(zhǎng)的規(guī)則可以寫(xiě)成多行:

body {

background-color: lightgrey;

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

font-size: 16em;

color: black;

}

將左花括號(hào)與選擇器放在同一行。
左花括號(hào)與選擇器間添加以空格。
使用兩個(gè)空格來(lái)縮進(jìn)。
冒號(hào)與屬性值之間添加已空格。
逗號(hào)和符號(hào)之后使用一個(gè)空格。
每個(gè)屬性與值結(jié)尾都要使用符號(hào)。
只有屬性值包含空格時(shí)才使用引號(hào)。
右花括號(hào)放在新的一行。
每行最多 80 個(gè)字符。

	在逗號(hào)和分號(hào)后添加空格是常用的一個(gè)規(guī)則。

在 HTML 中載入 JavaScript

使用簡(jiǎn)潔的語(yǔ)法來(lái)載入外部的腳本文件 ( type 屬性不是必須的 ):

使用 JavaScript 訪(fǎng)問(wèn) HTML 元素

一個(gè)糟糕的 HTML 格式可能會(huì)導(dǎo)致 JavaScript 執(zhí)行錯(cuò)誤。

以下兩個(gè) JavaScript 語(yǔ)句會(huì)輸出不同結(jié)果:

實(shí)例

var obj = getElementById("Demo")

var obj = getElementById("demo")

HTML 中 JavaScript 盡量使用相同的命名規(guī)則。

訪(fǎng)問(wèn) JavaScript 代碼規(guī)范。

使用小寫(xiě)文件名

大多 Web 服務(wù)器 (Apache, Unix) 對(duì)大小寫(xiě)敏感： london.jpg 不能通過(guò) London.jpg 訪(fǎng)問(wèn)。

其他 Web 服務(wù)器 (Microsoft, IIS) 對(duì)大小寫(xiě)不敏感： london.jpg 可以通過(guò) London.jpg 或 london.jpg 訪(fǎng)問(wèn)。

你必須保持統(tǒng)一的風(fēng)格，我們建議統(tǒng)一使用小寫(xiě)的文件名。

文件擴(kuò)展名

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

CSS 文件后綴是 .css 。

JavaScript 文件后綴是 .js 。

.htm 和 .html 的區(qū)別

.htm 和 .html 的擴(kuò)展名文件本質(zhì)上是沒(méi)有區(qū)別的。瀏覽器和 Web 服務(wù)器都會(huì)把它們當(dāng)作 HTML 文件來(lái)處理。

區(qū)別在于：

.htm 應(yīng)用在早期 DOS 系統(tǒng)，系統(tǒng)現(xiàn)在或者只能有三個(gè)字符。

在 Unix 系統(tǒng)中后綴沒(méi)有特別限制，一般用 .html。

技術(shù)上區(qū)別

如果一個(gè) URL 沒(méi)有指定文件名 (如 http://www.runoob.com/css/), 服務(wù)器會(huì)返回默認(rèn)的文件名。通常默認(rèn)文件名為 index.html, index.htm, default.html, 和 default.htm。

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

但是，通常服務(wù)器可以設(shè)置多個(gè)默認(rèn)文件，你可以根據(jù)需要設(shè)置默認(rèn)文件嗎。

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

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

TML 實(shí)例

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>菜鳥(niǎo)教程(runoob.com)</title></head><body><h1>我的第一個(gè)標(biāo)題</h1><p>我的第一個(gè)段落。</p></body></html>

實(shí)例解析

DOCTYPE 聲明了文檔類(lèi)型
位于標(biāo)簽 <html> 與 </html> 描述了文檔類(lèi)型
位于標(biāo)簽 <body> 與 </body> 為可視化網(wǎng)頁(yè)內(nèi)容
位于標(biāo)簽 <h1> 與 </h1> 作為一個(gè)標(biāo)題使用
位于標(biāo)簽 <p> 與 </p> 作為一個(gè)段落顯示

	<!DOCTYPE html> 在HTML5中也是描述了文檔類(lèi)型。

什么是HTML?

HTML 是用來(lái)描述網(wǎng)頁(yè)的一種語(yǔ)言。

HTML 指的是超文本標(biāo)記語(yǔ)言: HyperText Markup Language
HTML 不是一種編程語(yǔ)言，而是一種標(biāo)記語(yǔ)言
標(biāo)記語(yǔ)言是一套標(biāo)記標(biāo)簽 (markup tag)
HTML 使用標(biāo)記標(biāo)簽來(lái)描述網(wǎng)頁(yè)
HTML 文檔包含了HTML 標(biāo)簽及文本內(nèi)容
HTML文檔也叫做 web 頁(yè)面

HTML 標(biāo)簽

HTML 標(biāo)記標(biāo)簽通常被稱(chēng)為 HTML 標(biāo)簽 (HTML tag)。

HTML 標(biāo)簽是由尖括號(hào)包圍的關(guān)鍵詞，比如 <html>
HTML 標(biāo)簽通常是成對(duì)出現(xiàn)的，比如 <b> 和 </b>
標(biāo)簽對(duì)中的第一個(gè)標(biāo)簽是開(kāi)始標(biāo)簽，第二個(gè)標(biāo)簽是結(jié)束標(biāo)簽
開(kāi)始和結(jié)束標(biāo)簽也被稱(chēng)為開(kāi)放標(biāo)簽和閉合標(biāo)簽

<標(biāo)簽>內(nèi)容</標(biāo)簽>

HTML 元素

"HTML 標(biāo)簽" 和 "HTML 元素" 通常都是描述同樣的意思.

但是嚴(yán)格來(lái)講, 一個(gè) HTML 元素包含了開(kāi)始標(biāo)簽與結(jié)束標(biāo)簽，如下實(shí)例:

HTML 元素:

Web 瀏覽器

Web瀏覽器（如谷歌瀏覽器，Internet Explorer，F(xiàn)irefox，Safari）是用于讀取HTML文件，并將其作為網(wǎng)頁(yè)顯示。

瀏覽器并不是直接顯示的HTML標(biāo)簽，但可以使用標(biāo)簽來(lái)決定如何展現(xiàn)HTML頁(yè)面的內(nèi)容給用戶(hù)：

HTML 網(wǎng)頁(yè)結(jié)構(gòu)

下面是一個(gè)可視化的HTML頁(yè)面結(jié)構(gòu)：

<html>

<head>

</head>

<body>

<p>這是另外一個(gè)段落。</p>

</body>

</html>

	只有 <body> 區(qū)域 (白色部分) 才會(huì)在瀏覽器中顯示。

HTML版本

從初期的網(wǎng)絡(luò)誕生后，已經(jīng)出現(xiàn)了許多HTML版本:

版本	發(fā)布時(shí)間
HTML	1991
HTML+	1993
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML 1.0	2000
HTML5	2012
XHTML5	2013

<!DOCTYPE> 聲明

<!DOCTYPE>聲明有助于瀏覽器中正確顯示網(wǎng)頁(yè)。

網(wǎng)絡(luò)上有很多不同的文件，如果能夠正確聲明HTML的版本，瀏覽器就能正確顯示網(wǎng)頁(yè)內(nèi)容。

doctype 聲明是不區(qū)分大小寫(xiě)的，以下方式均可：

<!DOCTYPE html>

<!DOCTYPE HTML>

<!doctype html>

<!Doctype Html>

通用聲明

HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

查看完整網(wǎng)頁(yè)聲明類(lèi)型 DOCTYPE 參考手冊(cè)。

中文編碼

目前在大部分瀏覽器中，直接輸出中文會(huì)出現(xiàn)中文亂碼的情況，這時(shí)候我們就需要在頭部將字符聲明為 UTF-8。

HTML 實(shí)例

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>頁(yè)面標(biāo)題</title></head><body><h1>我的第一個(gè)標(biāo)題</h1><p>我的第一個(gè)段落。</p></body></html>

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

在線(xiàn)咨詢(xún)

上一篇：html常用代碼大全
下一篇：HTML編輯器實(shí)現(xiàn)CTRL+V粘貼圖片并上傳、WORD粘貼帶圖片

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

HTML編碼規(guī)范

法

boolean屬性

JS生成標(biāo)簽

減少標(biāo)簽數(shù)量

實(shí)用高于完美

您的項(xiàng)目需求