亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

HTML編碼規(guī)范

nifhlheimr / 3461人閱讀

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

1.黃金法則（Golden rule）

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

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

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

2.命名規(guī)范

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

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

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

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

3.書寫規(guī)范
3.1 語法

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

嵌套元素應(yīng)當(dāng)縮進一次（即兩個空格）

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

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

不要省略可選的結(jié)束標(biāo)簽（closing tag）（例如， 或 ）

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

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

行內(nèi)元素中不要嵌套塊級元素，比如：

不推薦寫法

p標(biāo)簽中是不能嵌套塊級元素的，瀏覽器會解析為兩個獨立的標(biāo)簽，而不能到達(dá)你想要的結(jié)果

3.2 HTML5 doctype

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

根據(jù) HTML5 規(guī)范：

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

更多關(guān)于 lang 屬性的知識可以從 此規(guī)范 中了解。

3.4 IE 兼容模式

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

具體信息可以參考 這里

3.5 字符編碼

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

3.6 引入 CSS 和 JavaScript 文件

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

3.7 實用高于完美

盡量遵循 HTML 標(biāo)準(zhǔn)和語義，但是不應(yīng)該以浪費實用性作為代價。任何時候都要用盡量小的復(fù)雜度和盡量少的標(biāo)簽來解決問題。

3.8 屬性順序

HTML 屬性應(yīng)當(dāng)按照以下給出的順序依次排列，確保代碼的易讀性。

class

id, name

data-*

src, for, type, href

title, alt

aria-*, role

class 用于標(biāo)識高度可復(fù)用組件，因此應(yīng)該放在首位。id 用于標(biāo)識具體組件，應(yīng)該盡量少使用（例如，頁面內(nèi)的書簽），因此排在第二位。

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

3.9 布爾（boolean）型屬性

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

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

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

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

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

3.10 減少標(biāo)簽嵌套的數(shù)量

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

3.11 避免利用JavaScript 生成標(biāo)簽或html片段

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

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

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

mustashe， 一個模板引擎

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

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

4.語義化命名和語義化標(biāo)簽

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/49614.html

相關(guān)文章

  • 前端編碼規(guī)范之：樣式（scss）編碼規(guī)范

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

    reclay 評論0 收藏0

  • 編碼規(guī)范 —— 編寫靈活、穩(wěn)定、高質(zhì)量的 HTML 和 CSS 代碼的規(guī)范

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

    Karuru 評論0 收藏0

  • 前端、HTML+CSS+JS編寫規(guī)范（終極版）

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

    jsyzchen 評論0 收藏0

  • 前端、HTML+CSS+JS編寫規(guī)范（終極版）

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

    _Dreams 評論0 收藏0

  • 前端、HTML+CSS+JS編寫規(guī)范（終極版）

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

    Developer 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<