1. 概念の説明
1. フロントエンドの構成要素は？
構造：HTML (Hyper Text Markup Language -- ハイパーテキストマークアップ言語)
ページの骨格とコンテンツを定義します
パフォーマンス：CSS
ページの外観や配置などのスタイル（色、サイズなど）を定義します
動作：JavaScript
Web ページの動作とインタラクションの定義。JS と略称します
2. 記述したコードの読み込み原理は？
コードはブラウザによってレンダリングされ、視覚化された Web ページとして読み込まれます。つまり、ブラウザがあれば HTML ファイルを実行できます。
3. コードを書くためのツールは？
vscode の使用をおすすめします。
4. HTML タグには主に何種類ありますか？
ダブルタグ：コードを囲むために使用するタグで、開始タグと終了タグのペアで構成されます。終了タグは開始タグの先頭に / を加えた形で、よく似ています。
シングルタグ：改行など、コードを囲む必要のない
水平線などに使用されるタグです。
5. HTML タグの関係性は？
1. 親子関係（ネスト関係）
例：

2. 兄弟関係（並列関係）

二、HTML テキストの説明
1. コメント ()
説明：他の人がコードを読みやすくするためのものです。ショートカットキー：Ctrl + /

2. 見出しタグ（h）
説明：テキストの中で最も重要な要素で、フォントサイズが最も大きく、太字で表示されます。h1 から h6 にかけて段階的に小さくなります。独立した行を占めます。

今日はいい天気ですね

3. 段落タグ（p）
説明：テキストの段落に必須のタグです。独立した行を占めます。

私は段落です

4. 改行タグ（br）
説明：改行したいテキストの後に追加すると、改行の効果を実現できます。

5. 水平線タグ（hr）
説明：水平線を追加したい位置の後に追加すると、水平区切り線を表示できます。

6. テキスト装飾タグ（太字、下線、斜体、取り消し線）
説明：2 つのタグで同じ装飾効果を実現できます。違いは、セマンティックな完全語タグ（strong, ins, em, del）は重要性を強調し、他のプログラマーがコードを読みやすくするためのものです。
太字
太字

下線
下線

斜体
斜体

~~取り消し線~~
~~取り消し線~~
7. メディアタグの画像タグ（img src=）
説明：src の値は画像の相対パスです。
alt の値はテキストで、画像を読み込めない場合に表示される代替テキストです。
title の値はテキストで、マウスを画像上に置いた時に表示されるテキストです。
width と height の値は画像の幅と高さです。片方だけ指定すると、もう片方は自動的にスケーリングされます。両方指定すると、画像が歪む可能性があります。
8. 相対パス
説明：相対パスは画像の場所と HTML ファイルの位置関係に応じて使い分けます。
現在のファイルと同じディレクトリにある場合：./picture.jpg
現在のファイルのサブディレクトリにある場合：サブディレクトリ名/picture.jpg
現在のファイルの親ディレクトリにある場合：../親ディレクトリ名/picture.jpg
9. メディアタグのオーディオタグ（audio src=）
説明：src：フォルダ内のオーディオファイルへのパスを直接指定します。controls：再生コントロールを表示します。autoplay：自動再生。loop：ループ再生。
10. メディアタグのビデオタグ（video src=）
説明：src：フォルダ内のビデオファイルへのパスを直接指定します。controls：再生コントロールを表示します。autoplay muted：自動ミュート再生。loop：ループ再生。
追記：この使い方はオーディオと同様です。自動ミュート再生は Google Chrome のみ対応しており、他のブラウザでは対応していない場合があります。
11. ハイパーリンクタグ（a href=）
現在のページで遷移する場合：
クリックしてください
現在のページを離れずに遷移する場合：
クリックしてください
説明：href の値は遷移先の Web サイトで、タグに挟まれたテキストはクリック対象のテキストです。クリックすると遷移します。
追記：href には URL またはローカルファイルパスを指定できます。

Front-end knowledge of HTML

今日はいい天気ですね