你應(yīng)該要知道的，前端開(kāi)發(fā)過(guò)程中的HTML規(guī)范

言

程序開(kāi)發(fā)過(guò)程中，我們始終要謹(jǐn)記的一點(diǎn)就是：程序是寫(xiě)給人看的，不是寫(xiě)給機(jī)器看的。任何項(xiàng)目開(kāi)發(fā)，都必須要考慮到人員迭代，我們不能讓下一個(gè)接手你代碼的人，在看到你寫(xiě)的代碼時(shí)會(huì)說(shuō)出這樣的話，“這個(gè)代碼是人寫(xiě)出來(lái)的嗎？可讀性太差了”。因此，我們必須遵循一定的規(guī)范，讓代碼的可讀性更強(qiáng)。

今天，我們就一起來(lái)看下前端開(kāi)發(fā)過(guò)程所能涉及到的跟HTML有關(guān)的規(guī)范問(wèn)題。

HTML5

文檔類型

在HTML文件中，推薦使用支持HTML5特性的文檔聲明，<!DOCTYPE html>。

命名規(guī)范

首先是在文件的命名上，應(yīng)當(dāng)采用駝峰式命名，首字母小寫(xiě)，后面每個(gè)單詞首字母大寫(xiě)，而且對(duì)于具體的文件應(yīng)當(dāng)具有語(yǔ)義化，能夠給人一種直觀的感受這個(gè)文件的作用是什么。現(xiàn)在前端開(kāi)發(fā)開(kāi)發(fā)過(guò)程中都講求模塊化開(kāi)發(fā)，甚至是組件化開(kāi)發(fā)，在文件命名時(shí)更應(yīng)該以模塊名或者組件名來(lái)命名。

例如在寫(xiě)一個(gè)AngularJS應(yīng)用時(shí)，由于會(huì)涉及到Controller，Service，F(xiàn)ilter等概念，我們會(huì)分別建立一個(gè)文件，假如這個(gè)模塊的名字是庫(kù)存管理stockManage，我們可以這樣來(lái)命名文件。

stockManageCtrl
stockChangeService
stockChangeFilter

語(yǔ)義化

我們所說(shuō)的語(yǔ)義化指的是使用具有語(yǔ)義化的標(biāo)簽，在H5中添加了類似于header, nav, article, section, aside, footer等標(biāo)簽，從單詞的意思上我們也很容易看出標(biāo)簽的含義。

我們不推薦使用只有div標(biāo)簽的頁(yè)面，例如

不推薦使用

而是應(yīng)該使用以下這種帶有語(yǔ)義化的標(biāo)簽。

推薦使用

img標(biāo)簽

img標(biāo)簽是網(wǎng)頁(yè)用來(lái)顯示照片的標(biāo)簽，在頁(yè)面所有標(biāo)簽中占據(jù)的比例非常之高，但是在使用img標(biāo)簽時(shí)也有下面需要注意的點(diǎn)。

給定width和height屬性

因?yàn)闉g覽器在加載圖片的過(guò)程中，需要先下載圖片，然后再解析圖片的高度和寬度，如果不給img元素設(shè)定高度和寬度，這樣在圖片加載過(guò)程中會(huì)不斷的計(jì)算，重排頁(yè)面的布局，在網(wǎng)絡(luò)不好的時(shí)候就會(huì)經(jīng)常出現(xiàn)元素出現(xiàn)不規(guī)律移動(dòng)的情況。因此給img元素設(shè)定width和height屬性是必要的。

alt屬性

img標(biāo)簽的alt屬性表示的是在圖片無(wú)法顯示時(shí)，使用文字來(lái)代替顯示，它可以用在以下幾個(gè)場(chǎng)景中：

網(wǎng)路延遲太大
src屬性指定路徑出錯(cuò)
瀏覽器禁用圖像

由于其有良好的信息提示效果，并且有助于網(wǎng)頁(yè)SEO效果，強(qiáng)烈建議在img標(biāo)簽中使用alt屬性。

而且很重要的一點(diǎn)是img標(biāo)簽的引入是需要呈現(xiàn)出與頁(yè)面相關(guān)的內(nèi)容，其他情況應(yīng)該使用CSS樣式實(shí)現(xiàn)。例如我們不推薦下面這種情況。

不推薦

而推薦使用下面這種情況

推薦使用

文件分離

前端文件主要包括HTML頁(yè)面文件，CSS樣式文件和Javascript腳本文件。我們應(yīng)該讓三者各司其職，在HTML中不應(yīng)該出現(xiàn)CSS和JS表達(dá)式；在JS文件中，不應(yīng)該出現(xiàn)大量的HTML和CSS代碼。在HTML文檔中應(yīng)當(dāng)盡量少的引入CSS和JS文件。為了保證文件的純凈，我們應(yīng)當(dāng)遵循下面的原則。

一個(gè)HTML文件應(yīng)該只引入一個(gè)CSS文件
合理運(yùn)用JS合并技術(shù)（Gulp, Webpack插件），保證引入JS文件不多于兩個(gè)
不使用行內(nèi)腳本元素（<script>alert('Hello World')</script>）
不在標(biāo)簽上使用style內(nèi)聯(lián)樣式

不要使用style屬性

腳本加載

腳本加載在網(wǎng)頁(yè)加載過(guò)程中是一個(gè)很耗性能的過(guò)程，如果把JS文件放在head標(biāo)簽里，它的加載會(huì)一直阻塞DOM的解析，造成頁(yè)面延遲。

因此現(xiàn)在講求的是腳本的異步加載過(guò)程，我們會(huì)使用到async關(guān)鍵字，考慮到瀏覽器的兼容性，我們推薦使用下面的方式加載腳本。

推薦方式

合理使用ID和錨點(diǎn)

合理使用ID和錨點(diǎn)可以非常方便的實(shí)現(xiàn)當(dāng)前頁(yè)面間的跳轉(zhuǎn)，現(xiàn)在越來(lái)越多的教程網(wǎng)頁(yè)由于是單頁(yè)面，經(jīng)常會(huì)用到錨點(diǎn)跳轉(zhuǎn)。

對(duì)錨點(diǎn)知識(shí)還不了解的，可以看看我寫(xiě)的這篇文章《神奇的html錨點(diǎn)，讓你的網(wǎng)頁(yè)在內(nèi)部自由的跳轉(zhuǎn)》。

總結(jié)

今天這篇文章主要總結(jié)了前端開(kāi)發(fā)過(guò)程中的HTML規(guī)范問(wèn)題，相信大家也或多或少遇到過(guò)，希望這篇文章能加深大家的認(rèn)識(shí)。

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ī)范的建議。

使用正確的文檔類型

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

<!DOCTYPE html>

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

<!doctype html>

使用小寫(xiě)元素名

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

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

混合了大小寫(xiě)的風(fēng)格是非常糟糕的。
開(kāi)發(fā)人員通常使用小寫(xiě) (類似 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 訪問(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ī)則。

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

使用小寫(xiě)文件名

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

其他 Web 服務(wù)器 (Microsoft, IIS) 對(duì)大小寫(xiě)不敏感： london.jpg 可以通過(guò) London.jpg 或 london.jpg 訪問(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，我們一起飛！

法

縮進(jìn)使用soft tab（4個(gè)空格）；
嵌套的節(jié)點(diǎn)應(yīng)該縮進(jìn)；
在屬性上，使用雙引號(hào)，不要使用單引號(hào)；
屬性名全小寫(xiě)，用中劃線做分隔符；
不要在自動(dòng)閉合標(biāo)簽結(jié)尾處使用斜線（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ǔ)言的大類，例如中文只給出了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)題。

在線咨詢

上一篇：HTML教程（看完這篇就夠了）
下一篇：HTML 5 - 交互

您的項(xiàng)目需求

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

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

你應(yīng)該要知道的，前端開(kāi)發(fā)過(guò)程中的HTML規(guī)范

言

文檔類型

命名規(guī)范

語(yǔ)義化

img標(biāo)簽

文件分離

腳本加載

合理使用ID和錨點(diǎn)

總結(jié)

法

boolean屬性

JS生成標(biāo)簽

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

實(shí)用高于完美

您的項(xiàng)目需求