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

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

Jan 23, 2022 pm 02:39 PM
html5

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 までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

HTMLの表の境界線 HTMLの表の境界線 Sep 04, 2024 pm 04:49 PM

HTML の表の境界線に関するガイド。ここでは、HTML でのテーブルの境界線の例を示しながら、テーブル境界線を定義する複数の方法について説明します。

HTML 左マージン HTML 左マージン Sep 04, 2024 pm 04:48 PM

HTML マージン左のガイド。ここでは、HTML margin-left の概要とその例、およびそのコード実装について説明します。

HTML のネストされたテーブル HTML のネストされたテーブル Sep 04, 2024 pm 04:49 PM

これは、HTML でのネストされたテーブルのガイドです。ここでは、テーブル内にテーブルを作成する方法をそれぞれの例とともに説明します。

HTML テーブルのレイアウト HTML テーブルのレイアウト Sep 04, 2024 pm 04:54 PM

HTML テーブル レイアウトのガイド。ここでは、HTML テーブル レイアウトの値と例および出力について詳しく説明します。

HTML入力プレースホルダー HTML入力プレースホルダー Sep 04, 2024 pm 04:54 PM

HTML 入力プレースホルダーのガイド。ここでは、コードと出力とともに HTML 入力プレースホルダーの例について説明します。

HTML 順序付きリスト HTML 順序付きリスト Sep 04, 2024 pm 04:43 PM

HTML 順序付きリストのガイド。ここでは、HTML 順序付きリストと型の導入とその例についても説明します。

HTML 内のテキストの移動 HTML 内のテキストの移動 Sep 04, 2024 pm 04:45 PM

HTML でのテキストの移動に関するガイド。ここでは、概要、マーキー タグが構文でどのように機能するか、および実装例について説明します。

HTML の onclick ボタン HTML の onclick ボタン Sep 04, 2024 pm 04:49 PM

HTML オンクリック ボタンのガイド。ここでは、それらの紹介、動作、例、およびさまざまなイベントでの onclick イベントについてそれぞれ説明します。

See all articles