HTML的代碼書寫有哪一些規(guī)范

通用約定
標(biāo)簽

自閉合（self-closing）標(biāo)簽，無需閉合 ( 例如： img input br hr 等 )；
可選的閉合標(biāo)簽（closing tag），需閉合 ( 例如：</li> 或 </body>)；
盡量減少標(biāo)簽數(shù)量；

<img src="images/google.png" alt="Google">  
<input type="text" name="title">   
<ul>  
  <li>Style</li>  
  <li>Guide</li>  
</ul>  
<!-- Not recommended -->  
<span class="avatar">  
  <img src="...">  
</span>  
<!-- Recommended -->  
<img class="avatar" src="...">

Class 與 ID

class 應(yīng)以功能或內(nèi)容命名，不以表現(xiàn)形式命名；
class 與 id 單詞字母小寫，多個(gè)單詞組成時(shí)，采用中劃線-分隔；
使用唯一的 id 作為 Javascript hook，同時(shí)避免創(chuàng)建無樣式信息的 class；

<!-- Not recommended -->  
<div class="j-hook left contentWrapper"></div>   
<!-- Recommended -->  
<div id="j-hook" class="sidebar content-wrapper"></div>

屬性順序

HTML 屬性應(yīng)該按照特定的順序出現(xiàn)以保證易讀性。

id
class
name
data-xxx
src, for, type, href
title, alt
aria-xxx, role

<a id="..." class="..." data-modal="toggle" href="###"></a>  
  
<input class="form-control" type="text">  
  
<img src="..." alt="...">

引號(hào)

屬性的定義，統(tǒng)一使用雙引號(hào)。

相信看了這些案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！

相關(guān)閱讀：

HTML你一定要知道的優(yōu)化技巧

html的元素水平垂直居中應(yīng)該怎么設(shè)置

怎樣用HTML和CSS做出大白

以上就是HTML的代碼書寫有哪些規(guī)范的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！