天天看點

html li标簽橫向排列_編寫靈活、穩定、高品質的HTML代碼的規範

一、唯一定律

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

二、HTML

2.1 文法

(1)用

兩個空格

來代替制表符(tab) -- 這是唯一能保證在所有環境下獲得一緻展現的方法。

(2)嵌套元素應當縮進一次(即

兩個空格

)。

(3)對于屬性的定義,確定全部使用

雙引号

,絕不要使用單引号。

(4)不要在

自閉合

(self-closing)元素的尾部添加斜線 -- HTML5 規範中明确說明這是可選的。

(5)

不要省略

可選的結束标簽(closing tag)(例如,</li> 或 </body>)。

2.2 Example

html li标簽橫向排列_編寫靈活、穩定、高品質的HTML代碼的規範

三、HTML5 doctype

為每個 HTML 頁面的第一行添加

标準模式

(standard mode)的聲明,這樣能夠確定在每個浏覽器中擁有一緻的展現。

html li标簽橫向排列_編寫靈活、穩定、高品質的HTML代碼的規範

四、語言屬性

根據 HTML5 規範:

強烈建議為 html 根元素指定

lang

屬性,進而為文檔設定正确的語言。這将有助于語音合成工具确定其所應該采用的發音,有助于翻譯工具确定其翻譯時所應遵守的規則等等。

html li标簽橫向排列_編寫靈活、穩定、高品質的HTML代碼的規範

五、IE 相容模式

IE 支援通過特定的

<meta>

标簽來确定繪制目前頁面所應該采用的 IE 版本。除非有強烈的特殊需求,否則最好是設定為

edge mode

,進而通知 IE 采用其所支援的最新的模式。

html li标簽橫向排列_編寫靈活、穩定、高品質的HTML代碼的規範

六、字元編碼

通過明确聲明字元編碼,能夠確定浏覽器快速并容易的判斷頁面内容的

渲染方式

。這樣做的好處是,可以避免在 HTML 中使用字元實體标記(character entity),進而全部與文檔編碼一緻(一般采用

UTF-8

編碼)。

html li标簽橫向排列_編寫靈活、穩定、高品質的HTML代碼的規範

七、引入 CSS 和 JavaScript 檔案

根據 HTML5 規範,在引入 CSS 和 JavaScript 檔案時一般

不需要指定 type 屬性

,因為 text/css 和 text/javascript 分别是它們的

預設值

html li标簽橫向排列_編寫靈活、穩定、高品質的HTML代碼的規範

八、實用為王

盡量遵循 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

html li标簽橫向排列_編寫靈活、穩定、高品質的HTML代碼的規範

9.3 說明

class 用于辨別高度可複用元件

,是以應該排在首位。id 用于辨別

具體元件

,應當謹慎使用(例如,頁面内的書簽),是以排在第二位。

十、布爾(boolean)型屬性

10.1 注意

(1)布爾型屬性可以在

聲明時不指派

。XHTML 規範要求為其指派,但是

HTML5 規範不需要

(2)元素的布爾型屬性如果

有值

,就是

true

,如果

沒有值

,就是

false

(3)如果屬性存在,其值必須是空字元串或 [...] 屬性的規範名稱,并且不要在首尾添加空白符。

簡單來說,就是

不用指派

10.2 Example

html li标簽橫向排列_編寫靈活、穩定、高品質的HTML代碼的規範

十一、減少标簽的數量

編寫 HTML 代碼時,盡量

避免多餘的父元素

。很多時候,這需要疊代和重構來實作。

html li标簽橫向排列_編寫靈活、穩定、高品質的HTML代碼的規範

十二、減少 JavaScript 生成的标簽

通過 JavaScript 生成的标簽讓内容變得

不易查找、編輯

,并且降低性能。能避免時盡量避免。

  • 原作者:WEBING
  • 原出處:segmentfault思否
  • 原文連結:人類身份驗證 - SegmentFault