img
input
br
hr
等 );</li>
或 </body>
);<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="...">
-
分隔;<!-- Not recommended -->
<div class="j-hook left contentWrapper"></div>
<!-- Recommended -->
<div id="j-hook" class="sidebar content-wrapper"></div>
HTML 屬性應(yīng)該按照特定的順序出現(xiàn)以保證易讀性。
<a id="..." class="..." data-modal="toggle" href="###"></a>
<input class="form-control" type="text">
<img src="..." alt="...">
屬性的定義,統(tǒng)一使用雙引號(hào)。
<!-- 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)格嵌套約束在所有的瀏覽器下都不被允許;而語義嵌套約束,瀏覽器大多會(huì)容錯(cuò)處理,生成的文檔樹可能相互不太一樣。
語義嵌套約束
<li>
用于 <ul>
或 <ol>
下;<dd>
, <dt>
用于 <dl>
下;<thead>
, <tbody>
, <tfoot>
, <tr>
, <td>
用于 <table>
下;嚴(yán)格嵌套約束
<a>
里不可以嵌套交互式元素<a>
、<button>
、<select>
等;<p>
里不可以嵌套塊級(jí)元素<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>
更多建議: