HTML のタグはキーワードのようなものです。たとえば、<p> タグは段落を表し、<b> タグは太字を表します。タグに応じて、ブラウザはタグ内のコンテンツをさまざまな方法で表示します。
実際の開発では、HTML タグのことを HTML 要素と呼ぶこともあります。
財産
↓
<div class=foo>C 言語ネットワーク</div>
↑ ↑ ↑
開始タグの内容 終了タグ
開始タグには、class 属性に加えて、id、title などの他の属性情報も含めることができます。これについては後で説明します。
注: HTML タグの構文では大文字と小文字が区別されませんが、標準化と専門性を高めるため、タグを定義する際には小文字を使用することを強くお勧めします。
(1) タグのセマンティクス
タグを学習するのは難しいので、各タグのセマンティクスを覚えることに重点を置きます。簡単に理解すると、ラベルの意味、つまりラベルが何に使用されるかがわかります。ラベルのセマンティクスによると。適切な場所に最も合理的なラベルを付けると、ページ構造がより明確になります。
(2) タイトルタグ h1～h6
Web ページをよりセマンティックにするために、ページ内でタイトル タグを使用することがよくあります。 HTML では、Web ページのタイトルを 6 レベル ( <h1> ～ <h6>)で提供します。
<h1>私は第 1 レベルのタグです</h1>
h は head の略で、ヘッドタイトルを意味します。
タグのセマンティクス: タイトルとして、重要度の降順で使用されます。
●特徴：
1. タイトルの文字が太くなり、文字サイズも順次大きくなります。
2. 1 つのタイトルが独自の行を占めます。
(3) 段落タグと改行タグ
Web ページ上のセクションにテキストを表示するには、段落スタイルを定義するために <p> タグを使用します。
<p>私は段落タグです</p>
p は段落を表します。つまり、 HTML は複数の段落に分割され、行はブラウザ ウィンドウのサイズに応じて自動的に折り返され、段落間に隙間が残ります。
HIML では、段落内のテキストはブラウザ ウィンドウの右端に達するまで左から右に配置され、その後自動的に折り返されます。テキストの特定のセクションを強制的に新しい行で折り返す場合は、改行タグ<br/> を使用する必要があります。
Break は、単一のラベル行間の間隔が狭い改行を強制します。
ニュース事例:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Compatibilitycontent=IE=edge><metaname=viewportcontent=width=device-width,initial-scale=1.0>< title>国際ニュース</title></head><body><h1>国際ニュース</h1><h4>ウクライナは同日朝、ロシアのリャザン州とサラトフ州の軍事空港を攻撃するためにドローンを派遣した</ h4><p>現地時間12月5日、ロシア国防省は声明を発表し、ウクライナは同日朝、ロシアのリャザンとサラトフ地域にある軍用空港を攻撃するため無人機を派遣したが、ロシアの防空システムに迎撃されたと発表した。この攻撃でロシア兵３人が死亡、４人が負傷した。 </p><p>さらに、軍事空港上空でのウクライナの無人機の墜落により、ロシアの戦闘機2機の機体が損傷した。数時間後、ウクライナはロシアが新たなミサイル攻撃を開始したと報告した。 </p><h4>ロシアがザポリージャ原子力発電所の管理を引き渡すことは不可能</h4><p>ロシア外務省のザハロワ報道官はスプートニク通信に対し、ロシアがザポリージェ原子力発電所の管理を引き渡すことは不可能だと語った。原子力発電所 熱原子力発電所の制御。 </p><h4>バイデンは戦略的石油備蓄の補充にロシア石油の利用を検討しないだろう</h4><p>ホワイトハウスは、価格上限に対するロシアの反応には驚かないと述べた。バイデン氏は戦略石油備蓄の補充にロシア石油を利用することを検討しないだろう。米国のエネルギー安全保障特使のホホシュタイン氏は、米国には緊急事態に対処するのに十分な戦略的石油備蓄（ＳＰＲ）がまだあると述べた。バイデン政権は12月8日に米石油業界幹部らとオンライン会議を開き、ウクライナのエネルギーインフラ支援策について協議する。米エネルギー長官は１４日に多数の石油会社幹部と会談する。 </p><p>C 言語ネットワーク<br/>2022-12-6</p></body></html>
次のように表示されます。
(4) テキスト整形タグ
Web ページでは、テキストに太字、斜体、または下線の効果を設定する必要がある場合があります。この場合、HTML でテキスト書式設定タグを使用する必要があります。テキストを特別な方法で表示します。
タグのセマンティクス: 重要性を強調することは、通常のテキストよりも重要です。
<strong>太字</strong><b>太字</b><em>斜体</em><i>斜体</i><del>取り消し線</del><s>取り消し線</ s><ins >下線</ins><u>下線</u>
以下に示します:
(5) divタグとspanタグ
<div>と<span>にはセマンティクスはありません。これらはコンテンツを保持するために使用される単なるボックスです。
分割 分割 パーティション スパン スパン スパン
●特徴：
<div> タグはレイアウトに使用されますが、1 行に配置できる <div> は 1 つだけです。大きなボックスは 1 行を占めます。
<span> タグはレイアウトに使用されます。1 行に複数の <span> を含めることができます。
(6) 画像タグとパス
1.画像タグ
HTML タグでは、<img> タグは HTML ページ内の画像を定義するために使用されます。
<img src=画像URL />
画像という言葉の略語。意味のあるイメージ。
src は、<img> タグの必須属性であり、画像ファイルのパスとファイル名を指定するために使用されます。
いわゆる属性: このイメージ タグの特徴を簡単に理解します。
<imgsrc=bg.pngalt=/>
イメージタグの追加プロパティ
イメージタグを使用する際の注意点
(1) 画像タグには複数の属性を含めることができ、タグ名の後に記述する必要があります。
(2) 属性にはタグ名と属性の順序はなく、属性間はスペースで区切られます。
(3) 属性はキーと値のペアの形式になります。つまり、キー = "値" 形式、属性 = 属性値"
2. パス
(1) ディレクトリフォルダとルートディレクトリ：
実際の作業では、ファイルをランダムに配置することはできず、すぐに見つけるのが困難になるため、ファイルを管理するためのフォルダーが必要です。
ディレクトリフォルダー: これは通常のフォルダーで、HTML ファイルや画像など、ページの作成に必要な関連素材のみが保存されます。
ルート ディレクトリ: 開いたディレクトリ フォルダの最初のレベルがルート ディレクトリです。
(2) VSCodeはディレクトリフォルダを開きます
ファイル - フォルダーを選択すると、後でファイルを管理するのに非常に便利です。または、直接ドラッグします。
ページ上には通常、これらの画像ファイル (画像) を保存するための新しいフォルダーを作成します。画像ファイルの場所を指定するには、「パス」メソッドを使用する必要があります。
パスは次のように分割できます。
(1) 相対パス。参照されるファイルの場所に基づいて確立されるディレクトリ パス。
(2) 絶対パスは、ターゲットの場所に直接到達するディレクトリ内の絶対位置を指します。通常はドライブ文字から始まるパスです。
(7) ハイパーリンクタグ
1. リンク構文形式
<ahref=ジャンプターゲット target=ターゲットウィンドウのポップアップメソッド>テキストまたは画像</a>
アンカーという言葉の略語: アンカー
2 つの属性は次のように機能します。
2. リンクの分類
(1) <a href=http://www.baidu.com>baidu<a> などの外部リンク。
(2) 内部リンク (Web サイトの内部ページ間の相互リンク) は、<a href=index.html>Homepage<a> などの内部ページ名に直接リンクできます。
(3) 空のリンク。リンク先が決まっていない場合は、<a href=#>ホームページ<a>。
(4) ダウンロードリンク。href 内のアドレスがファイルまたは圧縮パッケージの場合、ファイルがダウンロードされます。
(5) Web ページ要素のリンク Web ページ内のテキスト画像、表、音声、ビデオなどのさまざまな Web ページ要素にハイパーリンクを追加できます。