免費(fèi)AI編程助手
HTML 代碼規(guī)范
DOCTYPE 聲明
一個(gè) DOCTYPE 必須包含以下部分，并嚴(yán)格按照順序出現(xiàn)：
- A string that is an ASCII case-insensitive match for the string “<!DOCTYPE>”.
- One or more space characters.
- A string that is an ASCII case-insensitive match for the string “html”.
- Optionally, a DOCTYPE legacy string or an obsolete permitted DOCTYPE string (defined below).
- Zero or more space characters.
- A “>” (U+003E) character.
- 一個(gè) ASCII 字符串 “
<!DOCTYPE>” ，大小寫不敏感 - 一個(gè)或多個(gè)空白字符
- 一個(gè) ASCII 字符串”
html”，大小寫不敏感 - 一個(gè)可選的歷史遺留的 DOCTYPE 字符串 （DOCTYPE legacy string），或者一個(gè)可選的已過時(shí)但被允許的 DOCTYPE 字符串 （obsolete permitted DOCTYPE string） 字符串
- 一個(gè)或多個(gè)空白字符
- 一個(gè)編碼為 U+003E 的字符 “
>”
團(tuán)隊(duì)約定
HTML 文件必須加上 DOCTYPE 聲明，并統(tǒng)一使用 HTML5 的文檔聲明：
<!DOCTYPE html>
更多關(guān)于 DOCTYPE聲明
頁(yè)面語(yǔ)言LANG
Lang屬性的取值應(yīng)該遵循互聯(lián)網(wǎng)工程任務(wù)組–IETF（The Internet Engineering Task Force）制定的關(guān)于語(yǔ)言標(biāo)簽的文檔 BCP 47 - Tags for Identifying Languages
團(tuán)隊(duì)約定
推薦使用屬性值 cmn-Hans-CN（簡(jiǎn)體, 中國(guó)大陸），但是考慮瀏覽器和操作系統(tǒng)的兼容性，目前仍然使用 zh-CN 屬性值
<html lang="zh-CN">
更多地區(qū)語(yǔ)言參考：
zh-SG 中文 (簡(jiǎn)體, 新加坡) 對(duì)應(yīng) cmn-Hans-SG 普通話 (簡(jiǎn)體, 新加坡)
zh-HK 中文 (繁體, 香港) 對(duì)應(yīng) cmn-Hant-HK 普通話 (繁體, 香港)
zh-MO 中文 (繁體, 澳門) 對(duì)應(yīng) cmn-Hant-MO 普通話 (繁體, 澳門)
zh-TW 中文 (繁體, 臺(tái)灣) 對(duì)應(yīng) cmn-Hant-TW 普通話 (繁體, 臺(tái)灣)
已廢棄不推薦使用的 Languages Tags
以下寫法已于 2009 年廢棄，請(qǐng)勿使用（cmn、wuu、yue、gan 等已由 2005 年的 extlang 升級(jí)到 2009 年的 language）：
zh-cmn, zh-cmn-Hans, zh-cmn-Hant, zh-wuu, zh-yue, zh-gan
以下寫法已于 2009 年廢棄，不推薦使用：
zh-Hans, zh-Hans-CN, zh-Hans-SG, zh-Hans-HK, zh-Hans-MO, zh-Hans-TW,
zh-Hant, zh-Hant-CN, zh-Hant-SG, zh-Hant-HK, zh-Hant-MO, zh-Hant-TW
更多已廢棄 Languages Tags 參考 IANA Language Subtag Registry 里面的 “Type: redundant“”
更多關(guān)于 Languages Tags ：
W3C Language tags in HTML and XML
網(wǎng)頁(yè)頭部的聲明應(yīng)該是用 lang=”zh” 還是 lang=”zh-cn”？
CHARSET
Because the character sets in ISO-8859 was limited in size, and not compatible in multilingual environments, the Unicode Consortium developed the Unicode Standard.
The Unicode Standard covers (almost) all the characters, punctuations, and symbols in the world.
Unicode enables processing, storage, and transport of text independent of platform and language.
The default character encoding in HTML-5 is UTF-8.
因?yàn)?ISO-8859 中字符集大小是有限的，且在多語(yǔ)言環(huán)境中不兼容，所以 Unicode 聯(lián)盟開發(fā)了 Unicode 標(biāo)準(zhǔn)。
Unicode 標(biāo)準(zhǔn)覆蓋了（幾乎）所有的字符、標(biāo)點(diǎn)符號(hào)和符號(hào)。
Unicode 使文本的處理、存儲(chǔ)和運(yùn)輸，獨(dú)立于平臺(tái)和語(yǔ)言。
HTML-5 中默認(rèn)的字符編碼是 UTF-8
參閱 HTML Unicode (UTF-8) Reference
團(tuán)隊(duì)約定
一般情況下統(tǒng)一使用 “UTF-8” 編碼
<meta charset="UTF-8">
由于歷史原因，有些業(yè)務(wù)可能會(huì)使用 “GBK” 編碼
<meta charset="GBK">
請(qǐng)盡量統(tǒng)一寫成標(biāo)準(zhǔn)的 “UTF-8”，不要寫成 “utf-8” 或 “utf8” 或 “UTF8”。根據(jù) IETF對(duì)UTF-8的定義，其編碼標(biāo)準(zhǔn)的寫法是 “UTF-8”；而 UTF8 或 utf8 的寫法只是出現(xiàn)在某些編程系統(tǒng)中，如 .NET framework 的類 System.Text.Encoding 中的一個(gè)屬性名就叫 UTF8。
更多關(guān)于
UTF-8寫法: UTF8 or UTF-8?
GBK：Application of IANA Charset Registration for GBK
Charset ：character-encoding-declaration
元素及標(biāo)簽閉合
HTML元素共有以下5種：
- 空元素：area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr
- 原始文本元素：script、style
- RCDATA元素：textarea、title
- 外來元素：來自MathML命名空間和SVG命名空間的元素。
- 常規(guī)元素：其他HTML允許的元素都稱為常規(guī)元素。
元素標(biāo)簽的閉合應(yīng)遵循以下原則：
Tags are used to delimit the start and end of elements in the markup. Raw text, escapable raw text, and normal elements have a start tag to indicate where they begin, and an end tag to indicate where they end. The start and end tags of certain normal elements can be omitted, as described below in the section on optional tags. Those that cannot be omitted must not be omitted. Void elements only have a start tag; end tags must not be specified for void elements. Foreign elements must either have a start tag and an end tag, or a start tag that is marked as self-closing, in which case they must not have an end tag.
- 原始文本元素、RCDATA元素以及常規(guī)元素都有一個(gè)開始標(biāo)簽來表示開始，一個(gè)結(jié)束標(biāo)簽來表示結(jié)束。
- 某些元素的開始和結(jié)束標(biāo)簽是可以省略的，如果規(guī)定標(biāo)簽不能被省略，那么就絕對(duì)不能省略它。
- 空元素只有一個(gè)開始標(biāo)簽，且不能為空元素設(shè)置結(jié)束標(biāo)簽。
- 外來元素可以有一個(gè)開始標(biāo)簽和配對(duì)的結(jié)束標(biāo)簽，或者只有一個(gè)自閉合的開始標(biāo)簽，且后者情況下該元素不能有結(jié)束標(biāo)簽。
團(tuán)隊(duì)約定
為了能讓瀏覽器更好的解析代碼以及能讓代碼具有更好的可讀性，有如下約定：
- 所有具有開始標(biāo)簽和結(jié)束標(biāo)簽的元素都要寫上起止標(biāo)簽，某些允許省略開始標(biāo)簽或和束標(biāo)簽的元素亦都要寫上。
- 空元素標(biāo)簽都不加 “/” 字符
推薦：
<div>
<h1>我是h1標(biāo)題</h1>
<p>我是一段文字，我有始有終，瀏覽器能正確解析</p>
</div>
<br>
不推薦：
<div>
<h1>我是h1標(biāo)題</h1>
<p>我是一段文字，我有始無(wú)終，瀏覽器亦能正確解析
</div>
<br/>
更多關(guān)于元素及標(biāo)簽關(guān)閉：#Elements
書寫風(fēng)格
HTML代碼大小寫
HTML標(biāo)簽名、類名、標(biāo)簽屬性和大部分屬性值統(tǒng)一用小寫
推薦：
<div class="demo"></div>
不推薦：
<div class="DEMO"></div>
<DIV CLASS="DEMO"></DIV>
HTML文本、CDATA、JavaScript、meta標(biāo)簽?zāi)承傩缘葍?nèi)容可大小寫混合
<!-- 優(yōu)先使用 IE 最新版本和 Chrome Frame -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<!-- HTML文本內(nèi)容 -->
<h1>I AM WHAT I AM </h1>
<!-- JavaScript 內(nèi)容 -->
<script type="text/javascript">
var demoName = 'demoName';
...
</script>
<!-- CDATA 內(nèi)容 -->
<script type="text/javascript"><![CDATA[
...
]]></script>
類型屬性
不需要為 CSS、JS 指定類型屬性，HTML5 中默認(rèn)已包含
推薦：
<link rel="stylesheet" href="" >
<script src=""></script>
不推薦：
<link rel="stylesheet" type="text/css" href="" >
<script type="text/javascript" src="" ></script>
元素屬性
- 元素屬性值使用雙引號(hào)語(yǔ)法
- 元素屬性值可以寫上的都寫上
推薦：
<input type="text">
<input type="radio" name="name" checked="checked" >
不推薦：
<input type=text>
<input type='text'>
<input type="radio" name="name" checked >
更多關(guān)于元素屬性：#Attributes
特殊字符引用
In certain cases described in other sections, text may be mixed with character references. These can be used to escape characters that couldn’t otherwise legally be included in text.
文本可以和字符引用混合出現(xiàn)。這種方法可以用來轉(zhuǎn)義在文本中不能合法出現(xiàn)的字符。
在 HTML 中不能使用小于號(hào) “<” 和大于號(hào) “>”特殊字符，瀏覽器會(huì)將它們作為標(biāo)簽解析，若要正確顯示，在 HTML 源代碼中使用字符實(shí)體
推薦：
<a href="#">more>></a>
不推薦：
<a href="#">more>></a>
更多關(guān)于符號(hào)引用：#Character references
代碼縮進(jìn)
統(tǒng)一使用四個(gè)空格進(jìn)行代碼縮進(jìn)，使得各編輯器表現(xiàn)一致（各編輯器有相關(guān)配置）
<div class="jdc">
<a href="#"></a>
</div>
純數(shù)字輸入框
使用 type="tel" 而不是 type="number"
<input type="tel">
代碼嵌套
元素嵌套規(guī)范，每個(gè)塊狀元素獨(dú)立一行，內(nèi)聯(lián)元素可選
推薦：
<div>
<h1></h1>
<p></p>
</div>
<p><span></span><span></span></p>
不推薦：
<div>
<h1></h1><p></p>
</div>
<p>
<span></span>
<span></span>
</p>
段落元素與標(biāo)題元素只能嵌套內(nèi)聯(lián)元素
推薦：
<h1><span></span></h1>
<p><span></span><span></span></p>
不推薦：
<h1><div></div></h1>
<p><div></div><div></div></p>
更多建議：