ホームページ > 記事 > ウェブフロントエンド > 知っておくべきHTML仕様（整理・共有）
知っておくべきHTML仕様（整理・共有）
- WBOY転載
- 2022-01-13 18:06:361927ブラウズ
この記事では、HTML 仕様についての知識を提供します。HTML は、Web ページの構造を記述するハイパーテキスト マークアップ言語として、常に広く使用されています。このドキュメントの目的は、内部開発内で HTML コード スタイルの一貫性を確保し、プロジェクトの理解と保守を容易にすることです。みんなが助けてくれることを願っています。
#HTML 仕様
1 はじめに
HTML は、Web ページの構造を記述するハイパーテキスト マークアップ言語として、常に広く使用されています。このドキュメントの目的は、内部開発内で HTML コード スタイルの一貫性を確保し、プロジェクトの理解と保守を容易にすることです。2 コードスタイル
2.1 インデントと改行
[必須] スペースは 4 つ使用しますインデント レベルとして機能し、2 つのスペースまたはタブ文字は許可されません。 例:<ul>
<li>first</li>
<li>second</li>
</ul>[推奨] 1 行あたり最大 120 文字。 説明: コードが長すぎると、読んだり保守したりするのが難しくなります。ただし、HTML の特殊性を考慮すると、厳密な要件はありません。
2.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>[必須] フックスクリプトのスタイル情報を持たないクラスの作成は禁止されています。 説明: クラスは許可されていません。JavaScript に特定の要素を選択させるためにのみ使用されます。クラスには明確なセマンティクスとスタイルが必要です。そうしないと、CSS クラスの急増につながりやすくなります。 ID と属性の選択をフックとして使用する方が良い方法です。 [必須] 同じページで同じ名前と 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>
2.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
- 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="image.png">
<!-- bad -->
<span>
<img src="image.png">
</span>
2.4 プロパティ
[必須] プロパティ名には小文字を使用する必要があります。
例:<!-- good --> <table cellspacing="0">...</table> <!-- bad --> <table cellSpacing="0">...</table>[必須] 属性値は二重引用符で囲む必要があります (iView や要素などのコンポーネント ライブラリを除く)。 説明: 一重引用符と引用符は使用できません。 例:
<!-- good --> <script src="esl.js"></script> <!-- bad --> <script src='esl.js'></script> <script src=esl.js></script>[提案] ブール型属性の場合は、属性値を追加しないことをお勧めします。 例:
<input type="text" disabled> <input type="checkbox" value="1" checked>[推奨事項] カスタム属性の先頭に xxx- を付けることをお勧めします。data- を付けることをお勧めします。 説明: プレフィックスを使用すると、カスタム プロパティと標準定義のプロパティを区別するのに役立ちます。 例:
<ol data-ui-type="Select"></ol>3 汎用
##3.1 DOCTYPE
[强制] 使用 HTML5 的 doctype 来启用标准模式，建议使用大写的 DOCTYPE。
示例：
<!DOCTYPE html>
[建议] 启用 IE Edge 模式。
示例：
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
[建议] 在 html 标签上设置正确的 lang 属性。
解释：
有助于提高页面的可访问性，如：让语音合成工具确定其所应该采用的发音，令翻译工具确定其翻译语言等。
示例：
<html>
3.2 编码
[强制] 页面必须使用精简形式，明确指定字符编码。指定字符编码的 meta 必须是 head 的第一个直接子元素。
解释：
见 HTML5 Charset能用吗 一文。
示例：
<html>
......
......