検索

ホームページ >ウェブフロントエンド >htmlチュートリアル >HTMLコード記述標準ガイド_HTML/Xhtml_Webページ制作

HTMLコード記述標準ガイド_HTML/Xhtml_Webページ制作

WBOY
WBOYオリジナル
2016-05-16 16:36:071805ブラウズ

一般的な規約
タグ

自己終了タグ、閉じる必要なし (例: img input br hr など);
オプションの終了タグ (終了タグ)、閉じる必要があります (例: または < ; /body>);
タグの数をできるだけ減らします;

XML/HTML コードコンテンツをクリップボードにコピー
  1. <img src="images/google.png " alt="Google">

  2. <入力 type="テキスト" 名前="タイトル">
  4. <ul>
  5. <li>スタイルリ>
  6. <li>ガイドリ>
  7. ul>
  10. <スパン クラス="アバター" >
  11. <img src=".. .">
  12. スパン>
  15. <img クラス="アバター" src="...">

    16. クラスと ID

    クラスは式ではなく関数またはコンテンツに基づいて名前を付ける必要があります。
    クラスと ID は小文字にする必要があり、複数の単語で構成される場合はダッシュ区切りを使用します。
    JavaScript フックとして一意の ID を使用します。

    を使用せずにクラスを作成することは避けてください。
    XML/HTML コードコンテンツをクリップボードにコピー
    2. <div class="j-左フック contentWrapper">div>
    5. <div id="j-フック" クラス="サイドバー コンテンツ ラッパー">< /div>

    属性の順序

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

    id
    class
    name
    data-xxx
    src、for、type、href
    title、alt
    aria-xxx、role

    XML/HTML コードコンテンツをクリップボードにコピー
    1. <a id="..." クラス="..." データモーダル="切り替え" href="###"> a>
    3. <入力 クラス="form- control" type="text">
    5. <img src=".. ." alt="...">

    引用符

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

    XML/HTML コードコンテンツをクリップボードにコピー
    2. <スパン id='j-フック' クラス=テキスト>Google スパン>
    5. <スパン id="j-フック" クラス="テキスト">Googleスパン>

    b ネスト

    a は div のネストを許可しません。この制約はセマンティックネスト制約です。たとえば、a は a のネストを許可しません。

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

    セマンティックネスト制約

  16. または
    で使用されます。
    で使用されます。 、、、 は で使用されます。


    厳密なネスト制約

    インライン レベル要素にはテキストまたは他のインライン レベル要素のみを含めることができます。、