HTML5の基本構文とタグ

1. HTML5 の概要

HTML5とは何ですか?

HTML5 は、Web ページの構造を記述し、コンテンツを表示するために使用される、ハイパーテキストマークアップ言語 (HTML) の 5 番目のメジャーバージョンです。これは、HTML の最新かつ最も強力なバージョンです。

HTML5 の構文規則

1. タグは HTML 文法の基本単位であり、山かっこ <> で囲まれます。通常、各タグには開始タグ (開始タグ) と終了タグ (終了タグ) があり、両方の前にスラッシュが付きます。 / 分離。
2. HTML ドキュメントは、ドキュメントタイプが HTML5 であることを示す宣言で始まる必要があります。
3. レイアウトと構造には適切なタグを使用する必要があります。たとえば、タグは HTML ドキュメントのルート要素を定義するために使用され、タグは Web ページのヘッダー情報を含めるために使用され、タグは Web ページのヘッダー情報を含めるために使用されます。ページのメインコンテンツ。
4. 特別な場合を除いて、タグは通常、タグ間の階層を示すために入れ子状に使用されます。

HTML5インフラストラクチャ

<!DOCTYPE html>ドキュメントタイプ (ドキュメントタイプ宣言、略して DTD): DTD は、HTML バージョンと DTD 仕様を指定する HTML ドキュメントの先頭にあるステートメントです。これは、ドキュメントで使用されているマークアップ言語をブラウザーと検証ツールに示し、ブラウザーが Web ページを正しく解析してレンダリングできるようにします。

<html>タグ:<html>タグは HTML ドキュメントのルート要素であり、ドキュメントのコンテンツ全体を囲みます。これは、他のすべての HTML 要素の親要素です。通常、HTML ドキュメントは<html>タグで始まり、</html>タグで終わる必要があります。

<head>タグ:<head>タグは HTML ドキュメントの先頭部分であり、メタデータやその他の重要な構成情報を含めるために使用され、ページ上でユーザーに直接表示されることはありません。一般的な<head>ラベルの内容には次のようなものがあります。

<meta charset="UTF-8">: 中国語の文字と特殊文字がページに正常に表示されるように、文字エンコードを UTF-8 に設定します。

<title>: ブラウザのタイトルバーまたはタブページに表示される Web ページのタイトルを定義します。

外部 CSS ファイルと JavaScript ファイルをリンクする:<link>タグを使用して外部スタイルシート (CSS ファイル) をインポートしたり、<script>タグを使用して外部 JavaScript ファイルをインポートしたりできます。

<meta name="description" content="网页描述">やなどの他のメタ情報は、<meta name="keywords" content="关键词1, 关键词2">検索エンジン最適化 (SEO) に使用されます。

<body>ラベル:<body>ラベルは HTML ドキュメントのメインコンテンツ領域であり、テキスト、画像、リンク、オーディオ、ビデオなど、実際にユーザーに表示されるすべてのコンテンツが含まれます。<body>タグ内にWeb ページの表示コンテンツを記述します。これはブラウザでユーザーに表示されます。
コメント:コメントを追加できます。コメントはページには表示されませんが、HTML コードを説明するために使用されます。

HTML5の基本タグ

<h1>to <h6>: は見出しの作成に使用され、h1 は最上位の見出しなどとなります。

<p>：段落を作成するために使用します。

<a>: リンクを作成するには、href 属性を使用してリンクの URL アドレスを指定します。

<img>: 画像を挿入する場合に使用します。src 属性に画像の URL アドレスを指定します。

<ul>と<li>: は、それぞれ順序なしリストとリスト項目を定義するために使用されます。

<ol>と<li>: は、それぞれ順序付きリストとリスト項目を定義するために使用されます。

<div>: ページ構造を整理およびスタイル設定するためのブロックレベルのコンテナを作成するために使用されます。

<span>: テキストフラグメントのスタイル設定とラップのためのインラインコンテナを作成するために使用されます。

<form>: フォームを作成し、ユーザーが入力したデータを収集するために使用されます。

<input>: フォーム内に入力フィールドを作成するために使用されます。テキスト入力ボックス、ラジオボタン、チェックボックスなどを含めることができます。

<button>: 特定のアクションをトリガーするボタンを作成します。

<table>、<tr>、<td>: テーブル、テーブル行、テーブルセルをそれぞれ定義するために使用されます。

<video>: ページ上でビデオを再生し、src 属性を通じてビデオの URL を指定するために使用されます。

<audio>: ページ上でオーディオを再生するために使用され、src 属性を通じてオーディオの URL を指定します。

2. リストラベル

<ul>、、、<ol>およびは、<dl>リストを作成するために HTML で使用される 3 つの異なるタイプのタグです。これらはさまざまな状況で使用されます。

<ul>(順序なしリスト - 順序なしリスト):
- 関連項目のグループ、オプション、または単純なリストなど、特定の順序ではない項目のリストを使用する場合。
- 一般的な使用例には、ナビゲーションメニュー、タスクリスト、プロジェクトチェックリストなどがあります。

例：

<ul>
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
</ul>

<ol>(順序付きリスト - 順序付きリスト):
- 特定の順序を持つ項目、順番に番号を付けたり数えたりする必要がある要素、または順序のある情報などのリストを使用します。
- 一般的なアプリケーションシナリオには、ステップバイステップガイド、チュートリアルの説明、リーダーボードなどが含まれます。

例：

<ol>
  <li>步骤1</li>
  <li>步骤2</li>
  <li>步骤3</li>
</ol>

<dl>(説明リスト - 説明リスト):
- 一連の用語とそれに対応する定義/説明の間の関係を説明するために使用され、用語とその説明または説明などを示すために使用されます。
- 一般的なアプリケーションシナリオには、用語集、用語を定義するページ、技術文書内のパラメータの説明などが含まれます。

例：

<dl>
  <dt>术语1：</dt>
  <dd>描述1</dd>
  <dt>术语2：</dt>
  <dd>描述2</dd>
</dl>

<ul>タグをネストして<li>使用する場合のルール:

<li><ul>またはタグ<ol>の直接の子にしかなれません:<li>タグは、順序なしリスト ( <ul>) または順序付きリスト ( )<ol>の直接の子としてのみ表示できます。<li>ラベルを<p>段落などの他の要素内に子として配置することはできません。

例：

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
</ul>

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
</ol>

ネスト可能なリスト項目:このタグを使用すると、順序付きリスト ( ) または順序なしリスト ( )<li>のいずれかの別のリスト構造をネストできます。つまり、またはを再度使用して内部に入れます。<ol><ul><li><ul><ol>

例：

<ul>
  <li>列表项1</li>
  <li>
    列表项2
    <ul>
      <li>嵌套列表项1</li>
      <li>嵌套列表项2</li>
    </ul>
  </li>
</ul>

ul と ol の共通属性は次のとおりです。

type: 順序付きリスト ( ) のカウンタースタイルを指定します。<ol>順序なしリスト ( )<ul>には役に立ちません。一般的に使用される値は次のとおりです。
- "1": アラビア数字 (デフォルト)。
- "a"：英小文字。
- "A"：英大文字。
- "i"：小文字のローマ数字。
- "I"：大文字のローマ数字。

例：

<ol type="A">
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
</ol>

start：<ol>順序付きリスト（）の開始項目の値を指定し、開始整数値を設定できます。デフォルトでは「1」から始まります。番号付けが最初から始まるリストの場合に適用されます。

例：

<ol start="3">
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
</ol>

reversed:<ol>順序付きリストの逆カウントを有効にします ( )。つまり、リストは降順にカウントされます。デフォルトでは、値はです"false"。

例：

<ol reversed>
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
</ol>

3.「マルチメディア」タブ

Web ページに画像を正しく挿入する方法と、それに共通する属性は何ですか?
Web ページに画像を挿入するには、<img>タグを使用します。

<img src="imageURL" alt="description">

src属性: 画像の URL アドレスを指定するために使用されます。外部画像リソース (絶対 URL または相対 URL) または埋め込まれた Base64 エンコードデータを参照できます。
alt属性 (オプション): 画像の代替テキストを提供するために使用されます。代替テキストは、画像を読み込めない場合、またはスクリーンリーダーユーザーが画像の内容を理解できるようにするために表示されます。

例：

<img src="https://example.com/image.jpg" alt="Beautiful scenery">

画像関連の属性:

width属性height: 画像の表示幅と高さを指定するために使用されます。固定ピクセル値またはパーセンテージなどの単位を使用できます。

title属性: マウスを画像の上に置いたときに表示されるキャプションテキストを提供します。マウスを画像の上に置くと、通常、ブラウザにはタイトル情報を示すツールチップが表示されます。

loading属性: 画像読み込みの動作を指定します。value に設定すると"lazy"、画像は遅延読み込みされ、ページ読み込みのパフォーマンスが向上します。値がある場合"eager"、画像の読み込みがすぐに開始されます。

decoding属性: 画像をデコードするためのブラウザの動作を指定します。値を指定すると"async"、画像は非同期でデコードされ、ページの読み込みを高速化できます。

sizes属性: さまざまな画面サイズやレイアウトで表示されるときに画像が使用するサイズを指定するために使用されます。通常、ブレークポイントコンテナ ( <picture>) とともに使用されます。

- Web ページにオーディオとビデオを挿入するにはどうすればよいですか? とタグを
使用して、Web ページにオーディオとビデオを挿入します<audio><video>

音声を挿入します:

<audio src="audio.mp3" controls></audio>

srcこの属性は、オーディオファイルの URL アドレスを指定します。これは、相対 URL または絶対 URL にすることができます。
controlsプロパティは、ユーザーが再生、一時停止、音量調整などを行えるようにオーディオコントロールを表示するために使用されます。

ビデオを挿入:

<video src="video.mp4" controls width="640" height="480"></video>

srcこの属性はビデオファイルの URL アドレスを指定し、相対 URL または絶対 URL を使用できます。
controlsプロパティはビデオコントローラーを表示するために使用されます。
widthおよびheightビデオの表示幅と高さをピクセル単位で設定するプロパティ。

異なるブラウザ間で複数のメディア形式をサポートしたい場合は、<source>タグを使用して<audio>または<video>要素内で複数のメディアソースを指定できます。例:

<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <!-- 可以添加更多媒体源 -->
</video>

- 相対パスと絶対パスとは何を意味しますか?

Web 開発では、相対パスと絶対パスはファイルまたはリソースを参照する 2 つの異なる方法です。

相対パス: 相対パスは、現在のドキュメントの場所を基準とした相対パスです。現在のドキュメントに対する対象リソースの相対的な位置関係を記述します。相対パスは次の方法で表現できます。

../: 親ディレクトリ。

./または省略: 現在のディレクトリ。

ファイル名: ターゲットファイルが配置されている相対パス。

例：

<img src="../images/example.jpg">:現在のドキュメントの 1 レベル上のimagesフォルダー内の画像を参照しますexample.jpg。

<link href="./styles.css" rel="stylesheet">:現在のドキュメントと同じディレクトリにあるstyles.cssスタイルシートファイルを参照します。

絶対パス: 絶対パスは、ルートディレクトリ (通常は Web サイトのメインディレクトリ) から始まる完全なファイルまたはリソースの参照パスを指します。相対パスは変更されず、常に同じ開始点から開始されます。

通常、絶対パスには、https://example.com/images/example.jpgサーバーのローカル物理パス ( など/var/www/html/images/example.jpg) などの完全な URL が含まれます。

相対パスまたは絶対パスの選択は、特定の状況とニーズによって異なります。

相対パスは、ファイル内の内部リソース参照に適しています。特に、デバッグ、開発、移行デプロイメントのいずれであっても、相対パスを使用する Web サイトにアクセスする場合、正しい参照関係を維持できます。

絶対パスは、他のドメイン名または異なるサーバー上のリソースを参照するためによく使用されますが、展開を移行するときにパスを更新する必要がある場合があります。

4. セマンティックタグ

HTML5 では、Web ページの構造とコンテンツの意味をより明確に記述し、Web ページの読みやすさ、アクセシビリティ、および検索エンジンの最適化を向上させるために使用されるいくつかのセマンティックタグが導入されています。

<header>: ドキュメントまたはセクションのヘッダーを定義します。一般的に、見出し、ナビゲーションバー、ブートストラップ要素を配置するために使用されます。

<nav>: ページのナビゲーション部分を定義します。通常はリンク、メニュー、またはナビゲーション機能が含まれます。

<main>: ドキュメントまたはセクションのメインコンテンツを定義します。ページには<main>タグを 1 つだけ含めることができます。これは、Web ページの主要なコンテンツ領域を識別するために使用されます。

<article>: 自己完結型の完全な記事、またはコンテンツの別個のブロックを定義します。一般的に、ブログ投稿、ニュース記事、独立したコンテンツの整理に使用されます。

<section>: ドキュメントの個々のセクションまたはコンテンツの特定のブロックを定義します。関連するコンテンツのグループのコンテナーとして使用できます。

<aside>: ページの二次コンテンツ領域を定義します。通常は、補足説明やその他の二次情報のために、メインコンテンツの隣に配置されます。

<footer>: ドキュメントまたはセクションのフッターを定義します。通常、著作権情報、連絡先情報、関連リンクなどを保存するために使用されます。

<figure>: 自己完結型のメディア要素を定義します。通常、画像、イラスト、図、または同様のオブジェクトをラップするために使用されます。

<figcaption>:<figure>要素に関連付けられたタイトルまたは説明を定義します。

<time>: 日付または時刻を定義します。これは、リリース日やイベント時間などの時間セマンティクスを持つコンテンツを表すためによく使用されます。

セマンティックラベルのレイアウト

5. フォームラベル

HTML5 では、既存のタグの機能強化に加えて、いくつかの新しいフォームタグが導入されています。HTML5 の一般的なフォームタグは次のとおりです。

<input>: さまざまな入力フィールドを作成するために使用されます。

type属性の新しい値:

email: 入力が電子メールアドレスであることを指定します。

date: 入力が日付であることを指定します。

url: 入力が URL アドレスであることを指定します。

tel: 入力が電話番号であることを指定します。

number: 入力が数値であることを指定します。

search: 入力を検索として指定します。

color: 入力がカラーピッカーであることを指定します。

range: 入力が範囲セレクターであることを指定します。

file：ファイルのアップロードなどに使用します。

<textarea>: ユーザーが複数行のテキストを入力できるようにする複数行のテキスト入力フィールドを作成するために使用されます。

<select>: ドロップダウン選択リストを作成します。

<option>:<select>ドロップダウン選択リストのオプションを定義するためにタグ内で使用されます。

<datalist>: 入力フィールドにリンクする事前定義オプションのリストを定義します。

<option>:<datalist>事前定義されたオプションを定義するためにタグ内で使用されます。

<output>: 計算結果やスクリプト出力を表示するために使用されます。

for属性: 関連するフォームフィールドにリンクされます。

<progress>：タスクの完了進捗状況を示します。

valueプロパティ: 完了した進行状況の値を示します。

max属性: 合計進捗の最大値を示します。

<meter>: 何らかの標準メジャーの値を表します。

value属性: 測定値を表します。

min属性：最小値を示します。

max属性：最大値を示します。

次のような、フォームの機能を強化および改善するための新しいフォーム属性もいくつかあります。

required: フォームフィールドは必須です。

placeholder: 入力フィールドのヒントテキストとして。

autocomplete: フォームフィールドの自動入力を有効または無効にします。

6. フォームラベル

HTML5 では、Web ページ内のテーブルの構造を強化し、意味論化するための新しいテーブルタグがいくつか提供されています。HTML5 の一般的なテーブルタグは次のとおりです。

<table>: テーブルを作成するために使用されます。

<tr>行を表す複数の要素を含めることができます。

行内に<th>(ヘッダーセル) 要素または<td>(データセル) 要素を含めることができます。

<thead>: テーブルのヘッダーセクションを定義するために使用されます。

1 つ以上の<tr>要素が含まれます。

<tbody>: テーブルの本体を定義するために使用されます。

1 つ以上の<tr>要素が含まれます。

<tfoot>: テーブルのフッターセクションを定義するために使用されます。

1 つ以上の<tr>要素が含まれます。

<th>: テーブルのヘッダーセルを定義するために使用されます。

通常<thead>、または<tfoot>エリアに表示されます。

列を識別するために使用されるヘッダー。

<td>: テーブルのデータセルを定義するために使用されます。

に登場します<tr>。

実際のデータまたはその他のコンテンツが含まれます。

サンプルコードは次のとおりです。

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>职业</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>工程师</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
      <td>设计师</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">总人数：2</td>
    </tr>
  </tfoot>
</table>

上の例は、ヘッダー、データ行、フッターを含む単純なテーブル構造を示しています。<colspan>属性に注意してください。この属性は、セルがまたがる列の数を定義するために使用されます。