ホームページ > 記事 > ウェブフロントエンド > フロントエンドコーディング仕様--html仕様_html/css_WEB-ITnose
フロントエンドコーディング仕様--html仕様_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 08:46:501163ブラウズ
文書型
html5 の文書型宣言を使用することをお勧めします:
<!DOCTYPE html>
言語属性
html5 仕様によると:
ドキュメントに正しい言語を設定するには、HTML ルート要素に lang 属性を指定することを強くお勧めします。これは、音声合成ツールが使用すべき発音を決定したり、翻訳ツールが翻訳時に従うべきルールを決定したりするのに役立ちます。
言語コード表はここにリストされています。
<html lang="en"></html>
IE 互換モード
IE は、現在のページの描画に使用する IE バージョンを決定する特定のメタ タグをサポートしています。強い特別なニーズがない限り、エッジ モード に設定して、IE がサポートする最新のモードを採用するように通知するのが最善です。
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
自己終了要素からスラッシュを省略します
自己終了要素の末尾にスラッシュを追加しないでください – HTML5仕様にはこれがオプションであると明確に記載されています。
推奨しません
<input type="text"/>
推奨
<input type="text">
終了タグを省略しないでください
オプションの終了タグを省略しないでください。
推奨しません
<ul> <li></ul>
推奨
<ul> <li></li></ul>
type属性を省略します
cssとjsのtype属性を省略します。 html5 における上記 2 つのデフォルトの type 値は text/css と text/javascript であるため、type 属性は通常は無視できます。これは古いバージョンのブラウザでも安全で信頼性があります。
セマンティック
h1、p などのセマンティック タグを使用します。
<!DOCTYPE html> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">Document 标题
子标题
文本段落
加粗文本
実用性が重要です
HTML 標準とセマンティクスに従うように努めますが、実用性を犠牲にしないでください。使用するタグを最小限にし、複雑さを常に最小限に抑えるようにしてください。
推奨しません
<span class="avatar"> <img src="avatar.jpg"></span>
推奨
<img class="avatar" src="avatar.jpg">
構造、パフォーマンス、動作は分離されています
完全なページは、構造 (html)、パフォーマンス (css)、動作 (js) の 3 つの部分に分割されます。それらをクリーンで保守しやすいコードにするには、できるだけ分離する必要があります。
構造、パフォーマンス、動作の分離を厳密に確保し、3 つの間の過度の相互作用やつながりを避けるようにしてください。つまり、ドキュメントとテンプレートには構造的な HTML のみを含めるようにして、すべてのプレゼンテーション コードをスタイル シートに移動し、すべてのアクション動作をスクリプトに移動します。さらに、それらの間のつながりをできる限り小さく保つために、ドキュメントとテンプレートに導入されるスタイル ファイルとスクリプト ファイルはできる限り少なくなります。
明確な階層化とは次のことを意味します:
- スタイル シートは 1 つまたは 2 つ以下にする
- 可能な限りスクリプトを組み合わせる
- インライン化しない スタイル (f9d237aa49298fd1a114e80f5a03502c)
- インライン スタイルを使用しないでください (0da8b851b25d76c78d856ca213c0f87ealert('no Good')2cacc6d41bbb37262a98f745aa00fbf0)
- プレゼンテーション要素 (a4b561c25d9afb9ac8dc4d70affff419、88f336217b3880082bb52d49b5de60a5、bacbf9e1ad7f40415ce1670e31edfee3、1b4d9475670c84d848edf074403efc7d)
小文字
HTML タグと属性 (カスタム属性を含む) はすべて小文字であり、大文字は使用しないでください。
データをバインド
ラベルにデータをバインドする必要がある場合は、html5 のカスタム属性 data-* を使用して関連データをバインドしてください。
<h1 data-age="20">张三</h1>
ブール型プロパティ
ブール型プロパティは値なしで宣言できます。 xhtml 仕様では値を割り当てる必要がありますが、html5 仕様では必要ありません。
<input type="text" disabled><input type="checkbox" value="1" checked><select> <option value="1" selected>1</option> <option value="2"></option></select>
html 引用符
html 属性には単一引用符ではなく二重引用符を使用してください。