通用約定
標簽

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

<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 應以功能或內容命名，不以表現形式命名；
class 與 id 單詞字母小寫，多個單詞組成時，采用中劃線-分隔；
使用唯一的 id 作為 Javascript hook，同時避免創建無樣式信息的 class；

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

屬性順序

HTML 屬性應該按照特定的順序出現以保證易讀性。

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="...">

引號

屬性的定義，統一使用雙引號。

相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

HTML你一定要知道的優化技巧

html的元素水平垂直居中應該怎么設置

怎樣用HTML和CSS做出大白

以上就是HTML的代碼書寫有哪些規范的詳細內容，更多請關注php中文網其它相關文章！