一般規約
タグ
自己終了タグ、閉じる必要なし (例: img input br hr など)
オプションの終了タグ (終了タグ)、閉じる必要があります (for例: または
<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="...">
クラスと ID 単語の文字は小文字であり、複数の単語で構成される場合はダッシュ区切りを使用します。一意の ID を Javascript フックとして使用し、スタイル情報のないクラスの作成を避けます。
HTML 属性は、読みやすさを確保するために特定の順序で表示される必要があります。
id
class
data-xxx
src, for, type, hreftitle, altaria-xxx, role
<!-- Not recommended --> <p class="j-hook left contentWrapper"></p> <!-- Recommended --> <p id="j-hook" class="sidebar content-wrapper"></p>
引用符
属性の定義には一律に二重引用符を使用します。
<a id="..." class="..." data-modal="toggle" href="###"></a> <input class="form-control" type="text"> <img src="..." alt="...">
a は p のネストを許可しません。この制約には、厳密なネスト制約が含まれます。たとえば、a は a のネストを許可しません。 すべてのブラウザで厳密なネスト制約が許可されるわけではありません。セマンティック ネスト制約については、ほとんどのブラウザがフォールト トレランスを処理し、生成されるドキュメント ツリーは互いに異なる可能性があります。
セマンティックネスト制約
で使用されます。テキストまたはその他のインラインのみを含めることができます。 -レベル要素;
インタラクティブ要素
