Web フロントエンドは単なるプレゼンテーション層ですか?-フロントエンドQ&A-php.cn

Web フロントエンドは単なるプレゼンテーション層ですか?

青灯夜游

リリース： 2023-02-02 10:01:45

オリジナル

2150 人が閲覧しました

＃＃＃＃＃＃いいえ。 Web フロントエンドは 3 つの層に分けることができます。 1. 構造層。HTML や XHTML などのマークアップ言語によって作成され、顧客が読みたい、または表示したいすべてのコンテンツを保存するために使用されます。テキスト、画像、ハイパーリンク、マルチメディアを含めることができます。 2. CSS によって作成されたプレゼンテーション層には、Web ブラウザで Web ドキュメントを表示する方法に関するスタイル指示が含まれています。 3. 動作層は Web ページの動作であり、JS 言語で作成され、Web ページ内のコンテンツをリアルタイムで更新することができ、Web サイトをインタラクティブにし、ユーザーの操作や変更に基づいてページが応答できるようにします。一連の条件。

Web フロントエンドは単なるプレゼンテーション層ですか? このチュートリアルの動作環境: Windows 7 システム、Dell G3 コンピューター。

W3C とは、1994 年 10 月に設立された World Wide Web Consortium (World Wide Web Consortium) を指します。 W3C の登場は、Web 開発の標準をカスタマイズして、同じ Web ページが異なるブラウザで同じ効果を発揮できるようにすることを目的としているため、カスタムで作成された Web ページは W3C 仕様に従う必要があります。

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

HTML: 構造レイヤー

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

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

CSS: スタイルレイヤー

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

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

JavaScript: 動作レイヤー

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

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

簡単に言うと、JavaScript、HTML、CSS が一緒になって私たちが見る Web ページを構成します。

#CSS は、色、フォント、背景など、Web ページの外観を制御するために使用されます。
JavaScript は、サーバーからデータを取得して Web ページに更新したり、一部のタグやタグのスタイルを変更したりするなど、Web ページ内のコンテンツをリアルタイムに更新するために使用されます。そのコンテンツなどを追加して、Web ページをより鮮やかにします。
HTML は、ハイパーテキストマークアップ言語 (HyperText Markup Language) で、Web ページの作成に使用される標準のマークアップ言語です。 HTML は Web ページの 3 つのコンポーネントの構造を担当し、タグを使用して Web ページのさまざまなコンポーネントを識別します。いわゆるハイパーテキストは、あるページから別のページにジャンプできるハイパーリンクを指します。

CSS は Cascading Style Sheets を指します。スタイルは HTML 要素の表示方法を定義し、Web ページの外観を制御するために使用されます。 CSS は Web ページの 3 つのコンポーネントのパフォーマンスを担当し、スタイルは通常、外部の .css ファイルに保存されます。単純な CSS ドキュメントを編集するだけで、すべてのページのレイアウトと外観を変更できます。

JavaScript はスクリプト言語 (略して「JS」) であり、Web ページの動作を制御するために使用される軽量プログラミング言語です。 JavaScript は、Web ページの 3 つのコンポーネントの動作を担当します。JavaScript は HTML ページのプログラミングコードに挿入できます。JavaScript を HTML ページに挿入すると、最新のすべてのブラウザで実行できます。

拡張知識: 階層化の利点

1. 共有リソース:

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

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

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

3. 複数人チーム:

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

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

スタイルと構造が明確に分離されている Web サイトは、コンテンツをクロールしてページをより効率的に理解できるため、検索エンジンでのパフォーマンスが向上する可能性があります。ビジュアルスタイルや行動上のメッセージに行き詰まる必要はありません。

5. アクセシビリティ:

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

6. 下位互換性:

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

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

以上がWeb フロントエンドは単なるプレゼンテーション層ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。