ブートストラップ HTML コーディング仕様


構文

  • タブの代わりに 2 つのスペースを使用します - これが、すべての環境で一貫したプレゼンテーションを保証する唯一の方法です。

  • ネストされた要素は 1 回インデントする必要があります (つまり 2 つのスペース)。

  • 属性の定義には、必ず二重引用符を使用し、単一引用符は使用しないでください。

  • 自己終了要素の末尾に末尾のスラッシュを追加しないでください。HTML5 仕様では、これはオプションであると明確に述べられています。

  • オプションの終了タグ (例: </li> または </body>) は省略しないでください。 </li> 或 </body>）。

实例：

<!DOCTYPE html>
<html>
  <head>
    <title>Page title</title>
  </head>
  <body>
    <img src="../style/images/company-logo.png" alt="Company">
    <h1 class="hello-world">Hello, world!</h1>
  </body>
</html>

HTML5 doctype

为每个 HTML 页面的第一行添加标准模式（standard mode）的声明，这样能够确保在每个浏览器中拥有一致的展现。

实例：

<!DOCTYPE html>
<html>
  <head>
  </head>
</html>

语言属性

根据 HTML5 规范：

强烈建议为 html 根元素指定 lang 属性，从而为文档设置正确的语言。这将有助于语音合成工具确定其所应该采用的发音，有助于翻译工具确定其翻译时所应遵守的规则等等。

更多关于 lang 属性的知识可以从 此规范 中了解。

这里列出了语言代码表。

<html lang="zh-CN">
  <!-- ... -->
</html>

IE 兼容模式

IE 支持通过特定的 <meta>例:

<!DOCTYPE html>
<html>
<head>
<title>ページタイトル</title>
</head>
<body>
<img src="../style/images/company-logo.png" alt="会社">
< ;h1 class="hello-world">Hello, world!</h1>
</body>
</html>各 HTML ページの
🎜HTML5 doctype🎜🎜 追加すべてのブラウザで一貫した表示を保証するために、最初の行に標準モード宣言を追加します。 🎜🎜例: 🎜🎜🎜<!DOCTYPE html>
<html>
<head>
</head>
</html>🎜🎜🎜言語属性 🎜🎜HTML5 仕様によると: 🎜🎜ドキュメントに正しい言語を設定するには、HTML ルート要素に lang 属性を指定することを強くお勧めします。これは、音声合成ツールが使用すべき発音を決定したり、翻訳ツールが翻訳時に従うべきルールを決定したりするのに役立ちます。 🎜🎜 lang 属性についての詳細は、この仕様から学ぶことができます。 🎜🎜言語コード表はここにリストされています。 🎜🎜🎜<html lang="zh-CN">
<!-- ... -->
</html>🎜🎜🎜IE互換モード🎜🎜IEサポート特定の <meta> タグを使用して、現在のページの描画に使用する IE のバージョンを決定します。強い特別なニーズがない限り、IE がサポートする最新のモードを採用するように IE に通知するには、🎜エッジ モード🎜 に設定するのが最善です。 🎜🎜🎜<meta http-equiv="X-UA-互換" content="IE=Edge">🎜🎜

文字エンコーディング

文字エンコーディングを明示的に宣言することで、ブラウザーがページのコンテンツがどのようにレンダリングされるかを迅速かつ簡単に決定できるようになります。この利点は、HTML で文字エンティティの使用を回避できるため、すべてがドキュメント エンコーディング (通常は UTF-8 エンコーディング) と一致することです。

<head>
<meta charset="UTF-8">
</head>

CSSとJavaScriptファイルの紹介

HTML5の仕様によれば、通常はCSSを導入する必要はありませんおよび JavaScript ファイル text/css と text/javascript がそれぞれデフォルト値であるため、type 属性を指定します。 type 属性，因为 text/css 和 text/javascript 分别是它们的默认值。

HTML5 spec links

  • Using link

  • Using style

  • Using script

<!-- External CSS -->
<link rel="stylesheet" href="code-guide.css">

<!-- In-document CSS -->
<style>
  /* ... */
</style>

<!-- JavaScript -->
<script src="code-guide.js"></script>

实用为王

尽量遵循 HTML 标准和语义，但是不要以牺牲实用性为代价。任何时候都要尽量使用最少的标签并保持最小的复杂度。

属性顺序

HTML 属性应当按照以下给出的顺序依次排列，确保代码的易读性。

  • class

  • id, name

  • data-*

  • src, for, type, href

  • title, alt

  • aria-*, role

    HTML5 仕様リンク

    • リンクの使用

  • スタイルの使用

  • スクリプトの使用




    <!-- 外部 CSS -->
    <link rel="stylesheet" href="code-guide.css">
<!-- ドキュメント内 CSS -->🎜<style> ;🎜 /* ... */🎜</style>🎜🎜<!-- JavaScript -->🎜<script src="code-guide.js"></script>🎜🎜🎜実用性は最も重要です🎜🎜 HTML 標準とセマンティクスに従うように努めますが、実用性を犠牲にしないでください。使用するタグを最小限にして、複雑さを常に最小限に抑えるようにしてください。 🎜🎜属性の順序🎜🎜 コードを読みやすくするために、HTML 属性は以下の順序で配置する必要があります。 🎜
  • 🎜クラス🎜🎜
  • 🎜id、name🎜🎜
  • 🎜data-*🎜🎜
  • 🎜src、for、type、 href🎜🎜
  • 🎜title, alt🎜🎜
  • 🎜aria-*, role< /code>🎜🎜🎜🎜クラスは再利用性の高いコンポーネントを識別するために使用されるため、最初にリストする必要があります。 ID は特定のコンポーネントを識別するために使用され、注意して使用する必要があるため (ページ内のブックマークなど)、2 番目になります。 🎜🎜🎜<a class="..." id="..." data-modal="toggle" href="#">🎜 リンク例🎜</a>🎜🎜<input class= "form-control" type="text">🎜🎜<img src="..." alt="...">🎜🎜

    ブール属性

    ブール属性は、値を割り当てずに宣言できます。 XHTML 仕様では値を割り当てる必要がありますが、HTML5 仕様では必要ありません。

    詳細については、ブール属性に関する WhatWG セクションを参照してください。

    要素のブール属性に値がある場合は true、値がない場合は false です。

    値を割り当てる必要がある場合は、WhatWG 仕様を参照してください: 属性が存在する場合、その値は空の文字列または [...] 属性の正規名である必要があり、空白を追加しないでください最初と最後にある文字。

    簡単に言えば、値を割り当てる必要はありません。

    <input type="text" 無効>
    <input type="checkbox" value="1" チェック済み>

    <選択>
    <option value="1" 選択済み>1< /option>
    </select>

    タグの数を減らす

    HTML コードを記述するときは、冗長な親要素を避けるようにしてください。多くの場合、これを実現するには反復とリファクタリングが必要になります。次のケースを参照してください:

    <!-- あまり良くありません -->
    <span class="avatar">
    <img src="...">
    </span> ;

    <!-- より良い -->
    <img class="avatar" src="...">

    JavaScript で生成されたタグ

    JavaScript で生成されたタグでコンテンツを簡単に作成編集してパフォーマンスを低下させます。できる限り避けてください。