HTML コーディング仕様
このドキュメントの目標は、HTML コード スタイルに一貫性を持たせ、理解しやすく維持しやすいものにすることです。この習慣はありません。IDE を慎重に選択し、「テキスト エディタ」はもう使用しないでください。
1 コード スタイル
1.1 インデントと改行
[必須] インデント レベル 2 として 4 つのスペースを使用します。スペースやタブ文字は使用できません。
例:
<ul>
<li>first</li>
<li>second</li>
</ul>[推奨] 1 行あたり最大 120 文字。
説明:
コードが長すぎると、読んだり保守したりするのが難しくなります。ただし、HTML の特殊性を考慮すると、厳密な要件はなく、Sublime、phpstorm、wenstorm などにはルーラー機能が備わっています。
1.2 名前付け
[必須] クラスにはすべて小文字を含める必要があり、単語は - で区切る必要があります。
[必須] クラスは、対応するモジュールまたはコンポーネントのコンテンツまたは関数を表す必要があり、スタイル情報を使用して名前を付けることはできません。
例:
<!-- good --> <div></div> <!-- bad --> <div></div>
[必須] 要素 ID はページ上で一意である必要があります。
説明:
同じページ内の異なる要素に同じ ID が含まれていますが、これは ID の属性の意味に準拠していません。また、document.getElementById を使用すると、追跡が困難な問題が発生する可能性があります。
[提案] id 内のすべての単語を小文字にし、単語を - で区切ることをお勧めします。スタイルは同じプロジェクト内で一貫している必要があります。
[推奨事項] ID とクラス名は、競合を避け、明確に記述しつつ、できるだけ短くする必要があります。
例:
<!-- good --> <div id="nav"></div> <!-- bad --> <div id="navigation"></div> <!-- good --> <p></p> <!-- bad --> <p></p> <!-- good --> <span></span> <!-- bad --> <span></span>
[必須] 同じページで同じ名前と ID を使用しないでください。
説明:
IE ブラウザは要素の id 属性と name 属性を混同し、document.getElementById が予期しない要素を取得する可能性があります。したがって、要素の id 属性と name 属性に名前を付けるときは十分に注意する必要があります。
ID と名前に異なる命名規則を使用することをお勧めします。
例:
<input name="foo"> <div id="foo"></div> <script> // IE6 将显示 INPUT alert(document.getElementById('foo').tagName); </script>
1.3 タグ
[必須] タグ名には小文字を使用する必要があります。
例:
<!-- good --> <p>Hello StyleGuide!</p> <!-- bad --> <P>Hello StyleGuide!</P>
[必須] 自己終了を必要としないラベルでは、自己終了は許可されません。
説明:
自己終了を必要としない一般的なタグには、input、br、img、hr などが含まれます。
例:
<!-- good --> <input type="text" name="title"> <!-- bad --> <input type="text" name="title" />
【必須】 HTML5では省略が認められている終了タグについて、終了タグの省略は認められません。
例:
<ul>
<li>first</li>
<li>second</li>
</ul>
- first
- second
[必須] タグの使用は、タグのネスト ルールに従う必要があります。
説明:
たとえば、div を p に配置することはできず、tbody を table に配置する必要があります。
例:
<!-- good --> <div><h1><span></span></h1></div> <a href=""><span></span></a> <!-- bad --> <span><div></div></span> <p><div></div></p> <h1><div></div></h1> <h6><div></div></h6> <a href="a.html"><a href="a.html"></a></a>
[推奨事項] HTML タグの使用は、タグのセマンティクスに従う必要があります。
説明:
以下は一般的なタグのセマンティクスです
p - 段落 h1,h2,h3,h4,h5,h6 - 层级标题 strong,em - 强调 ins - 插入 del - 删除 abbr - 缩写 code - 代码标识 cite - 引述来源作品的标题 q - 引用 blockquote - 一段或长篇引用 ul - 无序列表 ol - 有序列表 dl,dt,dd - 定义列表
例:
<!-- good --> <p>Esprima serves as an important <strong>building block</strong> for some JavaScript language tools.</p> <!-- bad --> <div>Esprima serves as an important <span>building block</span> for some JavaScript language tools.</div>
[推奨事項] CSS が同じことを実現できる場合は、テーブルを使用しないでください。要件 レイアウトを作成します。
説明:
互換性が許す限り、セマンティックな正確性を可能な限り維持する必要があります。複数の列を含む複雑なフォームなど、グリッドの配置と伸縮性に関する厳密な要件があるシナリオでは例外が許可されます。
[推奨事項] タグの使用はできる限り簡潔にし、不要なタグを減らす必要があります。
例:
<!-- good -->
<img src="/static/imghwm/default1.png" data-src="image.png" class="lazy" alt="HTMLコーディング標準" >
<!-- bad -->
<span>
<img src="/static/imghwm/default1.png" data-src="image.png" class="lazy" alt="HTMLコーディング標準" >
</span>1.4 プロパティ
[必須] プロパティ名には小文字を使用する必要があります。
例:
<!-- good --> <table cellspacing="0">...</table> <!-- bad --> <table cellSpacing="0">...</table>
[必須] 属性値は二重引用符で囲む必要があります。
説明:
一重引用符と引用符は使用できません。
例:
<!-- good --> <script src="esl.js"></script> <!-- bad --> <script src='esl.js'></script> <script src=esl.js></script>
[提案] ブール型属性の場合は、属性値を追加しないことをお勧めします。
例:
<!-- good --> <input type="text" disabled> <input type="checkbox" value="1" checked> <!-- bad --> <input type="text" disabled="disabled"> <input type="checkbox" value="1" checked="checked">
[推奨事項] カスタム属性の先頭に xxx- を付けることをお勧めします。data- を付けることをお勧めします。
説明:
プレフィックスを使用すると、カスタム プロパティと標準定義のプロパティを区別するのに役立ちます。
例:
<ol data-ui-type="Select"></ol>
2 一般
2.1 DOCTYPE
[必須] HTML5 doctype を使用して次のことを行います。標準モードを有効にするには、大文字の DOCTYPE を使用することをお勧めします。
例:
<!DOCTYPE html>
[推奨] IE Edge および Chrome Frame モードを有効にします。
例:
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
[提案] html タグに正しい lang 属性を設定してください。
説明:
は、音声合成ツールに使用する発音を決定させたり、翻訳ツールに翻訳言語を決定させたりするなど、ページのアクセシビリティを向上させるのに役立ちます。
例:
<html>
[推奨] レンダリングのためにデュアルコア ブラウザの Webkit カーネルをオンにします。
説明:
ブラウザ カーネル コントロールのメタ タグに関するドキュメントの記事を参照してください。
例:
<meta name="renderer" content="webkit">
[推奨] ブラウザの DNS プリフェッチをオンにします。
説明:
DNS リクエストの数を減らし、DNS を事前に取得します。
例:
<link rel="dns-prefetch" href="//global.zuzuche.com/"> <link rel="dns-prefetch" href="//imgcdn1.zuzuche.com/"> <link rel="dns-prefetch" href="//qiniucdn.com/">
2.2 エンコーディング
[必須] ページでは圧縮形式を使用し、文字エンコーディングを明示的に指定する必要があります。文字エンコーディングを指定するメタは、head の最初の直接の子である必要があります。
説明:
記事「HTML5 Charset は使用できますか?」を参照してください。
例:
<html>
......
......