【超無敵の詳細ダークホースフロントエンドノート！インスタントアップデート~]
このメモは私が Synchronous Learning Dark Horse のフロントエンドで使用しているものであり、商用目的ではありません。
学習パス
- 基本的な概念（理解）
- Web ページについて知る
- トップ 5 のブラウザとレンダリング エンジン
- ウェブ標準
- HTML の初体験
- HTMLの認識
- HTMLのスケルトン構造
- 開発ツールの使用
- 文法仕様
- HTMLコメント
- HTMLタグの構成
- HTMLタグの関係
目的: Web ページの構成と 5 つの主要なブラウザを理解し、Web 標準の構成を明確にし、HTML スケルトンを使用して Web ページを構築します。
提示：以下是本篇文章正文内容，下面案例可供参考
1. 基本的な理解
1.1 Web ページについて知る
-
Web ページはどのような部分で構成されていますか?
• テキスト、画像、オーディオ、ビデオ、ハイパーリンク -
プログラマーが書いたコードを Web ページに変換するにはどのようなソフトウェアが使用されますか?
• ブラウザ
1.2 5 つの主要なブラウザとレンダリング エンジン
- ブラウザ: Web ページを表示および実行するためのプラットフォームであり、フロントエンド開発には不可欠なツールです。
- 上位 5 つのブラウザは何ですか?
• Internet Explorer
• Firefox
• Chrome
• Safari
• Opera - 同じ Web ページは、異なるブラウザーでもまったく同じように表示されますか?
• ブラウザごとにレンダリング エンジンが異なるため、解析効果も異なります。 - フロントエンド エンジニアが毎日使用することを推奨するブラウザはどれですか?
• クロム
1.3 ウェブ標準
| 構成する | 言語 | 説明する |
|---|---|---|
| 構造 | パフォーマンス | ページ要素とコンテンツ |
| パフォーマンス | CSS | Web ページ要素の外観や位置 (色、サイズなど) などのページ スタイル |
| 行動 | JavaScript | Web ページモデルとページインタラクションの定義 |
2.1 HTML の初めての経験
HTML (Hyper Text Markup Language)
中国語訳: Hyper Text Markup Language
Web エクスペリエンス - 基本的な Web ページを構築する手順
- コードフォルダー内で右クリック → 新しいテキストドキュメントを作成 → 「Text Thickening case.txt」という名前を付けます。
- このファイルをダブルクリックしてコードとその他の内容を入力 → 忘れずに保存してください。
- ファイルを右クリック→名前の変更→ファイルの拡張子を .html に変更します。
- テキストを太くした case.html をダブルクリックすると、ブラウザが自動的にファイルを開き、以前に入力した内容を表示します。
HTMLのスケルトン構造
HTMLのスケルトン構造はどのようなタグで構成されていますか?
- htmlタグ: Webページ全体
- head タグ: Web ページの先頭
- bodyタグ: Webページの本文
- title タグ: Web ページのタイトル
開発ツールの使用
- ダブルクリックして VS Code ソフトウェアを開きます
- day01 codeフォルダをマウスの左ボタンで押したまま VS Code ウィンドウにドラッグすると、左側のディレクトリにフォルダが表示されます。
- ディレクトリ上で **+新しいファイル ボタン** をクリックしてページを作成します。注:ファイルの拡張子は .html である必要があります。
VS Code の基本的なショートカット キー
- ラベルを素早く生成: 英語 + タブ
- ファイルを保存: Ctrl + s
- Web ページの効果をすばやく表示: 右クリック → デフォルトのブラウザで開く
• ショートカット キー: alt + b (プラグインがインストールされているブラウザで開きます) - 構造タグをすばやく生成: ! + tab/Enter
文法仕様
3.1HTMLコメント
- コメントのショートカット キー: ctrl + /
- コメントの役割:
- コードに追加される説明的な情報。主に開発者がコードを理解するのに役立ちます。
- ブラウザはコードの実行時にすべてのコメントを無視します。