【規範】前端編碼規範——html 規範

時間 2019-11-06

原文原文鏈接

文檔類型

推薦使用 html5 的文檔類型申明：javascript

<!DOCTYPE html>

語言屬性

根據 html5 規範：css

強烈建議爲 html 根元素指定 lang 屬性，從而爲文檔設置正確的語言。這將有助於語音合成工具肯定其所應該採用的發音，有助於翻譯工具肯定其翻譯時所應遵照的規則等等。html

這裏列出了語言代碼表。html5

<html lang="en"></html>

字符編碼

經過明確聲明字符編碼，可以確保瀏覽器快速並容易的判斷頁面內容的渲染方式。這樣作的好處是，能夠避免在 html 中使用字符實體標記（character entity），從而所有與文檔編碼一致（通常採用 UTF-8 編碼）。java

<meta charset="UTF-8">

IE 兼容模式

IE 支持經過特定的 meta 標籤來肯定繪製當前頁面所應該採用的 IE 版本。除非有強烈的特殊需求，不然最好是設置爲 edge mode，從而通知 IE 採用其所支持的最新的模式。git

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

省略自閉合元素的斜線

不要在自閉合（self-closing）元素的尾部添加斜線 – html5 規範中明確說明這是可選的。github

不推薦web

<input type="text"/>

推薦chrome

<input type="text">

不要省略結束標籤

不要省略可選的結束標籤（closing tag）。瀏覽器

不推薦

<ul>
    <li>
</ul>

省略 type 屬性

省略 css 與 js 的 type 屬性。鑑於 html5 中以上二者默認的 type 值就是 text/css 和 text/javascript，因此 type 屬性通常是能夠忽略掉的，甚至在老舊版本的瀏覽器中這麼作也是安全可靠的。

語義化

使用具備語義的標籤，好比 h1、p 等等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <title>Document</title>
</head>
<body>
    <h1>標題</h1>
    <h2>子標題</h2>
    <p>文本段落</p>
    <p><strong>加粗文本</strong></p>
</body>
</html>
<script src="main.js"></script>

實用爲王

儘可能遵循 html 標準和語義，可是不要以犧牲實用性爲代價。任什麼時候候都要儘可能使用最少的標籤並保持最小的複雜度。

不推薦

<span class="avatar">
    <img src="avatar.jpg">
</span>

結構，表現與行爲分離

一個完整的頁面分爲三個部分：結構（html）、表現（css）和行爲（js）。爲了使它們成爲可維護的乾淨整潔的代碼，咱們要儘量的將它們分離開來。

嚴格地保證結構、表現、行爲三者分離，並儘可能使三者之間沒有太多的交互和聯繫。就是說，儘可能在文檔和模板中只包含結構性的 html；而將全部表現代碼，移入樣式表中；將全部動做行爲，移入腳本之中。在此以外，爲使得它們之間的聯繫儘量的小，在文檔和模板中也儘可能少地引入樣式和腳本文件。

清晰的分層意味着：

不使用超過一到兩張樣式表
儘可能合併腳本
不使用內嵌樣式（<style>.no-good {}</style>）
不使用行內樣式（<hr style="border-top: 5px solid black">）
不使用內嵌腳本（<script>alert('no good')</script>）
不使用表現元素（<b>，<u>，<center>，<font>）

小寫

html 標籤及屬性（包括自定義屬性）都是小寫字母，不要使用大寫字母。

綁定數據

若是須要爲標籤綁定一些數據的話，請使用 html5 的自定義屬性 data-* 來綁定相關數據。

<h1 data-age="20">張三</h1>

布爾型屬性

布爾型屬性能夠在聲明時不賦值。xhtml 規範要求爲其賦值，可是 html5 規範不須要。

<input type="text" disabled>
<input type="checkbox" value="1" checked>
<select>
    <option value="1" selected>1</option>
    <option value="2"></option>
</select>