HTML関連の仕様を学ぶ

前の言葉

HTML は、Web ページの構造を記述するハイパーテキスト マークアップ言語であり、HTML コードのスタイルを一貫させることができ、HTML を理解しやすく、保守しやすくなります。この記事ではHTMLの仕様を詳しく紹介します

全体の構造

【ページヘッダー】

1. ファイルは「..>」の1行目で始まることをお勧めします。 "" を使用するには

nbsp;html>

2. ドキュメントのエンコーディング文字セットは宣言されている必要があり、ファイル自体のエンコーディングと一致している必要があります。指定された文字エンコーディングは head である必要があります。最初の直接の子要素です。 UTF-8 エンコーディングを使用することをお勧めしますmeta 必须是 head 的第一个直接子元素。推荐使用UTF-8编码

<meta>

　　3、根据页面内容和需求填写适当的keywords和description

<meta><meta>

　　4、页面title是不可缺少的一项，title 必须作为 head 的直接子元素，并紧随 charset 声明之后

<meta>

【资源引入】

　　1、保证 favicon 可访问

<link>

　　2、引入 CSS 和 JavaScript 时无须指明 type 属性

　　3、引入 CSS 时必须指明 rel="stylesheet"

<link>

　　4、使用link将css文件引入，并置于head中；使用script将js文件引入，并置于body底部

　　5、移动环境或只针对现代浏览器设计的 Web 应用，如果引用外部资源的 URL 协议部分与页面相同，建议省略协议前缀。这是因为使用 protocol-relative URL 引入 CSS，在 IE7/8 下，会发两次请求。是否使用 protocol-relative URL 应充分考虑页面针对的环境

<script></script>

【结构优化】

　　1、尽量遵循 HTML 标准和语义，但是不要以牺牲实用性为代价。任何时候都要尽量使用最少的标签并保持最小的复杂度

　　2、结构顺序和视觉顺序基本保持一致，按照从上至下、从左到右的视觉顺序书写HTML结构。有时为了便于搜索引擎抓取，也会将重要内容在HTML结构顺序上提前

　　3、结构、表现、行为三者分离，避免内联

　　4、每一个块级元素都另起一行，每一行都使用Tab缩进对齐（head和body的子元素不需要缩进）。删除冗余的行尾空格

　　5、对于内容较为简单的表格，建议将tr写成单行

　　6、可以在大的模块之间用空行隔开，使模块更清晰

 

代码格式

【缩进】

　　使用4个空格代替1个Tab（大多数编辑器中可设置）

• first
• second

【命名】

　　1、class 必须单词全字母小写，单词间以 - 分隔

　　2、class 必须代表相应模块或部件的内容或功能，不得以样式信息进行命名

<!-- good --><div></div><!-- bad --><div></div>

　　3、同一页面，应避免使用相同的 name 与 id。因为IE7-浏览器会混淆元素的 id 和 name 属性， document.getElementById 可能获得不期望的元素。所以在对元素的 id 与 name 属性的命名需要非常小心

【标签】

　　1、标签名必须使用小写字母

　　2、对于无需自闭合的标签，不需要自闭合

　　3、对 HTML5 中规定允许省略的闭合标签，不允许省略闭合标签

　　4、HTML 标签的使用应该遵循标签的语义，且要符合标签嵌套规则

<!-- good --><p>Hello StyleGuide!</p><!-- bad --><p>Hello StyleGuide!</p><!-- good --><input><!-- bad --><input><!-- good -->

• first
• second

• first
• second

【注释】

　　采用类似标签闭合的写法，与HTML统一格式；注释文案两头空格，与CSS注释统一格式

　　开始注释：（文案两头空格）

　　结束注释：（文案前加“/”符号，类似标签的闭合）

　　允许只有开始注释

<!-- 头部 --><div>
<!-- LOGO --><h1 id="a-LOGO-a"><a>LOGO</a></h1>
<!-- /LOGO --><!-- 导航 --><ul>
<li><a>NAV1</a></li>
<li><a>NAV2</a></li>
<!-- 更多导航项 -->
</ul>
<!-- /导航 -->
</div><!-- /头部 -->

【属性】

　　1、属性和值全部小写

　　2、属性值必须用双引号包围

　　3、布尔类型的属性，建议不添加属性值

　　4、自定义属性建议以 xxx- 为前缀，推荐使用 data-

<!-- good -->

... ... <!-- good --><script></script><script></script><script></script>

3. ページのコンテンツとニーズに応じて、適切なキーワードと説明を入力します

id
class
name
data-xxx
src, for, type, href
title, alt
aria-xxx, role

4. ページtitle は必須項目です。title は head の直接の子要素であり、charset 宣言の直後にある必要があります

<img  src="/static/imghwm/default1.png" data-src="#" class="lazy" alt="HTML関連の仕様を学ぶ" >

【リソース紹介】 🎜🎜 1、favicon がアクセス可能であることを確認してください🎜🎜

<label><input> 我已确认上述条款</label>

🎜🎜 2. CSS と JavaScript を導入する場合、 type 属性🎜 🎜 3. CSS を導入する場合は、rel="stylesheet" を指定する必要があります🎜🎜

<button>提交</button><button>取消</button>

🎜🎜 4. 導入にはリンクを使用しますcss ファイルを作成し、それを head に配置します。js ファイルへのスクリプトを使用して、本文の下部に配置します 🎜🎜 5. モバイル環境または最新のブラウザー専用に設計された Web アプリケーションの場合、URL のプロトコル部分外部リソースを参照する はページと同じであるため、プロトコル プレフィックスを省略することをお勧めします。これは、プロトコル相対 URL を使用して CSS を導入すると、IE7/8 で 2 つのリクエストが送信されるためです。 プロトコル相対 URL を使用するかどうかは、ページが対象とする環境を十分に考慮する必要があります🎜🎜

<input>

🎜🎜【構造最適化】🎜🎜 1. HTML 標準とセマンティクスに従うよう努めますが、犠牲にしないでください実用性。最小限のタグを使用し、常に最小限の複雑さを維持するようにしてください 🎜🎜 2. 構造的な順序と視覚的な順序は基本的に一貫しており、HTML 構造は上から下、左から右の視覚的な順序で記述される必要があります。場合によっては、検索エンジンのクロールを容易にするために、重要なコンテンツが HTML 構造の順序で事前に移動されることがあります🎜🎜 3. インライン化を避けるために構造、パフォーマンス、動作を分離する🎜🎜 4. 各ブロックレベルの要素を配置する必要があります別の行にタブ インデントを使用して各行を揃えます (head と body の子要素をインデントする必要はありません)。末尾の冗長なスペースを削除します🎜🎜 5. 内容が比較的単純な表の場合は、trを一行で記述することをお勧めします🎜🎜 6. 大きなモジュールは、モジュールを明確にするために空行で区切ることができます🎜🎜🎜

コード形式🎜🎜【インデント】🎜🎜 1つのタブの代わりに4つのスペースを使用します（ほとんどのエディタで設定できます） 🎜🎜

<audio><source><source><object><embed></embed></object></source></source></audio><video><source><source><object><embed></embed></object></source></source></video>

🎜🎜【名前】🎜🎜 1. クラスはすべて小文字にする必要があり、単語の間には - が必要です🎜🎜 2。 . クラスは、対応するモジュールまたはコンポーネントのコンテンツまたは関数を表す必要があり、スタイル情報を使用して名前を付けることはできません🎜🎜rrreee🎜🎜 3. 同じページでは、同じ name と を使用しないでください。 >ID。 IE7 ブラウザは要素の id 属性と name 属性を混同するため、document.getElementById は予期しない要素を取得する可能性があります。したがって、要素の id 属性と name 属性に名前を付けるときは十分に注意する必要があります🎜🎜[Label]🎜🎜 1. ラベル名には小文字を使用する必要があります🎜🎜 2. 自己終了である必要がないラベルの場合、自己終了する必要はありません🎜🎜 3. HTML5 の場合、終了タグの省略は許可されていますが、終了タグの省略は許可されていません🎜🎜 4. HTML タグは、タグのセマンティクスに従い、タグの入れ子ルールに従う必要があります🎜🎜 rrreee🎜🎜【コメント】🎜🎜 タグクロージャーに似た記述方法を使用し、形式は HTML の両端にスペースが使用されるように統一します。コメントコピーの形式をCSSコメントで統一しています🎜🎜コメント開始: <!-- コメントコピー--> (コピーの両端にスペース) )🎜🎜 コメント終了: <!-- /Comment copy--> (ラベルの終わりと同様に、コピーの前に「/」記号を追加します)🎜🎜 最初のコメントのみ許可されます🎜🎜rrreee🎜🎜 1. 属性と値すべて小文字にする必要があります🎜🎜 2. 属性値は二重引用符で囲む必要があります🎜🎜 3. ブール型属性の場合は、属性値を追加しないことをお勧めします🎜🎜 4. カスタム属性は、プレフィックスとして <code>xxx- の場合は、data- を使用することをお勧めします🎜🎜 5. styleタグ、scriptタグのtype属性は省略可能です🎜🎜rrreee🎜🎜【属性の順序】🎜🎜 HTML読みやすさを確保するために、属性は特定の順序で表示される必要があります 🎜🎜rrreee🎜

 

特殊元素

【图片】

　　1、禁止 img 的 src 取值为空，否则会导致部分浏览器重新加载一次当前页面

　　2、为图片添加 alt 属性，提高图片加载失败时的用户体验

　　3、避免为 img 添加不必要的 title 属性，多余的 title 影响看图体验，并且增加了页面尺寸

　　4、为图片添加 width 和 height 属性，以避免页面抖动

<img  src="/static/imghwm/default1.png" data-src="#" class="lazy" alt="HTML関連の仕様を学ぶ" >

　　5、有下载需求的图片采用 img 标签实现，无下载需求的图片采用 CSS 背景图实现

　　产品 logo、用户头像、用户产生的图片等有潜在下载需求的图片，以 img 形式实现，能方便用户下载

　　无下载需求的图片，比如：icon、背景、代码使用的图片等，尽可能采用 css 背景图实现

【表单】

　　1、有文本标题的控件使用 label 标签将其与其标题相关联。最好将控件置于 label 内，以减少不必要的 id

<label><input> 我已确认上述条款</label>

　　2、使用 button 元素时必须指明 type 属性值。因为button 元素的默认 type 为 submit，如果被置于 form 元素中，点击后将导致表单提交

<button>提交</button><button>取消</button>

　　3、在针对移动设备开发的页面时，根据内容类型指定输入框的 type 属性，能获得友好的输入体验

<input>

【多媒体】

　　1、在支持 HTML5 的浏览器中优先使用 audio 和 video 标签来定义音视频元素，并使用退化到插件的方式来对多浏览器进行支持

<audio><source><source><object><embed></embed></object></source></source></audio><video><source><source><object><embed></embed></object></source></source></video>

　　2、只在必要的时候开启音视频的自动播放

 

以上がHTML関連の仕様を学ぶの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。