一般規約


一般規約

タグ

  • 自己終了タグ、閉じる必要なし (例: img input br hr など); img input br hr 等 )；
  • 可选的闭合标签（closing tag），需闭合 ( 例如：</li> 或 </body> )；
  • 尽量减少标签数量；
<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 应以功能或内容命名，不以表现形式命名；
  • class 与 id 单词字母小写，多个单词组成时，采用中划线-
    • 閉じる必要があるオプションの終了タグ (例: </li> または </body> ); 
<!-- Not recommended -->
<div class="j-hook left contentWrapper"></div>
<!-- Recommended -->
<div id="j-hook" class="sidebar content-wrapper"></div>
🎜class は式ではなく関数またはコンテンツに基づいて名前を付けるようにしてください。名前は小文字で指定する必要があります。複数の単語で構成される場合は、ダッシュ - を使用して区切ります。🎜🎜JavaScript フックとして一意の ID を使用し、スタイル情報のないクラスを作成しないでください。

属性の順序

読みやすさを確保するために、HTML 属性は特定の順序で表示される必要があります。

  • id

  • class

  • name

  • data-xxx

  • src、for、type、href

  • title、alt

  • アリア-xxx、役

<a id="..." class="..." data-modal="toggle" href="###"></a>

<input class="form-control" type="text">

<img src="..." alt="...">

引用符

属性の定義には一律に二重引用符を使用します。 

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

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

ネスト

a は div のネストを許可しません この制約は、セマンティックネスト制約です (a は a をネストできません など)。 。 a 不允许嵌套 div这种约束属于语义嵌套约束，与之区别的约束还有严格嵌套约束，比如a 不允许嵌套 a。

严格嵌套约束在所有的浏览器下都不被允许；而语义嵌套约束，浏览器大多会容错处理，生成的文档树可能相互不太一样。

语义嵌套约束

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

严格嵌套约束

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

布尔值属性

HTML5 规范中 disabled、checked、selected

すべてのブラウザで厳密なネスト制約が許可されるわけではありません。セマンティック ネスト制約については、ほとんどのブラウザがフォールト トレランスを処理し、生成されるドキュメント ツリーは互いに異なる可能性があります。
セマンティックネストされた制約

    <li> は、<ul> または <ol> に使用されます。 次; 🎜🎜<dd>、<dt> は <dl> に使用されます 🎜🎜<コード ><thead>    、<tbody>、<tfoot>、<tr>、 < ;td> <table> で使用されます。🎜🎜🎜厳密なネスト制約🎜
      🎜インライン レベルの要素。テキストのみを含めることができます。または他のインライン レベル要素 🎜🎜<a> は、インタラクティブ要素 <a>、<button> >、< をネストできません。 code><select> など; 🎜🎜<p> はブロックレベルの要素 <div>、< をネストできません。 h1>~
      、

      、

        /
          /
        1. 、< ;dl>/
          /
          、
          など。 🎜🎜🎜ブール属性🎜🎜 HTML5 仕様では、disabled、checked、selected などの属性は値を設定する必要がありません。 🎜りー🎜🎜🎜 🎜