編寫靈活、穩定、高質量的HTML代碼的規范

anquan 發布于2019-08-02 16:01 / 2465人閱讀

摘要：六字符編碼通過明確聲明字符編碼，能夠確保瀏覽器快速并容易的判斷頁面內容的渲染方式。十一減少標簽的數量編寫代碼時，盡量避免多余的父元素。未完待續編寫靈活穩定高質量的代碼的規范閱讀更多

一、唯一定律

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

二、HTML 2.1 語法

（1）用兩個空格來代替制表符（tab） -- 這是唯一能保證在所有環境下獲得一致展現的方法。

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

（3）對于屬性的定義，確保全部使用雙引號，絕不要使用單引號。

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

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

2.2 Example

三、HTML5 doctype

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

四、語言屬性

根據 HTML5 規范：

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

五、IE 兼容模式

IE 支持通過特定的標簽來確定繪制當前頁面所應該采用的 IE 版本。除非有強烈的特殊需求，否則最好是設置為 edge mode，從而通知 IE 采用其所支持的最新的模式。

六、字符編碼

通過明確聲明字符編碼，能夠確保瀏覽器快速并容易的判斷頁面內容的渲染方式。這樣做的好處是，可以避免在 HTML 中使用字符實體標記（character entity），從而全部與文檔編碼一致（一般采用 UTF-8 編碼）。

七、引入 CSS 和 JavaScript 文件

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

八、實用為王

盡量遵循 HTML 標準和語義，但是不要以犧牲實用性為代價。任何時候都要盡量使用最少的標簽并保持最小的復雜度。

九、屬性順序 9.1 從大到小

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

（1）class

（2）id, name

（3）data-*

（4）src, for, type, href, value

（5）title, alt

（6）role, aria-*

9.2 Example

9.3 說明

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

十、布爾（boolean）型屬性 10.1 注意

（1）布爾型屬性可以在聲明時不賦值。XHTML 規范要求為其賦值，但是 HTML5 規范不需要。

（2）元素的布爾型屬性如果有值，就是 true，如果沒有值，就是 false。

（3）如果屬性存在，其值必須是空字符串或 [...] 屬性的規范名稱，并且不要在首尾添加空白符。
簡單來說，就是不用賦值。

10.2 Example

十一、減少標簽的數量

編寫 HTML 代碼時，盡量避免多余的父元素。很多時候，這需要迭代和重構來實現。

十二、減少 JavaScript 生成的標簽

通過 JavaScript 生成的標簽讓內容變得不易查找、編輯，并且降低性能。能避免時盡量避免。

未完待續編寫靈活、穩定、高質量的CSS代碼的規范
閱讀更多

云服務器 GPU云服務器 html頁面編寫規范編寫漂亮的代碼 html的命名規范 html網頁的規范

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

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

編碼規范 —— 編寫靈活、穩定、高質量的 HTML 和 CSS 代碼的規范

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

Karuru 2019-08-01 14:41 評論0 收藏0
編寫靈活、穩定、高質量的CSS代碼的規范

摘要：過度使用簡寫形式的屬性聲明會導致代碼混亂，并且會對屬性值帶來不必要的覆蓋從而引起意外的副作用。只有在必要的時候才將限制在最近的父元素內也就是后代選擇器例如，不使用帶前綴的時前綴類似于命名空間。制定一致的注釋規范。一、語法 1.1 注意（1）用兩個空格來代替制表符（tab） -- 這是唯一能保證在所有環境下獲得一致展現的方法。（2）為選擇器分組時，將單獨的選擇器單獨放在一行。（3...

psychola 2019-08-30 14:16 評論0 收藏0
ESLint 在中大型團隊的應用實踐

摘要：自動化接入和升級方案通過命令行工具提供一鍵接入升級能力，同時集成到團隊腳手架中，大大降低了工程接入和維護的成本。原始代碼經過解析器的解析，在管道中逐一經過所有規則的檢查，最終檢測出所有不符合規范的代碼，并輸出為報告。引言代碼規范是軟件開發領域經久不衰的話題，幾乎所有工程師在開發過程中都會遇到，并或多或少會思考過這一問題。隨著前端應用的大型化和復雜化，越來越多的前端工程師和團隊開始重...

alogy 2019-08-26 10:34 評論0 收藏0
斗米客戶端的架構思想

摘要：經過這些年在端瀏覽器內核端研發經驗的積累，年我在斗米的客戶端產品上首次提出了以驅動的客戶端平臺化架構思想，并經過兩年時間多個產品的探索實踐，我認為該端的架構思想可正式對外分享。在斗米的各客戶端中，在不需要發版的前提下，可以使用發版。背景隨著移動互聯網產業的興起，各式App層出不窮，技術方案多種多樣。同樣，我們也面臨了各式各樣的問題，比如產品如何開發能夠更快速迭代上線，如何使運營推廣...

Cympros 2019-08-15 11:01 評論0 收藏0
斗米客戶端的架構思想

摘要：經過這些年在端瀏覽器內核端研發經驗的積累，年我在斗米的客戶端產品上首次提出了以驅動的客戶端平臺化架構思想，并經過兩年時間多個產品的探索實踐，我認為該端的架構思想可正式對外分享。在斗米的各客戶端中，在不需要發版的前提下，可以使用發版。背景隨著移動互聯網產業的興起，各式App層出不窮，技術方案多種多樣。同樣，我們也面臨了各式各樣的問題，比如產品如何開發能夠更快速迭代上線，如何使運營推廣...

lpjustdoit 2019-08-20 18:21 評論0 收藏0