ホームページ >ウェブフロントエンド >フロントエンドQ&A >html5 はどのようなルールに従う必要がありますか?

html5 はどのようなルールに従う必要がありますか?

青灯夜游
青灯夜游オリジナル
2022-01-23 14:39:122221ブラウズ

html5 の守るべきルール: 1. レイアウトに DIV をうまく活用する; 2. HTML タグと CSS スタイル シートを分離する; 3. CSS コードを最適化する; 4. JS ファイルを最適化してページの下部に配置する; 5. title 要素を上手に活用する; 6. 適切な HTML タグを適切な場所に使用する; 7. div タグの乱用を避ける。

html5 はどのようなルールに従う必要がありますか?

このチュートリアルの動作環境: Windows 7 システム、HTML5 バージョン、Dell G3 コンピューター。

HTML は 20 年近くの開発を経てきました。 HTML4 から XHTML、そして最近非常に人気のある HTML5 に至るまで、インターネット全体の発展をほぼ目撃してきました。ただし、現在でも、開発者が細心の注意を払う必要がある基本的な概念や原則が数多くあります。 Web フロントエンド開発トレーニングの編集者が、従うべき HTML5 開発原則を紹介します。

1. レイアウトに DIV を上手に活用する

Web ページを開発するとき、考慮すべきことの 1 つは、ページの焦点を区別することです。これらのコンテンツを DIV タグに含めることで、ページ上のコードが整然と適切にインデントされて表示されます。

2. HTML タグと CSS スタイル シートを分離する

良いページでは、HTML タグと CSS スタイル シートを分離する必要があります。これは、Web 開発に取り組むすべての Web 開発者が知っておくべき原則です。しかし、今日に至るまで、この原則に厳密に従っていない開発者がまだ多くいます。

スタイル シート コードを HTML タグに埋め込まないでください。開発者は、CSS スタイル シートを保存するための別のファイルを作成する習慣を身に付ける必要があります。これにより、他の開発者がコードを変更するときに作業を迅速に完了することが容易になります。

3. CSS コードの最適化

現在、複数の CSS ファイルを Web サイトに追加するのが一般的です。ただし、Web サイトに含まれる CSS ファイルが多すぎると、Web サイトの応答速度が遅くなります。解決策は、コードを合理化し、複数の CSS ファイルを最適化し、それらを 1 つのファイルにマージすることです。この方法により、Web サイトの読み込み速度が大幅に向上します。さらに、CSS Optimizer、Clean CSS など、CSS ファイルの最適化に使用できるツールが多数あります。

CSSに関しては、知っておきたい優れたCSSフレームワーク10選も紹介しており、CSSフレームワークの種類や関連した使い方について知ることができます。

4. JS ファイルを最適化し、ページの下部に配置します

CSS と同様に、複数の JS ファイルをページに追加することも一般的です。ただし、これにより Web サイトの応答速度も低下します。このため、開発者はこれらの JS ファイルを合理化して最適化する必要があります。

ただし、CSS とは異なる点が 1 つあります。ブラウザは通常、並列読み込みをサポートしていません。これは、ブラウザが JS ファイルを読み込むときに、他のコンテンツを同時に読み込まなくなることを意味します。これにより、Web ページの読み込み速度が遅くなったように見えます。

良い解決策は、JS ファイルの読み込み順序を最後に置くことです。この目標を達成するには、開発者は JS コードを HTML ドキュメントの下部に配置できます。適切な場所は タグの近くです。

5. title 要素を上手に活用する

span から h6 要素は、ページの重要なコンテンツを強調するために使用されます。これにより、ユーザーはページの重要な部分にさらに集中できるようになります。ブログの場合、私 (この記事の著者を参照) は、span タグを使用してブログのタイトルを強調表示することをお勧めします。なぜなら、ブログのタイトルはページのほぼ重要な部分だからです。

6. 適切な場所で適切な HTML タグを使用する

HTML タグは、標準化されたコンテンツ構造を構築するための鍵です。たとえば、 タグは重要なコンテンツを強調するために使用されます。

タグは、記事の段落を強調表示するのに適しています。段落間に空白行を追加する場合は、
タグを使用しないでください。

7. div タグの乱用を避ける

すべてのブロック要素を

タグを使用して作成する必要はありません。たとえば、inline 要素の属性に display:block を追加して、ブロック要素として表示できます。

8. 属性値を均一に引用符で囲む

HTML5 の一部の属性は引用符で囲むことができませんが、標準化のために各属性に引用符が追加されます。

9. 長すぎるコード行は避けてください

ページのサイズには制限があります。コードが長すぎるとスクロール バーが追加され、読みにくくなります。コードの。

10. img タグに alt を追加します

image 属性に alt を追加すると、画像が表示できない場合に、alt の内容で画像の隙間を埋めることができます。 alt は SEO の最適化にも役立ちます。

11. 空白行とインデント

私たちが Java を学習していたとき、先生はコードの読みやすさを高めるためにコードにコメント、空白行、インデントを追加するように教えてくれました。

12. タグを閉じる

html のほとんどのタグはペアで出現するため、一部のタグが閉じられていないと文書の配置が崩れるなどの問題が発生します。一部のタグで単一タグを使用できる場合でも、p などの閉じたタグに統一することが最善です。また、meta と同様に、<meta charset="utf-8"/> の形式で記述するのが最善です。

関連する推奨事項:「html ビデオ チュートリアル

以上がhtml5 はどのようなルールに従う必要がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。