1.HTML構文仕様
1.1 基本的な構文の概要
- HTML タグは、山括弧で囲まれたキーワードです (例: )
<html>。 - HTML タグは通常、
<html>となどのペアで表示され<html>、これを二重タグと呼びます。タグ ペアの最初のタグは開始タグ、2 番目のタグは終了タグです。 - 一部の特別なタグは単一タグである必要があります (まれなケース)。たとえば
<br/>、それらを単一タグと呼びます。
1.2 ラベル関係
- 包含関係
<head>
<title></title>
</head>
- 星座
<head></head>
<title></title>
2.HTMLの基本構造タグ
2.1 最初の HTML Web ページ
すべての Web ページには基本構造タグ (スケルトン タグとも呼ばれます) があり、ページのコンテンツもこれらの基本タグに書き込まれます。
HTML ページは HTML ドキュメントとも呼ばれます。
<html>
<head>
<title>我的第一个页面</title>
</head>
<body>
键盘敲烂，月薪过万
</body>
</html>
| タグ名 | 意味 | 説明する |
|---|---|---|
<html></html> |
HTMLタグ | ページ上の最大のタグ。ルートタグと呼ばれます。 |
<head></head> |
ドキュメントヘッダー | headタグ内に必ず設定するタグはtitleです |
<title></title> |
文書のタイトル | ページに独自のタイトルを付ける |
<body</body> |
文書の本文 | ページの内容は基本的に本文に配置されます。 |
3. 開発ツール
3.1VScodeの使用方法
- ダブルクリックしてソフトウェアを開きます。
- 新しいファイルを作成します (Ctrl + N)。
- 保存 (Ctrl + S)。移動は .html ファイルとして保存する必要があることに注意してください。
- Ctrl + プラス記号キー、Ctrl + マイナス記号キーでビューを拡大および縮小できます。
- ページのスケルトン構造を生成します。
Enter! Tab キーを押してください。 - プラグインを使用してブラウザでページをプレビューします。マウスを右クリックし、ポップアップ ウィンドウで [デフォルトのブラウザで開く] をクリックします。
3.2 文書型宣言タグ
ドキュメント タイプ宣言の機能は、Web ページを表示するためにどの HTML バージョンを使用するかをブラウザに伝えることです。<!DOCTYPE html>
このコードの意味は次のとおりです: 現在のページは HTML5 バージョンを使用して Web ページを表示します
。
<!DOCTYPE>宣言はドキュメント内のタグの前に最初に配置されます。<!DOCTYPE>これは HTML タグではなく、文書型宣言タグです。
3.3 lang言語の種類
- 定義言語は英語です
- zh-CN は言語を中国語として定義します
簡単に言うと、en と定義された Web ページは英語の Web ページ、zh-CN と定義された Web ページは中国語の Web ページになります。実際、ドキュメントの表示では、en と定義されたドキュメントは中国語も表示でき、ドキュメントも表示できます
。 zh-CN として定義されている場合は、英語も表示できます。この
属性はブラウザや検索エンジン (Baidu、Google など) に適しています。
3.4文字セット
文字セット（Character set）とは、複数の文字の集合です。コンピュータがさまざまなテキストを認識して保存できるようにします。<head>タグ内では、<meta>タグの charset 属性を使用して、HTML ドキュメントで使用する文字エンコーディングを指定できます。
<meta charset=" UTF-8" />
一般的に使用される文字セットの値は、GB2312、BIG5、GBK、UTF-8 です。UTF-8ユニバーサルコードとしても知られており、基本的には世界中のすべての国が使用する必要がある文字が含まれています。
注: 上記の構文は必ず記述しなければならないコードです。そうしないと、コードが文字化けする可能性があります。通常は、「UTF-8」エンコーディングを一律に使用し、「utf8」や「UTF8」ではなく、標準の「UTF-8」として記述するようにしてください。
4.HTML共通タグ
4.1 タグのセマンティクス
ラベルを学習するのは難しいですが、重要なのはそれぞれを覚えることですタグのセマンティクス。簡単に理解すると、ラベルの意味、つまりラベルが何に使用されるかがわかります。
タグのセマンティクスに従って、適切な場所に最も合理的なタグを付けることで、ページ構造をより明確にすることができます。
4.2 タイトルタグ<h1> - <h6>（重要）
Web ページをよりセマンティックにするために、ページ内でタイトル タグを使用することがよくあります。HTML は Web ページのタイトルを 6 つのレベルで提供します。<h1> - <h6>
<h1> 我是一级标题 </h1>
head という言葉の略語は、頭と肩書きを意味します。
タグのセマンティクス: 重要度の高い順にタイトルとして使用されます。
特徴：
- タイトルの文字が太くなり、文字サイズも順次大きくなります。
- 独立した行にタイトルが表示されます。
コード：
<h1>标题一共六级选,</h1>
<h2>文字加粗一行显。</h2>
<h3>由大到小依次减，</h3>
<h4>从重到轻随之变。</h4>
<h5>语法规范书写后，</h5>
<h6>具体效果刷新见。</h6>
効果：
タイトル選択は6段階あり、
テキストは太字で 1 行に表示されます。
大きいものから小さいものへと順番に減少し、
重いものから軽いものに変わります。
文法仕様が書かれた後、
特定の効果については、「更新」を参照してください。
4.3 段落タグと改行タグ (重要)
Web ページでテキストを整然と表示したい場合は、テキストをセグメントに分けて表示する必要があります。HTML タグでは、< p >タグを使用して段落を定義し、Web ページ全体を複数の段落に分割できます。
段落を意味する単語「paragraph [ˈpærəgræf]」の略語。
タグのセマンティクス: HTML ドキュメントは複数の段落に分割できます。
特徴:
- 段落内のテキストは、ブラウザ ウィンドウのサイズに基づいて自動的に折り返されます。
- 段落間に隙間をあけます。
4.4 テキスト書式タグ
Web ページでは、テキストに太字、斜体、または下線の効果を設定する必要がある場合があります。この場合、HTML でテキスト書式設定タグを使用して、テキストを特別な方法で表示する必要があります
。
タグのセマンティクス: 重要性を強調します。通常のテキストよりも重要です。
| セマンティクス | ラベル | 説明する |
|---|---|---|
| 大胆な | <strong></strong>または<b></b> |
<strong>セマンティクスがより強力なので、 を使用することをお勧めします。 |
| 傾ける | <em></em>または<i></i> |
より推奨され<em>、セマンティクスがより強力になります |
| 取り消し線 | <del></de>または<s></s> |
より推奨され<del>、セマンティクスがより強力になります |
| 下線 | <ins></ins>または<u></u> |
より推奨され<ins>、セマンティクスがより強力になります |
太字と斜体を忘れないでください。
4.5<div>と<span>タグ
<div>セマンティクスはなく<span>、コンテンツを保持するために使用される単なるボックスです。
<div> 这是头部 </div>
<span> 今日价格 </span>
div は Division の略で、分割、分割を意味します。スパンとはスパン、スパンという意味です。
特徴：
<div>タグはレイアウトに使用されますが、現在は 1 行に 1 つしか配置できません<div>。大きな箱<span>タグはレイアウトに使用され、1 行に複数存在できます<span>。ちいさな箱
4.6 画像タグとパス（要点）
4.6.1 画像タグ
HTML タグでは、<img>タグは HTML ページ内の画像を定義するために使用されます。
<img src="图像URL" />
imageという言葉の略語で、イメージを意味します。
src は<img>タグの必須属性であり、画像ファイルのパスとファイル名を指定するために使用されます。
いわゆる属性: このイメージ タグの特徴を簡単に理解します。
イメージタグの追加プロパティ:
| 属性 | 属性値 | 説明する |
|---|---|---|
| 送信元 | 画像パス | 必須の属性 |
| 代替 | 文章 | 置換テキスト。画像にテキストを表示できません |
| タイトル | 文章 | リマインダーテキスト。画像上にマウスを置くと文字が表示されます |
| 幅 | ピクセル | 画像の幅を設定する |
| 身長 | ピクセル | 画像の高さを設定する |
| 国境 | ピクセル | 画像の枠線の太さを設定します |
イメージタグの属性に関する注意事項:
① イメージタグは複数の属性を持つことができ、タグ名の後に記述する必要があります。
② 属性の順序は順不同で、タグ名と属性、属性と属性はスペースで区切られます。③ 属性は、キーと値のペアの形式、つまり、key="value" およびattribute="属性値" の形式になります。
4.6.2 パス（予備知識）
- ディレクトリフォルダーとルートディレクトリ
- 実際の作業では、ファイルをランダムに配置することはできず、すぐに見つけるのが困難になるため、ファイルを管理するためのフォルダーが必要です。
- ディレクトリフォルダー: これは通常のフォルダーで、HTML ファイルや画像など、ページの作成に必要な関連素材のみが保存されます。
- ルート ディレクトリ: ディレクトリ フォルダの最初のレベルはルート ディレクトリです。
- VSCode ディレクトリ フォルダ
ファイルを開く ----フォルダを開く ディレクトリ フォルダを選択すると、後でファイルを管理するのに非常に便利です。
ページにはたくさんの写真が表示されます。通常、これらの画像ファイル (画像) を保存するために新しいフォルダーを作成します。画像を検索する場合は、「パス」メソッドを使用して画像ファイルの場所を指定する必要があります。
パスは次のように分割できます。
- 相対パス
相対パス: で始まる参照ファイルの場所参照ベースとして確立されたディレクトリ パス。
簡単に言うと、HTML ページに対する画像の相対的な位置です。
| 相対パスの分類 | シンボル | 説明する |
|---|---|---|
| 同レベルパス | 画像ファイルは HTML ファイルと同じレベルにあります。たとえば、<img src="baidu.gif" /> |
|
| 次のレベルのパス | / | 画像ファイルは HTML ファイルの 1 レベル下にあります<img src="images/baidu.gif" />。 |
| 前のレベルのパス | …/ | 画像ファイルは HTML ファイルの上にあります<img src="../baidu.gif"/>。 |
相対パスは、コードが配置されているファイルから始まり、目的のファイルを見つけるための相対パスであり、ここで言う上位、下位、および同レベルは次のとおりです。
HTML ページに対する画像の相対的な位置。
- 絶対パス
絶対パス: を参照します。ディレクトリ下の絶対位置、ターゲットの場所に直接アクセスします。通常はドライブ文字から始まるパスです。
たとえば、「D:\web\img\logo.gif」または完全なネットワーク アドレス「http://www.itcast.cn/images/logo.gif」などです。
4.7 ハイパーリンクタグ（要点）
HTML タグでは、<a>タグは、あるページから別のページにリンクするハイパーリンクを定義するために使用されます。
4.7.1 リンク構文形式
<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>
単語アンカー [ˈæŋkə®] の略語で、意味: アンカー。
2 つの属性の機能は次のとおりです。
| 属性 | 効果 |
|---|---|
| href | リンク先の URL アドレスを指定するために使用します (必須属性) タグに href 属性を適用すると、ハイパーリンクの機能を持ちます。 |
| 目標 | リンクされたページを開く方法を指定するために使用されます。_self はデフォルト値、_blank は新しいウィンドウで開く方法です。 |
4.7.2 リンクの分類
- 外部リンク: < a href="http:// www.baidu.com "> Baidu など。
- 内部リンク: Web サイトの内部ページ間の相互リンク。< a href="index.html"> ホーム ページなど、内部ページ名を直接リンクするだけです。
- 空のリンク: その時点でリンク先が決まっていない場合は、< a href="#"> ホーム ページ。
- ダウンロード リンク: href 内のアドレスがファイルまたは圧縮パッケージの場合、ファイルがダウンロードされます。
- Web ページ要素のリンク: ハイパーリンクは、テキスト、画像、表、オーディオ、ビデオなど、Web ページ内のさまざまな Web ページ要素に追加できます。
- アンカー リンク: リンクをクリックすると、ページ上の特定の場所にすばやく移動できます。
- リンク テキストの href 属性で、属性値を #name の形式に設定します。たとえば、
<a href="#two">第2集</a> - ターゲットの場所のラベルを見つけて、次のように id 属性 = 先ほどの名前を追加します。
<h3 id="two">第2集介绍</h3>
- リンク テキストの href 属性で、属性値を #name の形式に設定します。たとえば、
5. HTML 内のコメントと特殊文字
5.1 注意事項
読みやすく理解しやすいが、ページ上に表示する必要はないコメント テキストを HTML ドキュメントに追加する必要がある場合は、コメント タグを使用する必要があります。
HTML 内のコメントは“<!--”开头，以“ -->「.」で終わります。
<!-- 注释语句 --> 快捷键: ctrl + /
一言で言えば: コメント タグの内容はプログラマが見るためのものです。このコードは実行されず、ページ上に表示されません。
コメントは、コードの機能をより適切に説明し、関連する開発者がコードを理解して読みやすくするために追加されます。コメント内容のプログラムは実行されません。
5.2 特殊文字
HTML ページでは、一部の特殊記号は直接使用するのが困難または不便ですが、現時点では代わりに次の文字を使用できます。
覚えておくべき重要なポイント: スペース、大なり記号、小なり記号、残りはめったに使用されません。必要に応じて参照してください。