フロントエンドの 3 つの基盤とは何ですか?-フロントエンドQ&A-php.cn

フロントエンドの 3 つの基盤とは何ですか?

青灯夜游

リリース： 2021-11-01 15:50:26

オリジナル

4099 人が閲覧しました

3 つのフロントエンド基盤とは、1. Web ページを構築するための言語であるハイパーテキストマークアップ言語 HTML、2. スタイルを定義するための構造言語であるカスケードスタイルシート CSS、3. 埋め込みスクリプト言語 Javascript は、ユーザーと Web ページ間のリアルタイムで動的な対話型関係を実現するために使用される、解釈されたスクリプト言語です。

フロントエンドの 3 つの基盤とは何ですか?

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

現在、フロントエンドの人気は開発者の想像を超えており、明らかに単なるページの開発にすぎず、市場で言われているほど人気はありません。実際には、山のように線が区切られており、ドアの外に立っていると、ドアの中の実際の状況が理解できないことがよくあります。

フロントエンドがますます重要になってきているのは、実はユーザーエクスペリエンスが非常に高いレベルに引き上げられているからです。これはギャングリーダーチャオのおかげです。彼がいなかったら、私たちはまだ世界の中にいたかもしれません。 Symbianの世界、移動困難。

ユーザーと直接対話するフロントエンド分野は驚くほどの高みに達していますが、それでもフロントエンドの根幹であるコア技術は変わっていません。

日々のフロントエンド開発を構成する言語は、依然として HTML、CSS、JavaScript です。

1. HTML-ハイパーテキストマークアップ言語

HTML (ハイパーテキストマークアップ言語): Web ページを構築するための言語です。タグコマンド (Tag) を使用して、画像、音声、写真、テキストなどのコンテンツを表示します。独自の言語ルールを規定しており、「テキスト」よりも豊かな意味を表現するために使用されます。

HTML5: 2014 年に策定、リリースされた HTML の最新標準。 HTML5 では、ビデオ、オーディオ、canvas/webgl、その他の機能をサポートするために、いくつかの新しいセマンティックタグが追加されています。

HTML 基本タグ: head、body、html、title (h1-h7)、paragraph (p)、link (a)、image (image)、table (table)、list (ul、ol)、等。

HTML ドキュメントの基本構造:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello</title>
</head>
<body>
<p>Hello</p>
<a href="http://www.baidu.com"></a>
</body>
</html>

ログイン後にコピー

2. CSS カスケードスタイルシート

以前からありましたが、長年にわたって開発されてきましたが、この言語にはまだ発言権がほとんどありません。実際、この言語は肥大化した HTML タグ (タブ要素) の問題を解決するために作成されたものであり、言語設計は非常に優れています。 CSS の核心はドキュメントフローの定義とセレクターです。HTML ドキュメントを再定義することでドキュメントフローの概念が導入され、元の肥大化したタグを使用して柔軟なセレクターを通じてページコンテンツのスタイルを変更できます。注目する必要があるのは、ドキュメントフローの定義、要素ボックスモデル、およびドキュメントフローの破棄と変更です。

CSS (カスケードスタイルシート): カスケードスタイルシート。フォント、色、位置などのスタイルを定義する構造言語で、Web ページ上の情報の書式設定と表示方法を記述します。

CSS3: CSS の最新標準。 CSS3 では、アニメーションやセレクターなどの新機能が追加されています。 CSS3 の進化における大きな変化は、CSS3 を一連のモジュールに分割するという W3C の決定です。これには主に、ボックスモデル、リストモジュール、ハイパーリンクモード、言語モジュール、背景と境界線、テキスト効果、複数列レイアウトなどのモジュールが含まれています。いくつかの小さなモジュールに分割すると、仕様のタイムリーな更新とリリースが容易になり、メーカーは CSS3 の推進を促進するために、一部の CSS3 モジュール機能をサポートすることも選択できます。

HTML 内の CSS の記述位置:

1)、行で記述 (非推奨)

<h1 style="color:red">haha</h1>

ログイン後にコピー

2)、htmI で記述スタイルタグ (非推奨)

<style>
h1{
color:red
}
</style>

ログイン後にコピー

3)、リンクメソッド (推奨)

<link rel="stylesheet" type="text/css" href="style.css">

ログイン後にコピー

3、JavaScript 埋め込みスクリプト言語

当初、JavaScript はブラウザ内で実行されるため、埋め込みスクリプトと呼ばれることもありましたが、それでも Javascript が強力なプログラミング言語になることに影響はありませんでした。この言語は主にユーザーの行動の応答問題を実装するため、ユーザーの行動イベントに基づいてさまざまな操作結果に応答します。すべてのユーザーエクスペリエンスには Javascript の実装が必要であるため、この言語がフロントエンドの焦点となります。言語はますます完全になり、徐々に静的な方向に移行しています。

1)、ライブラリ

ライブラリは、ファイルアップロードクラスと呼ばれるファイルアップロードシナリオのカプセル化実装など、特定の関数のカプセル化実装です。図書館。これは一例であり、これに限定されるものではない。

2), フレームワーク

フレームワークは、より多くの問題を解決するためにカプセル化された実装です。たとえば、jQuery フレームワークは、PC 上で Javascript の API 互換性を実装するフレームワークです。サイド ( Zepto (モバイル端末用) の MVVM フレームワークは、インターフェイスのカプセル化された実装を迅速に構築するように設計されています。DOM 操作をカプセル化することで、手動の DOM 操作を減らし、データ構造とビジネスロジックの実装に重点を置きます。

プログラミング関連の知識について詳しくは、プログラミングビデオをご覧ください。！

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