HTML編碼規范

nifhlheimr 發布于2019-08-01 14:50 / 3391人閱讀

摘要：當然我們還可以引入框架，這些框架一般都自帶模板處理引擎，比如等語義化命名和語義化標簽我們盡量多采用語義化來命名，并且采用語義化標簽來書寫代碼，多用中新增的標簽來書寫。

1.黃金法則（Golden rule）

不管有多少人參與同一個項目，一定要確保每一行代碼都像是同一個人編寫的。

Every line of code should appear to be written by a single person, no matter the number of contributors.

這就需要在一個項目中，我們永遠遵循同一套編碼規范。在項目開發前，制定一套行之有效的編碼規范，每個項目組成員都要按這個規范來編碼。

2.命名規范

CSS 文件名使用英文小寫，多個單詞時，中間用下劃線（_）連接，如：index.html web-guide.html

id 命名使用英文駝峰命名法，多采用語義化來命名

自定義屬性采用英文小寫命名，多個單詞時，中間用中劃線（-）連接，如：generate-catalogue

以 data- 開始的屬性名，是用來存儲數據的，具體可參考 W3C Html 5 data- 。html可以通過 dataset 來取屬性中的值，對于不支持的瀏覽器，可以通過getAttribute來獲取。例如：data-city="ShangHai" ，如果對應的html標簽id為 cityList，則 document.getElementById("cityList").dataset("city"); 對于不支持的瀏覽器，應該document.getElementById("cityList").getAttribute("-data-city");

3.書寫規范
3.1 語法

使用兩個空格來代替制表符（tab）作為縮進，— 這是保證代碼在各種環境下顯示一致的唯一方式

嵌套元素應當縮進一次（即兩個空格）

對于屬性中的值，確保全部使用雙引號，不要使用單引號，也不要省略引號

不要在自閉合（self-closing）元素的尾部添加斜線 — HTML5 規范中明確說明這是可選的

不要省略可選的結束標簽（closing tag）（例如，或）

不要一行寫太長的html代碼，建議設置最大長度為120列，超過120列是最好換行書寫，方便閱讀和排版

嵌套元素最好多帶帶寫在一行

行內元素中不要嵌套塊級元素，比如：

不推薦寫法

p標簽中是不能嵌套塊級元素的，瀏覽器會解析為兩個獨立的標簽，而不能到達你想要的結果

3.2 HTML5 doctype

為每個 HTML 頁面的第一行添加標準模式（standard mode）的聲明，這樣能夠確保在每個瀏覽器中擁有一致的展現。
3.3 語言屬性 Language attribute

根據 HTML5 規范：

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

更多關于 lang 屬性的知識可以從此規范中了解。

3.4 IE 兼容模式

Internet Explorer 支持使用標簽來指定使用什么版本的 IE 來渲染頁面。除非有強烈的特殊需求，否則最好設置為 edge mode，從而讓 IE 采用其所支持的最新模式來渲染。

具體信息可以參考這里

3.5 字符編碼

通過聲明一個明確的字符編碼，讓瀏覽器正確的呈現內容，防止出現亂碼，通常字符編碼為 UTF-8

3.6 引入 CSS 和 JavaScript 文件

根據 HTML5 規范，在引入 CSS 和 JavaScript 文件時一般不需要指定 type 屬性，因為 text/css 和 text/javascript 分別是它們的默認值。

3.7 實用高于完美

盡量遵循 HTML 標準和語義，但是不應該以浪費實用性作為代價。任何時候都要用盡量小的復雜度和盡量少的標簽來解決問題。

3.8 屬性順序

HTML 屬性應當按照以下給出的順序依次排列，確保代碼的易讀性。

class

id, name

data-*

src, for, type, href

title, alt

aria-*, role

class 用于標識高度可復用組件，因此應該放在首位。id 用于標識具體組件，應該盡量少使用（例如，頁面內的書簽），因此排在第二位。

以上順序也不一定是絕對的，可以根據需要把常用的放在首位

3.9 布爾（boolean）型屬性

Boolean 屬性指不需要聲明值的屬性。XHTML 需要每個屬性聲明值，但是 HTML5 并不需要。了解更多內容，參考 WhatWG section on boolean attributes

一個元素中 Boolean 屬性的存在表示取值 true，不存在則表示取值 false。如果一定要為其賦值的話，請參照 WhatWG 中的說明。

如果屬性存在，其值必須是空字符串或 [...] 屬性的本身名稱，并且不要在首尾添加空白符。

簡單來說，就是不用賦值。

雖然 HTML5是這樣規定的，但是對于IE瀏覽器，如果不指定屬性值，有時會有問題的，尤其是readonly和 disabled ，所以最好還是設置為 readonly="readonly" disabled="disabled"

3.10 減少標簽嵌套的數量

在編寫 HTML 代碼時，盡量避免多余的父節點。很多時候，需要通過迭代和重構來使 HTML 變得更少。請看下面的例子

3.11 避免利用JavaScript 生成標簽或html片段

通過 JavaScript 生成的標簽或html片段讓內容變得不易查找、編輯，并且降低性能。能避免時盡量避免，我們可以采用模板的方式來處理，常用的模板有

handlebars（模板引擎類），Ember.js 就采用該模板引擎

knockoutjs，除了支持模板，他還是一個輕量級的MVVM框架

mustashe，一個模板引擎

JsRender，一個非常好用的html模板引擎類

在不引入其他mvc或mvvm框架的前提下，采用 JsRender 或 handlebars 來處理html模板，這兩個模板支持循環、條件語句，還支持在模板中動態執行JavaScript腳本（不建議這樣做）。當然我們還可以引入MVC框架，這些框架一般都自帶模板處理引擎，比如Angular、Ember、KnockoutJs等

4.語義化命名和語義化標簽

我們盡量多采用語義化來命名id，并且采用語義化標簽來書寫html代碼，多用html5中新增的標簽來書寫。
5.Emmet幫助我們快速書寫html代碼

GPU云服務器云服務器規范編碼編碼規范 php編碼規范 js安全編碼規范

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/49614.html

前端編碼規范之：樣式（scss）編碼規范

摘要：前端編碼規范之使用規范前端編碼規范之樣式編碼規范前端編碼規范之結構規范前端編碼規范之最佳實踐前端編碼規范之編碼規范命名的原則是通俗易懂，盡量保持不重復沖突，盡量不要用。我覺得應該避免出現出現這種方式用預處理器拼接出來的名稱，會生成。前端編碼規范之：Git使用規范前端編碼規范之：樣式（scss）編碼規范前端編碼規范之：HTML結構規范前端編碼規范之：Vue最佳實踐前端編碼規范...

reclay 2019-08-29 16:58 評論0 收藏0
編碼規范 —— 編寫靈活、穩定、高質量的 HTML 和 CSS 代碼的規范

摘要：用兩個空格代替制表符這是唯一能保證在所有環境下獲得一致展現的方法。編輯器配置將你的編輯器按照下面的配置進行設置，以免常見的代碼不一致和差異用兩個空格代替制表符保存文件時刪除尾部的空白符設置文件編碼為在文件結尾添加一個空白行。黃金定律永遠遵循同一套編碼規范 - 可以是這里列出的，也可以是你自己總結的。如果發現規范中有任何錯誤，敬請指正。 HTML 語法用兩個空格代替制表符 (ta...

Karuru 2019-08-01 14:41 評論0 收藏0
前端、HTML+CSS+JS編寫規范（終極版）

摘要：文檔規范和文檔必須采用編碼格式文檔必須使用的標準文檔格式編寫規范和的標簽屬性類名都必須使用小寫字母和的屬性類名命名必須具有語義化代碼必須保持文檔結構清晰，必須合理的進行代碼縮進文件禁止樣式表內引用文件編寫格式，樣式代碼保持一行，多個選擇器 HTMLCSS文檔規范 HTML和CSS文檔必須采用UTF-8編碼格式； HTML文檔必須使用HTML5的標準文檔格式； HTMLCSS編寫規范...

jsyzchen 2019-08-01 18:15 評論0 收藏0
前端、HTML+CSS+JS編寫規范（終極版）

摘要：文檔規范和文檔必須采用編碼格式文檔必須使用的標準文檔格式編寫規范和的標簽屬性類名都必須使用小寫字母和的屬性類名命名必須具有語義化代碼必須保持文檔結構清晰，必須合理的進行代碼縮進文件禁止樣式表內引用文件編寫格式，樣式代碼保持一行，多個選擇器 HTMLCSS文檔規范 HTML和CSS文檔必須采用UTF-8編碼格式； HTML文檔必須使用HTML5的標準文檔格式； HTMLCSS編寫規范...

_Dreams 2019-08-22 11:23 評論0 收藏0
前端、HTML+CSS+JS編寫規范（終極版）

摘要：文檔規范和文檔必須采用編碼格式文檔必須使用的標準文檔格式編寫規范和的標簽屬性類名都必須使用小寫字母和的屬性類名命名必須具有語義化代碼必須保持文檔結構清晰，必須合理的進行代碼縮進文件禁止樣式表內引用文件編寫格式，樣式代碼保持一行，多個選擇器 HTMLCSS文檔規范 HTML和CSS文檔必須采用UTF-8編碼格式； HTML文檔必須使用HTML5的標準文檔格式； HTMLCSS編寫規范...

Developer 2019-08-29 14:04 評論0 收藏0