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="/static/imghwm/default1.png" data-src="..." class="lazy" alt="HTMLコーディング仕様の詳細紹介" >
</span>
<!-- Better -->
<img class="avatar lazy" src="/static/imghwm/default1.png" data-src="..." alt="HTMLコーディング仕様の詳細紹介" >
5.Emmet帮助我们快速书写html代码
テキストからウェブサイトへ：HTMLの力Apr 13, 2025 am 12:07 AMHTMLは、Webページを構築するために使用される言語であり、タグと属性を使用してWebページの構造とコンテンツを定義します。 1）htmlは、などのタグを介してドキュメント構造を整理します。 2）ブラウザはHTMLを分析してDOMを構築し、Webページをレンダリングします。 3）マルチメディア関数を強化するなど、HTML5の新機能。 4）一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれます。 5）最適化の提案には、セマンティックタグの使用とファイルサイズの削減が含まれます。
HTML、CSS、およびJavaScriptの理解：初心者向けガイドApr 12, 2025 am 12:02 AMwebdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、
HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AMHTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。
HTML、CSS、およびJavaScript：Web開発者に不可欠なツールApr 09, 2025 am 12:12 AMHTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。
HTML、CSS、およびJavaScriptの役割：コアの責任Apr 08, 2025 pm 07:05 PMHTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。
HTMLは初心者のために簡単に学ぶことができますか？Apr 07, 2025 am 12:11 AMHTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。
HTMLでの開始タグの例は何ですか？Apr 06, 2025 am 12:04 AMAnexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
WebStorm Mac版
便利なJavaScript開発ツール
SublimeText3 中国語版
中国語版、とても使いやすい
Dreamweaver Mac版
ビジュアル Web 開発ツール
mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。
AtomエディタMac版ダウンロード
最も人気のあるオープンソースエディター
