通用約定
通用約定
標(biāo)簽
- 自閉合(self-closing)標(biāo)簽,無需閉合 ( 例如:
img
input
br
hr
等 ); - 可選的閉合標(biāo)簽(closing tag),需閉合 ( 例如:
</li>
或</body>
); - 盡量減少標(biāo)簽數(shù)量;
<img src="//img.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>
等。
布爾值屬性
HTML5 規(guī)范中 disabled
、checked
、selected
等屬性不用設(shè)置值。
<input type="text" disabled> <input type="checkbox" value="1" checked> <select> <option value="1" selected>1</option> </select>