Webフロントエンドの3層構造とは何ですか?

Web フロントエンドの 3 層構造は次のとおりです: 1. HTML や XHTML などのマークアップ言語によって作成される構造層。顧客は読んだり見たりしたいので、テキストや画像、ハイパーリンク、マルチメディア (ビデオ、オーディオなど) を含めることができます。 2. CSS によって作成されたプレゼンテーション層には、Web ブラウザで Web ドキュメントを表示する方法に関するスタイル指示が含まれています。 3. 行動層。「コンテンツがイベントにどのように反応すべきか」という質問に答え、Web サイトをインタラクティブにし、ページがユーザーのアクションに反応したり、一連の条件に基づいて変化したりできるようにします。

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

Web フロントエンドとは、ユーザーに表示される Web ページ、つまり Web サイトのフロントエンド部分です。

Web フロントエンド開発の考え方は、Web ページを構造層、プレゼンテーション (スタイル) 層、動作層の 3 つのレベルに分割することです。

• 構造層は、HTML や XHTML などのマークアップ言語によって作成されます。タグ (山括弧内に表示される単語) は Web コンテンツの意味論的な意味を説明しますが、これらのタグにはコンテンツの表示方法に関する情報は含まれません。たとえば、P タグは、「これはテキスト段落です。」というセマンティクスを表現します。

• プレゼンテーション層 (プレゼンテーション層) は CSS によって作成されます。 CSS は、関連するコンテンツをどのように表示するかという質問に答えます。

• 動作層 (動作層) は、「コンテンツがイベントにどのように反応するか」という質問に答える責任があります。これは、JavaScript 言語と DOM が支配する領域です。

Web ページのプレゼンテーション層と動作層は、明示的に具体的な指示を与えなくても、常に存在します。この時点で、Web ブラウザはデフォルトのスタイルとデフォルトのイベント ハンドラーを Web ページの構造層に適用します。たとえば、ブラウザは「テキスト セグメント」要素をレンダリングするときにページの余白を残し、一部のブラウザでは、ユーザーが要素の上にマウス ポインタを置くと、要素の title 属性の値を示すプロンプト ボックスがポップアップ表示されます。など。

HTML: 構造レイヤー

Web ページの構造レイヤーまたはコンテンツ レイヤーは、ページの基礎となる HTML コードです。家の骨組みが家の残りの部分の強固な基盤を構築するのと同じように、HTML の強固な基盤は Web サイトを作成できるプラットフォームを作成します。

構造レイヤーは、顧客が読みたい、または表示したいすべてのコンテンツを保存するために使用されます。 HTML 構造にはテキストと画像を含めることができ、訪問者が Web サイト内を移動するために使用するハイパーリンクも含まれます。これは標準に準拠した HTML5 でエンコードされており、テキスト、画像、マルチメディア (ビデオ、オーディオなど) を含めることができます。

CSS: スタイル レイヤー

このレイヤーは、構造化 HTML ドキュメントが Web サイトの訪問者にどのように見えるかを指示し、CSS (カスケード スタイル) で表されます。シート) の定義。これらのファイルには、Web ブラウザでドキュメントを表示する方法に関するスタイル指示が含まれています。通常、スタイル レイヤーには、画面サイズとデバイスに基づいてサイトの表示を変更するメディア クエリが含まれています。

Web サイトのすべてのビジュアル スタイルは、外部スタイル シートに含める必要があります。複数のスタイルシートを使用できますが、各 CSS ファイルを取得するには HTTP リクエストが必要であり、サイトのパフォーマンスに影響することに注意してください。

JavaScript: 動作レイヤー

動作レイヤーは Web サイトをインタラクティブにし、ページがユーザーのアクションに応答したり、一連の内容に基づいて変更したりできるようにします。条件。動作層で最も一般的に使用される言語は JavaScript ですが、CGI や PHP も頻繁に使用されます。

開発者が動作レイヤーに言及するとき、ほとんどは Web ブラウザーで直接アクティブ化されるレイヤーを指します。このレイヤーを使用して、DOM (ドキュメント オブジェクト モデル) と直接対話できます。コンテンツ層に有効な HTML を記述することは、動作層での DOM インタラクションにとって非常に重要です。動作レイヤーを構築するときは、速度とパフォーマンスを最適化するために、CSS と同様に外部スクリプト ファイルを使用する必要があります。

知識の拡大: レイヤリングのメリット

1. 共有リソース:

いつ外部 CSS または JavaScript ファイルを作成すると、そのファイルはサイト上のどのページでも使用できます。このファイルに変更を加える必要がある場合 (サイト上の一部のタイポグラフィ スタイルを更新する場合など)、このスタイル シートを使用するすべてのページに変更が適用されます。大規模な Web サイトでは骨の折れる作業となる、Web サイトの各ページを個別に編集する必要はありません。

2. ダウンロード速度の高速化:

顧客が初めてスクリプトまたはスタイル シートをダウンロードした後、Web ブラウザーはそれをキャッシュします。これらの共有リソースがブラウザのキャッシュに含まれるようになったため、ブラウザでリクエストされた他のページの読み込みが速くなり、ページ全体の速度とパフォーマンスが向上します。

3. 複数人チーム:

複数の人が同時に Web サイトで作業している場合は、ファイルをチェックできるシステムを使用できます。全員が最新バージョンを使用していることを確認するために徹底的に取り組んでいます。スタイルや動作が構造ドキュメントと絡み合っている場合、さらに困難になります。

4. 検索エンジンの最適化:

スタイルと構造を明確に分離した Web サイトは、検索エンジンでのパフォーマンスが向上する可能性があります。検索エンジンは、視覚的なスタイルや行動情報に囚われることなく、より効果的にコンテンツをクロールし、ページを理解できるからです。

5. アクセシビリティ:

外部スタイル シートとスクリプト ファイルは、人々やブラウザにとってよりアクセスしやすくなっています。スクリーン リーダーなどのソフトウェアは、いずれにせよ使用できないスタイルを扱うことなく、構造レイヤー内のコンテンツをより簡単に操作できるようになります。

6. 下位互換性:

別の開発レイヤーで設計されたサイトは、特定の CSS スタイルが使用できないか、ブラウザの JavaScript が無効になっているため、下位互換性がある可能性が高くなります。デバイスは引き続き HTML を表示できます。その後、Web サイトをサポートするブラウザーの機能を使用して、Web サイトを徐々に強化できます。

(学習ビデオ共有: Web フロントエンドの入門 )

以上がWebフロントエンドの3層構造とは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。