HTML的程式碼書寫有哪些規範

這次帶給大家HTML的程式碼書寫有哪些規範，書寫HTML的程式碼的注意事項有哪些，下面就是實戰案例，一起來看一下。

通用約定
標籤

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

<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中文網其他相關文章！