HTML規(guī)范
| 版本號 | 作者 | 時間 | 版本 | 內(nèi)容摘要 |
|---|---|---|---|---|
| v1.0 | eleven | 2018-05-16 | 1.0.0 | 文檔初始化 |
目錄
- 1.DOCTYPE聲明
- 2.頁面語言LANG
- 3.CHARSET字符編碼
- 4.元素及標簽閉合
- 5.書寫風格
- 6.類型的屬性
- 7.元素屬性
- 8.代碼縮進
- 9.純數(shù)字輸入框
- 10.代碼嵌套
- 11.單行注釋
- 12.模塊注釋
- 13.嵌套模塊注釋
- 14.移動端HTML模版
- 15.PC端HTML模版
- 16.script引用統(tǒng)一放在body結(jié)束標簽的前面
- 17.defer和async的區(qū)別
1.DOCTYPE聲明
HTML文件必須加上 DOCTYPE 聲明，并統(tǒng)一使用 HTML5 的文檔聲明：
<!DOCTYPE html>
2.頁面語言LANG
推薦使用屬性值 cmn-Hans-CN（簡體, 中國大陸）费变，但是考慮瀏覽器和操作系統(tǒng)的兼容性挚歧，目前仍然使用 zh-CN 屬性值
<html lang="zh-CN">
3.CHARSET字符編碼
因為 ISO-8859 中字符集大小是有限的吁峻，且在多語言環(huán)境中不兼容，所以 Unicode 聯(lián)盟開發(fā)了 Unicode 標準矮慕。
Unicode 標準覆蓋了（幾乎）所有的字符痴鳄、標點符號和符號。
Unicode 使文本的處理哼转、存儲和運輸壹蔓，獨立于平臺和語言猫态。
HTML-5 中默認的字符編碼是 UTF-8
<meta charset="UTF-8">
4.元素及標簽閉合
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ī)元素饥漫。
推薦：
<div>
<h1>我是h1標題</h1>
<p>我是一段文字，我有始有終积蜻，瀏覽器能正確解析</p>
</div>
<br>
不推薦：
<div>
<h1>我是h1標題</h1>
<p>我是一段文字浅侨，我有始無終证膨，瀏覽器亦能正確解析
</div>
<br/>
5.書寫風格
HTML標簽名央勒、類名、標簽屬性和大部分屬性值統(tǒng)一用小寫
推薦：
<div class="demo"></div>
不推薦：
<div class="DEMO"></div>
<DIV CLASS="DEMO"></DIV>
6.類型的屬性
不需要為 CSS稳吮、JS 指定類型屬性灶似，HTML5 中默認已包含
推薦：
<link rel="stylesheet" href="" >
<script src=""></script>
不推薦：
<link rel="stylesheet" type="text/css" href="" >
<script type="text/javascript" src="" ></script>
7.元素屬性
- 元素屬性值使用雙引號語法
- 元素屬性值可以寫上的都寫上
推薦：
<input type="text">
<input type="radio" name="name" checked="checked" >
不推薦：
<input type=text>
<input type='text'>
<input type="radio" name="name" checked >
8.代碼縮進
統(tǒng)一使用四個空格進行代碼縮進酪惭，使得各編輯器表現(xiàn)一致（各編輯器有相關(guān)配置）
推薦：
<div class="fs">
<a href="#"></a>
</div>
9.純數(shù)字輸入框
使用 type="tel" 而不是 type="number"
推薦：
<input type="tel">
10.代碼嵌套
元素嵌套規(guī)范春感，每個塊狀元素獨立一行，內(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>
段落元素與標題元素只能嵌套內(nèi)聯(lián)元素
推薦：
<h1>
<span></span>
</h1>
<p>
<span></span>
<span></span>
</p>
不推薦：
<h1>
<div></div>
</h1>
<p>
<div></div>
<div></div>
</p>
11.單行注釋
一般用于簡單的描述，如某些狀態(tài)描述窥岩、屬性描述等
注釋內(nèi)容前后各一個空格字符颂翼，注釋位于要注釋代碼的上面，單獨占一行
推薦：
<!-- Comment Text -->
<div>...</div>
不推薦：
<div>...</div><!-- Comment Text -->
<div><!-- Comment Text -->
...
</div>
12.模塊注釋
一般用于描述模塊的名稱以及模塊開始與結(jié)束的位置
注釋內(nèi)容前后各一個空格字符锥累， 表示模塊開始桶略， 表示模塊結(jié)束际歼，模塊與模塊之間相隔一行
推薦：
<!-- S Comment Text A -->
<div class="mod-a">
...
</div>
<!-- E Comment Text A -->
<!-- S Comment Text B -->
<div class="mod-b">
...
</div>
<!-- E Comment Text B -->
不推薦：
<!-- S Comment Text A -->
<div class="mod-a">
...
</div>
<!-- E Comment Text A -->
<!-- S Comment Text B -->
<div class="mod-b">
...
</div>
<!-- E Comment Text B -->
13.嵌套模塊注釋
當模塊注釋內(nèi)再出現(xiàn)模塊注釋的時候鹅心，為了突出主要模塊纺荧，嵌套模塊不再使用
推薦：
<!-- S Comment Text A -->
<div class="mod-a">
<div class="mod-b">
...
</div>
<!-- /mod-b -->
<div class="mod-c">
...
</div>
<!-- /mod-c -->
</div>
<!-- E Comment Text A -->
14.移動端HTML模版
推薦：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" >
<!-- viewport 后面加上 minimal-ui 在safri 體現(xiàn)效果 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- 隱藏狀態(tài)欄/設(shè)置狀態(tài)欄顏色 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<!-- uc強制豎屏 -->
<meta name="screen-orientation" content="portrait">
<!-- UC強制全屏 -->
<meta name="full-screen" content="yes">
<!-- UC應用模式 -->
<meta name="browsermode" content="application">
<!-- QQ強制豎屏 -->
<meta name="x5-orientation" content="portrait">
<!-- QQ強制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- QQ應用模式 -->
<meta name="x5-page-mode" content="app">
<meta name="format-detection" content="telephone=no">
<title>移動端HTML模版</title>
<!-- S DNS預解析 -->
<link rel="dns-prefetch" href="">
<!-- E DNS預解析 -->
<!-- S 線上樣式頁面片输枯，開發(fā)請直接取消注釋引用 -->
<!-- #include virtual="" -->
<!-- E 線上樣式頁面片 -->
<!-- S 本地調(diào)試占贫，根據(jù)開發(fā)模式選擇調(diào)試方式型奥，請開發(fā)刪除 -->
<link rel="stylesheet" href="css/index.css" >
<!-- /本地調(diào)試方式 -->
<link rel="stylesheet" href="http://srcPath/index.css" >
<!-- /開發(fā)機調(diào)試方式 -->
<!-- E 本地調(diào)試 -->
</head>
<body>
</body>
</html>
15.PC端HTML模版
推薦：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="your keywords">
<meta name="description" content="your description">
<meta name="author" content="author,email address">
<meta name="robots" content="index,follow">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="renderer" content="ie-stand">
<title>PC端HTML模版</title>
<!-- S DNS預解析 -->
<link rel="dns-prefetch" href="">
<!-- E DNS預解析 -->
<!-- S 線上樣式頁面片，開發(fā)請直接取消注釋引用 -->
<!-- #include virtual="" -->
<!-- E 線上樣式頁面片 -->
<!-- S 本地調(diào)試谐宙，根據(jù)開發(fā)模式選擇調(diào)試方式，請開發(fā)刪除 -->
<link rel="stylesheet" href="css/index.css" >
<!-- /本地調(diào)試方式 -->
<link rel="stylesheet" href="http://srcPath/index.css" >
<!-- /開發(fā)機調(diào)試方式 -->
<!-- E 本地調(diào)試 -->
</head>
<body>
</body>
</html>
16.script引用統(tǒng)一放在body結(jié)束標簽的前面
因為瀏覽器生成Dom樹的時候是一行一行讀HTML代碼的夹纫，script標簽放在最后面就不會影響前面的頁面的渲染设凹；
推薦：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>PC端HTML模版</title>
</head>
<body>
<script src="http://www.test.com/test.js"></script>
</body>
</html>
不推薦：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>PC端HTML模版</title>
<script src="http://www.test.com/test.js"></script>
</head>
<body>
</body>
</html>
17.defer和async的區(qū)別
<script src="script.js"></script>
沒有 defer 或 async闪朱，瀏覽器會立即加載并執(zhí)行指定的腳本奋姿，“立即”指的是在渲染該 script 標簽之下的文檔元素之前，也就是說不等待后續(xù)載入的文檔元素萍悴，讀到就加載并執(zhí)行寓免。
<script async src="script.js"></script>
有 async袜香，加載和渲染后續(xù)文檔元素的過程將和 script.js 的加載與執(zhí)行并行進行（異步）。
<script defer src="myscript.js"></script>
有 defer实抡，加載后續(xù)文檔元素的過程將和 script.js 的加載并行進行（異步）澜术，但是 script.js 的執(zhí)行要在所有元素解析完成之后猬腰，DOMContentLoaded 事件觸發(fā)之前完成姑荷。
