通用規(guī)范
標(biāo)簽
自閉合（self-closing）標(biāo)簽溜族，無需閉合 ( 例如： img input br hr 等 )酌壕；
可選的閉合標(biāo)簽（closing tag）河咽，需閉合 ( 例如：</li> 或 </body> )寺庄；
盡量減少標(biāo)簽數(shù)量俐巴；不允許出現(xiàn)復(fù)雜嵌套多層的HTML結(jié)構(gòu)；
<!-- 不推薦 -->
<br />
<br/>
<span class="avatar"><img src=""></span>
<!-- 推薦 -->
<br>
<img class="avatar" src="">
Class 與 ID
id 以Camel（駝峰） 命名法命名笼沥；
class 應(yīng)以功能或內(nèi)容命名蚪燕，命名形式以單詞字母小寫，多個(gè)單詞組成時(shí)奔浅，采用中劃線"-"分隔；
屬性順序
屬性應(yīng)該按照特定的順序出現(xiàn)以保證易讀性诗良，暫定以下順序：
id
class
name
data-xxx
src, for, type, href
title, alt
aria-xxx, role
布爾值屬性
HTML5 規(guī)范中 disabled汹桦、checked、selected 等屬性不用設(shè)置值鉴裹。
關(guān)注點(diǎn)分離
將表現(xiàn)和行為分開舞骆，嚴(yán)格保持結(jié)構(gòu) （標(biāo)記），表現(xiàn) （樣式）径荔，和行為 （腳本）分離, 并盡量讓這三者之間的交互保持最低限度督禽。
<!-- 不推薦 -->
<!DOCTYPE html>
<title>HTML sucks</title>
<link rel="stylesheet" href="base.css" media="screen">
<link rel="stylesheet" href="grid.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">
<h1 style="font-size: 1em;">HTML TEST</h1>
<!-- 推薦 -->
<!DOCTYPE html>
<title>My first CSS-only redesign</title>
<link rel="stylesheet" href="default.css">
<h1>My first CSS-only redesign</h1>
語義化
沒有 CSS 的 HTML 是一個(gè)語義系統(tǒng)而不是 UI 系統(tǒng)。
語義化的 HTML 結(jié)構(gòu)总处，有助于機(jī)器（搜索引擎）理解狈惫，另一方面多人協(xié)作時(shí)，能迅速了解開發(fā)者意圖鹦马。
通常情況下胧谈，每個(gè)標(biāo)簽都是有語義的忆肾，所謂語義就是你的衣服分為外套， 褲子菱肖，裙子客冈，內(nèi)褲等，各自有對(duì)應(yīng)的功能和含義稳强。所以你總不能把內(nèi)褲套在脖子上吧场仲。
常見語義化標(biāo)簽：
| 標(biāo)簽 | 語義 |
|---|---|
| <p> | 段落 |
| <h1> <h2> <h3> ... | 標(biāo)題 |
| <ul> | 無序列表 |
| <ol> | 有序列表 |
| <blockquote> | 大段引用 |
| <cite> | 一般引用 |
| <b> | 為樣式加粗而加粗 |
| <storng> | 為強(qiáng)調(diào)內(nèi)容而加粗 |
| <i> | 為樣式傾斜而傾斜 |
| <em> | 為強(qiáng)調(diào)內(nèi)容而傾斜 |
| code | 代碼標(biāo)識(shí) |
| abbr | 縮寫 |
示例：
將你構(gòu)建的頁面當(dāng)作一本書，將標(biāo)簽的語義對(duì)應(yīng)的其功能和含義退疫；
書的名稱：<h1>
書的每個(gè)章節(jié)標(biāo)題: <h2>
章節(jié)內(nèi)的文章標(biāo)題: <h3>
小標(biāo)題/副標(biāo)題: <h4> <h5> <h6>
章節(jié)的段落: <p>
腳本加載
考慮到所兼容問題渠缕，推薦所有腳本都放到body元素中頁面內(nèi)容的后面。
<!--推薦-->
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
....
<script src="main.js"></script>
</body>
</html>
HEAD
文檔類型
為每個(gè) HTML 頁面的第一行添加標(biāo)準(zhǔn)模式（standard mode）的聲明蹄咖， 這樣能夠確保在每個(gè)瀏覽器中擁有一致的表現(xiàn)褐健。
<!DOCTYPE html>
字符編碼
以無 BOM 的 utf-8 編碼作為文件格式;
指定字符編碼的 meta 必須是 head 的第一個(gè)直接子元素；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
......
</head>
<body>
......
</body>
</html>
移動(dòng)端
<head>
<meta charset="utf-8">
<!--
viewport
viewport: 一般指的是瀏覽器窗口內(nèi)容區(qū)的大小澜汤，不包含工具條蚜迅、選項(xiàng)卡等內(nèi)容；
width: 瀏覽器寬度俊抵，輸出設(shè)備中的頁面可見區(qū)域?qū)挾龋? device-width: 設(shè)備分辨率寬度谁不，輸出設(shè)備的屏幕可見寬度；
initial-scale: 初始縮放比例徽诲；
maximum-scale: 最大縮放比例刹帕；
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
SEO 優(yōu)化
<head>
<meta charset="utf-8">
<!-- SEO keywords 關(guān)鍵字 description 描述 author 關(guān)于-->
<title>Style Guide</title>
<meta name="keywords" content="your keywords">
<meta name="description" content="your description">
<meta name="author" content="author,email address">
</head>
