本篇文章展示了標(biāo)簽規(guī)則，標(biāo)簽語義化，屬性規(guī)則，屬性順序和布爾屬性五個方面，帶大家梳理一下Web前端知識點的HTML編寫規(guī)則。

成都創(chuàng)新互聯(lián)致力于成都網(wǎng)站設(shè)計、網(wǎng)站建設(shè),成都網(wǎng)站設(shè)計,集團(tuán)網(wǎng)站建設(shè)等服務(wù)標(biāo)準(zhǔn)化，推過標(biāo)準(zhǔn)化降低中小企業(yè)的建站的成本，并持續(xù)提升建站的定制化服務(wù)水平進(jìn)行質(zhì)量交付，讓企業(yè)網(wǎng)站從市場競爭中脫穎而出。 選擇成都創(chuàng)新互聯(lián)，就選擇了安全、穩(wěn)定、美觀的網(wǎng)站建設(shè)服務(wù)！

1.標(biāo)簽規(guī)則

很多人覺得HTML太簡單，但她恰恰是前端開發(fā)中最基礎(chǔ)最重要的部分。

標(biāo)簽名統(tǒng)一使用小寫，不要使用大寫；

不要在自閉（self-closing）元素的尾部添加斜線；

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

不要輕易使用實體字符；

2.標(biāo)簽語義化

根據(jù)各個標(biāo)簽的用途去使用它們很重要，它涉及到文檔的可訪問性、重用和代碼效率等方面。

去掉樣式或者樣式丟失時頁面結(jié)構(gòu)依然清晰；

移動設(shè)備能夠更加完美的展示網(wǎng)頁（移動設(shè)備對css的支持較弱）；

閱讀器會根據(jù)標(biāo)簽的語義自動解析，呈現(xiàn)更容易閱讀的內(nèi)容形式（無障礙閱讀）；

便于后期的開發(fā)和維護(hù)，提高團(tuán)隊合作效率；

便于搜索引擎根據(jù)標(biāo)簽的語義確定上下文的權(quán)重問題；

3.屬性規(guī)則

使用標(biāo)簽時盡量符合語義

屬性名統(tǒng)一使用小寫，不要用大寫；

務(wù)必用雙引號包含屬性值；

自定義屬性請加data- 前綴；

屬性過長時請分行；

盡量避免style屬性和javascript事件；

4.屬性順序

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)當(dāng)謹(jǐn)慎使用（例如：頁面內(nèi)的標(biāo)簽），因此排在第二位。

5.布爾屬性

布爾型屬性可以在聲明時不賦值。

1

 關(guān)于HTML編寫規(guī)則就分享到這里了，希望以上內(nèi)容可以對大家有一定的參考價值，可以學(xué)以致用。如果喜歡本篇文章，不妨把它分享出去讓更多的人看到。