フロントエンドコーディング仕様--html仕様_html/css

フロントエンドコーディング仕様--html仕様_html/css_WEB-ITnose

WBOY

リリース： 2016-06-21 08:46:50

オリジナル

1156 人が閲覧しました

文書型

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 つ以下にする
可能な限りスクリプトを組み合わせる
インライン化しないスタイル ()
インラインスタイルを使用しないでください (
)
使用しないでくださいインラインスクリプトを使用します (<script>alert('no Good')</script>)
プレゼンテーション要素 (、、、< font>)

小文字

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 属性には単一引用符ではなく二重引用符を使用してください。