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

時間 2019-11-16

原文原文鏈接

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

<!DOCTYPE html>

語言屬性根據 html5 規範：
強烈建議爲 php

html

根元素指定 css

lang

屬性，從而爲文檔設置正確的語言。這將有助於語音合成工具肯定其所應該採用的發音，有助於翻譯工具肯定其翻譯時所應遵照的規則等等。
這裏列出了語言代碼表。html

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

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

<meta charset="UTF-8">

IE 兼容模式 IE 支持經過特定的 html5

meta

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

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

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

<input type="text"/>

推薦chrome

<input type="text">

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

<ul>
    <li>
</ul>

推薦

<ul>
    <li></li>
</ul>

省略 type 屬性省略 css 與 js 的

type

屬性。鑑於 html5 中以上二者默認的

type

值就是

text/css

和

text/javascript

，因此

type

屬性通常是能夠忽略掉的，甚至在老舊版本的瀏覽器中這麼作也是安全可靠的。
語義化使用具備語義的標籤，好比

h1

、

等等。

<!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>

推薦

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

結構，表現與行爲分離一個完整的頁面分爲三個部分：結構（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>

html 引號 html 屬性的引號請使用雙引號而不是單引號。
參考文獻 Web Styleguide - Style guide to harmonize HTML, Javascript and CSS / Sass coding style
http://www.css88.com/archives...
轉載於猿2048:☞《【規範】前端編碼規範——html 規範》