ホームページ > 記事 > ウェブフロントエンド > HTMLコーディング仕様の詳細紹介
HTMLコーディング仕様の詳細紹介
- PHP中文网オリジナル
- 2017-04-01 15:25:081518ブラウズ
1. 黄金律
同じプロジェクトに何人が参加しても、コードのすべての行が同じ人によって書かれたように見えるようにしてください。
Every line of code should appear to be written by a single person, no matter the number of contributors.
これには、プロジェクト内で常に同じコーディング標準セットに従う必要があります。プロジェクト開発の前に、一連の効果的なコーディング標準を開発し、プロジェクト チームの各メンバーはこの標準に従ってコーディングする必要があります。
2.命名規則
list
-paddingleft-2">
CSSファイル名は英語の小文字を使用します。複数の単語がある場合は、アンダースコア(_)で接続されます。 ) の真ん中にある、例えば:index.html web-guide.html
- カスタムの
- 属性
には英語の小文字の命名を使用することがほとんどです。複数の単語がある場合は、真ん中の単語を使用します。generate-catalogue
data- で始まる属性名は、データの保存に使用されます。 data-.HTML はデータセットを通じて属性を取得できます。たとえば、対応する - html タグ
id が cityList の場合、getAttribute を通じて値を取得できます。 getElementById('cityList'). dataset('city'); サポートしていないブラウザの場合は、document.getElementById('cityList').getAttribute('-data-city'); を使用する必要があります インデント用のタブの代わりに? これが、さまざまな環境でコードが一貫して表示されるようにする唯一の方法です
ネストされた要素は 1 回インデントする必要があります (つまり 2 つのスペース)
属性の値については、必ず次のことを行ってくださいすべて二重引用符を使用し、単一引用符を使用せず、引用符を省略しないでください
自己終了要素の最後にスラッシュを追加しないでください
- 仕様 これはオプションであると明記されています
- オプションの終了タグを省略しないでください（
- や
- など）
長すぎるHTMLコードを1行に記述しないでください。推奨されます最大長を120列に設定してください120 列を超える場合は、読み取りと組版を容易にするために改行を入れるのが最善です。次のような、インライン要素内にブロックレベルの要素を入れ子にしないでください。推奨
ブロックレベルの要素を p タグ内にネストすることはできません。ブラウザはそれらを 2 つの独立したタグに解析し、必要な結果を得ることができません
- 3.2 HTML5 doctype
に標準モード宣言を追加します。各ブラウザで一貫した表示を保証するために、各 HTML ページの最初の行
3.3 Language 属性uage 属性
- HTML5 仕様に従って: HTML ルート要素に lang 属性を指定して、文書の正しい言語。これは、音声合成ツールが使用すべき発音を決定したり、翻訳ツールが翻訳時に従うべきルールを決定したりするのに役立ちます。
- lang 属性についての詳しい知識は、この仕様から学ぶことができます。
3.4 IE 互換モード
- Internet Explorer は、ページのレンダリングに使用する IE のバージョンを指定するためのタグの使用をサポートしています。強い特別なニーズがない限り、IE がレンダリングにサポートする最新のモードを使用できるように、エッジ モードに設定することをお勧めします。
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
具体的な情報はこちらをご参照ください
3.5 文字エンコーディング
明確な文字エンコーディングを宣言することで、ブラウザはコンテンツを正しく表示し、文字化けを防ぐことができます。通常、文字エンコーディングはUTF-8です<head> <meta charset="UTF-8"> </head>
。 3.6 はじめに CSS および JavaScript ファイル
HTML5 仕様によれば、通常、CSS ファイルと JavaScript ファイルを導入するときに type 属性を指定する必要はありません。これは、それぞれ text/css と text/javascript がデフォルト値であるためです。
<!-- External CSS --> <link rel="stylesheet" href="code-guide.css"> <!-- JavaScript --> <script src="code-guide.js"></script>
3.7 実用性は完璧よりも優れています
HTML 標準とセマンティクスに従うようにしてください。ただし、実用性を犠牲にしてはいけません。常に、問題は最小限の複雑さと最小限のラベルで解決する必要があります。
3.8 属性の順序 コードを読みやすくするために、HTML 属性は以下の順序で配置する必要があります。
classid、namedata-*
src、for、type、href
title、altaria-*、role class 用于标识高度可复用组件，因此应该放在首位。id 用于标识具体组件，应该尽量少使用（例如，页面内的书签），因此排在第二位。 以上顺序也不一定是绝对的，可以根据需要把常用的放在首位 3.9 布尔（boolean）型属性 Boolean 属性指不需要声明值的属性。XHTML 需要每个属性声明值，但是 HTML5 并不需要。了解更多内容，参考 WhatWG section on boolean attributes 一个元素中 Boolean 属性的存在表示取值 true，不存在则表示取值 false。如果一定要为其赋值的话，请参照 WhatWG 中的说明。 如果属性存在，其值必须是空字符串或 [...] 属性的本身名称，并且不要在首尾添加空白符。 简单来说，就是不用赋值。 虽然 HTML5是这样规定的，但是对于IE浏览器，如果不指定属性值，有时会有问题的，尤其是readonly和 disabled ，所以最好还是设置为 readonly="readonly" disabled="disabled" 3.10 减少标签嵌套的数量 在编写 HTML 代码时，尽量避免多余的父节点。很多时候，需要通过迭代和重构来使 HTML 变得更少。 请看下面的例子 3.11 避免利用JavaScript 生成标签或html片段 通过 JavaScript 生成的标签或html片段让内容变得不易查找、编辑，并且降低性能。能避免时尽量避免，我们可以采用模板的方式来处理，常用的模板有 handlebars（模板引擎类），Ember.js 就采用该模板引擎 knockoutjs，除了支持模板，他还是一个轻量级的MVVM框架 mustashe， 一个模板引擎 JsRender，一个非常好用的html模板引擎类 在不引入其他mvc或mvvm框架的前提下，采用 JsRender 或 handlebars 来处理html模板，这两个模板支持循环、条件语句，还支持在模板中动态执行JavaScript脚本（不建议这样做）。当然我们还可以引入MVC框架，这些框架一般都自带模板处理引擎，比如Angular、Ember、KnockoutJs等 4.语义化命名和语义化标签 我们尽量多采用语义化来命名id，并且采用语义化标签来书写html代码，多用html5中新增的标签来书写。 以上就是HTML编码规范详细介绍的内容，更多相关内容请关注PHP中文网（www.php.cn）！<input type="text" disabled>
<input type="checkbox" value="1" checked>
<select>
<option value="1" selected>1</option>
</select>
<!--不建议 -->
<input type="text" value="1" readonly="readonly" disabled="disabled">
<!-- Not so great -->
<span class="avatar">
<img src="...">
</span>
<!-- Better -->
<img class="avatar" src="...">
5.Emmet帮助我们快速书写html代码