目次
HTMLコード記述標準ガイド_HTML/Xhtml_Webページ制作
html
フォーマット
仕様
一般的な規約
タグ
自己終了タグ、閉じる必要なし (例: img input br hr など);
オプションの終了タグ (終了タグ)、閉じる必要があります (例: または < ; /body>);
タグの数をできるだけ減らします;
XML/HTML コードコンテンツをクリップボードにコピー
- <img src="images/google.png " alt="Google">
- <入力 type="テキスト" 名前="タイトル">
- <ul>
- <li>スタイルリ>
- <li>ガイドリ>
- ul>
- <スパン クラス="アバター" >
- <img src=".. .">
- スパン>
- <img クラス="アバター" src="...">
クラスと ID
クラスは式ではなく関数またはコンテンツに基づいて名前を付ける必要があります。
を使用せずにクラスを作成することは避けてください。
クラスと ID は小文字にする必要があり、複数の単語で構成される場合はダッシュ区切りを使用します。
JavaScript フックとして一意の ID を使用します。XML/HTML コードコンテンツをクリップボードにコピー- <div class="j-左フック contentWrapper">div>
- <div id="j-フック" クラス="サイドバー コンテンツ ラッパー">< /div>
属性の順序
読みやすさを確保するために、HTML 属性は特定の順序で表示される必要があります。
id
class
name
data-xxx
src、for、type、href
title、alt
aria-xxx、roleXML/HTML コードコンテンツをクリップボードにコピー- <a id="..." クラス="..." データモーダル="切り替え" href="###"> a>
- <入力 クラス="form- control" type="text">
- <img src=".. ." alt="...">
引用符
属性の定義には二重引用符を一律に使用します。
XML/HTML コードコンテンツをクリップボードにコピー- <スパン id='j-フック' クラス=テキスト>Google スパン>
- <スパン id="j-フック" クラス="テキスト">Googleスパン>
b ネスト
a は div のネストを許可しません。この制約はセマンティックネスト制約です。たとえば、a は a のネストを許可しません。
厳密なネスト制約はすべてのブラウザで許可されるわけではありません。セマンティックネスト制約については、ほとんどのブラウザがフォールト トレランスを処理し、生成されるドキュメント ツリーは互いに異なる場合があります。
セマンティックネスト制約
- または
- で使用されます。
で使用されます。 、、、 は で使用されます。
厳密なネスト制約インライン レベル要素にはテキストまたは他のインライン レベル要素のみを含めることができます。、