ホームページ  >  記事  >  ウェブフロントエンド  >  フロントエンドページはどの 3 つの層で構成されていますか?

フロントエンドページはどの 3 つの層で構成されていますか?

青灯夜游
青灯夜游オリジナル
2021-10-28 14:02:428824ブラウズ

フロントエンドページは「構造層」「プレゼンテーション層」「行動層」の3層で構成されています。構造層は、HTML によって作成され、ドキュメントの構造を構築するために使用されるページのスケルトンであり、プレゼンテーション層は、CSS によって作成され、ドキュメントのプレゼンテーション効果を設定するために使用されるページのスタイルです。 JavaScript によって作成されたページの動作であり、ドキュメントの動作を実装するために使用されます。

フロントエンドページはどの 3 つの層で構成されていますか?

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

フロントエンド ページの 3 つの層は、構造層、プレゼンテーション層、および動作層です。

  • 構造レイヤーは、HTML または XHTML マークアップ言語によって作成されるページのスケルトンであり、ドキュメントの構造を構築するために使用されます。

    HTML は、タイトル、テキスト、画像などの Web ページのコンテンツを定義するために使用されます。

  • プレゼンテーション層 はページのスタイルで、CSS (Cascading Style Sheets) によって作成され、ドキュメントのプレゼンテーション効果を設定するために使用されます。

    CSS は、色、フォント、背景など、Web ページの外観を制御するために使用されます。

  • 動作レイヤー はページの動作です。JavaScript 言語によって作成され、ドキュメントの動作を実装するために使用されます。

    JavaScript は、サーバーからデータを取得して Web ページに更新したり、一部のタグのスタイルやその内容を変更したりするなど、Web ページ内のコンテンツをリアルタイムに更新するために使用されます。これにより、Web ページがより鮮明になります。

ただし、これら 3 つのテクノロジーの間には重複する可能性のある領域がいくつかあります。たとえば、DOM テクノロジーを使用して Web ページの構造を変更できます。オーバーラップ手法の例は CSS にもあります。 :hover や :focus などの事前定義されたシンボル (疑似クラス属性) を使用すると、ユーザーがトリガーしたイベントに基づいてレンダリングを変更できます。要素のプレゼンテーションの変更は、もちろんプレゼンテーション層の「影響範囲」ですが、ユーザーがトリガーしたイベントへの反応は動作層の領域です。このプレゼンテーション層と動作層の重なりにより、灰色の領域が作成されます。

プログラミング関連の知識について詳しくは、プログラミング学習をご覧ください。 !

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

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