2.1 通用約定

通用約定

標(biāo)簽

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

<img src="https://atts.w3cschool.cn/attachments/image/cimg/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 單詞字母小寫，多個單詞組成時，采用中劃線-分隔；
• 使用唯一的 id 作為 Javascript hook, 同時避免創(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="...">

引號

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

<!-- Not recommended -->
<span id='j-hook' class=text>Google</span>

<!-- Recommended -->
<span id="j-hook" class="text">Google</span>

嵌套

a 不允許嵌套 div這種約束屬于語義嵌套約束，與之區(qū)別的約束還有嚴(yán)格嵌套約束，比如a 不允許嵌套 a。

嚴(yán)格嵌套約束在所有的瀏覽器下都不被允許；而語義嵌套約束，瀏覽器大多會容錯處理，生成的文檔樹可能相互不太一樣。

語義嵌套約束

• <li> 用于 <ul> 或 <ol> 下；
• <dd>, <dt> 用于 <dl> 下；
• <thead>, <tbody>, <tfoot>, <tr>, <td> 用于 <table> 下；

嚴(yán)格嵌套約束

• inline-Level 元素，僅可以包含文本或其它 inline-Level 元素;
• <a>里不可以嵌套交互式元素<a>、<button>、<select>等;
• <p>里不可以嵌套塊級元素<div>、<h1>~<h6>、<p>、<ul>/<ol>/<li>、<dl>/<dt>/<dd>、<form>等。

更多詳情，參考WEB標(biāo)準(zhǔn)系列-HTML元素嵌套

布爾值屬性

HTML5 規(guī)范中 disabled、checked、selected 等屬性不用設(shè)置值。

<input type="text" disabled>

<input type="checkbox" value="1" checked>

<select>
  <option value="1" selected>1</option>
</select>