DOCTYPE 聲明

一個DOCTYPE必須包含以下部分，并嚴格按照順序出現：

1. A string that is an ASCII case-insensitive match for the string “
2. One or more space characters.
3. A string that is an ASCII case-insensitive match for the string “html”.
4. Optionally, a DOCTYPE legacy string or an obsolete permitted DOCTYPE string (defined below).
5. Zero or more space characters.
6. A “>” (U+003E) character.

1. 一個ASCII字符串 “
2. 一個或多個空白字符
3. 一個ASCII字符串”html”，大小寫不敏感
4. 一個可選的歷史遺留的DOCTYPE字符串 （DOCTYPE legacy string），或者一個可選的已過時但被允許的DOCTYPE字符串 （obsolete permitted DOCTYPE string） 字符串
5. 一個或多個空白字符
6. 一個編碼為 U+003E 的字符 “>”

團隊約定

HTML文件必須加上 DOCTYPE 聲明，并統一使用 HTML5 的文檔聲明：

更多關于 DOCTYPE聲明

#The DOCTYPE

頁面語言LANG

Lang屬性的取值應該遵循互聯網工程任務組–IETF（The Internet Engineering Task Force）制定的關于語言標簽的文檔?BCP 47 - Tags for Identifying Languages

團隊約定

推薦使用屬性值?cmn-Hans-CN（簡體, 中國大陸），但是考慮瀏覽器和操作系統的兼容性，目前仍然使用zh-CN?屬性值

<htmllang="zh-CN">

更多地區語言參考：

zh-SG 中文 (簡體, 新加坡)   對應 cmn-Hans-SG 普通話 (簡體, 新加坡)zh-HK 中文 (繁體, 香港)     對應 cmn-Hant-HK 普通話 (繁體, 香港)zh-MO 中文 (繁體, 澳門)     對應 cmn-Hant-MO 普通話 (繁體, 澳門)zh-TW 中文 (繁體, 臺灣)     對應 cmn-Hant-TW 普通話 (繁體, 臺灣) 

已廢棄不推薦使用的 Languages Tags

以下寫法已于 2009 年廢棄，請勿使用（cmn、wuu、yue、gan 等已由 2005 年的 extlang 升級到 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“”

更多關于 Languages Tags ：

W3C Language tags in HTML and XML

網頁頭部的聲明應該是用 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.

因為 ISO-8859 中字符集大小是有限的，且在多語言環境中不兼容，所以 Unicode 聯盟開發了 Unicode 標準。

Unicode 標準覆蓋了（幾乎）所有的字符、標點符號和符號。

Unicode 使文本的處理、存儲和運輸，獨立于平臺和語言。

HTML-5 中默認的字符編碼是 UTF-8

參閱?HTML Unicode (UTF-8) Reference

團隊約定

一般情況下統一使用 “UTF-8” 編碼

<metacharset="UTF-8">

由于歷史原因，有些業務可能會使用 “GBK” 編碼

<metacharset="GBK">

請盡量統一寫成標準的 “UTF-8”，不要寫成 “utf-8” 或 “utf8” 或 “UTF8”。根據?IETF對UTF-8的定義，其編碼標準的寫法是 “UTF-8”；而 UTF8 或 utf8 的寫法只是出現在某些編程系統中，如 .NET framework 的類 System.Text.Encoding 中的一個屬性名就叫 UTF8。

更多關于

UTF-8寫法:?UTF8 or UTF-8?

GBK：Application of IANA Charset Registration for GBK

Charset ：character-encoding-declaration

元素及標簽閉合

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命名空間的元素。
• 常規元素：其他HTML允許的元素都稱為常規元素。

元素標簽的閉合應遵循以下原則：

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元素以及常規元素都有一個開始標簽來表示開始，一個結束標簽來表示結束。
• 某些元素的開始和結束標簽是可以省略的，如果規定標簽不能被省略，那么就絕對不能省略它。
• 空元素只有一個開始標簽，且不能為空元素設置結束標簽。
• 外來元素可以有一個開始標簽和配對的結束標簽，或者只有一個自閉合的開始標簽，且后者情況下該元素不能有結束標簽。

團隊約定

為了能讓瀏覽器更好的解析代碼以及能讓代碼具有更好的可讀性，有如下約定：

• 所有具有開始標簽和結束標簽的元素都要寫上起止標簽，某些允許省略開始標簽或和束標簽的元素亦都要寫上。
• 空元素標簽都不加 “/” 字符

推薦：

<div><h1>我是h1標題h1><p>我是一段文字，我有始有終，瀏覽器能正確解析p>div><br>

不推薦：

<div><h1>我是h1標題h1><p>我是一段文字，我有始無終，瀏覽器亦能正確解析div><br/>

更多關于元素及標簽關閉：#Elements

書寫風格

HTML代碼大小寫

HTML標簽名、類名、標簽屬性和大部分屬性值統一用小寫

推薦：

<divclass="demo">div>

不推薦：

<divclass="DEMO">div><DIVCLASS="DEMO">DIV>

HTML文本、CDATA、JavaScript、meta標簽某些屬性等內容可大小寫混合

<metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1"/><h1>I AM WHAT I AM h1><scripttype="text/javascript"> var demoName = 'demoName';...script><scripttype="text/javascript">...]]>script>

類型屬性

不需要為 CSS、JS 指定類型屬性，HTML5 中默認已包含

推薦：

<linkrel="stylesheet"href=""><scriptsrc="">script>

不推薦：

<linkrel="stylesheet"type="text/css"href=""><scripttype="text/javascript"src="">script>

元素屬性

• 元素屬性值使用雙引號語法
• 元素屬性值可以寫上的都寫上

推薦：

<inputtype="text"><inputtype="radio"name="name"checked="checked">

不推薦：

<inputtype=text><inputtype='text'><inputtype="radio"name="name"checked>

更多關于元素屬性：#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.

文本可以和字符引用混合出現。這種方法可以用來轉義在文本中不能合法出現的字符。

在 HTML 中不能使用小于號 “<” 和大于號 “>”特殊字符，瀏覽器會將它們作為標簽解析，若要正確顯示，在 HTML 源代碼中使用字符實體

推薦：

<ahref="#">more>>a>

不推薦：

<ahref="#">more>>a>

更多關于符號引用：#Character references

代碼縮進

統一使用四個空格進行代碼縮進，使得各編輯器表現一致（各編輯器有相關配置）

<divclass="jdc"><ahref="#">a>div>

純數字輸入框

使用?type="tel"?而不是?type="number"

<inputtype="tel">

代碼嵌套

元素嵌套規范，每個塊狀元素獨立一行，內聯元素可選

推薦：

<div><h1>h1><p>p>div><p><span>span><span>span>p>

不推薦：

<div><h1>h1><p>p>div><p><span>span><span>span>p>

段落元素與標題元素只能嵌套內聯元素

推薦：

<h1><span>span>h1><p><span>span><span>span>p>