ログイン
サインイン

マインドマップギャラリー HTMLタグの種類

HTMLタグの種類

これは、HTML タグの種類に関するマインドマップです。主な内容は、3. Body 内でよく使用されるタグ、2. HTML 文書の基本構造、1. HTML とは何か、そして何ではないのか、です。。

2024-04-26 15:22:04 に編集されました

WSUJfrxa

最近の作品その他の作品を表示>>

細菌
これはバクテリアに関するマインドマップであり、その主な内容には、概要、形態、種類、構造、生殖、分布、アプリケーション、および拡張が含まれます。概要は包括的で綿密で、レビュー資料として適しています。
植物無性生殖
これは、植物の無性生殖に関するマインドマップであり、その主な内容には、概念、胞子の生殖、栄養生殖、組織培養、芽が含まれます。概要は包括的で綿密で、レビュー資料として適しています。
動物の生殖発達
これは、動物の生殖発達に関するマインドマップであり、その主な内容には、昆虫、カエル、鳥、性的生殖、無性生殖が含まれます。概要は包括的で綿密で、レビュー資料として適しています。

HTMLタグの種類

WSUJfrxa

最近の作品その他の作品を表示>>

おすすめ
アウトライン

CSS
- 29
shimamura@goodsystem.jp
Vue3
- 13
PlotWizard
フィットネスチャレンジ
- 6
WSUJfrxa
BOM
- 15
WSUJfrxa
ウェブワーカー
- 13
WSUJfrxa
HTML ノート HTML 検索コードを含む非インターネットアプリケーション
- 5
WSUJfrxa
html
- 9
WSUJfrxa
HTML
- 14
WSUJfrxa
HTML CSS
- 14
WSUJfrxa
HTMLに含まれる主な構造要素
- 12
WSUJfrxa

標準化された HTML5 要素

ルート要素

要素説明 <html> HTML または XHTML ドキュメントのルートを表します。他のすべての要素はこの要素の子である必要があります。

ドキュメントのメタデータ

要素説明 <頭> スクリプトやスタイルシートへのリンクやコンテンツなど、ドキュメントに関するメタデータのコレクションを表します。 <タイトル> ブラウザのタイトルバーまたはタブに表示されるドキュメントのタイトルを定義します。この要素にはテキストのみを含めることができ、含まれるタグは解釈されません。 <ベース> ページ上の相対 URL のベース URL を定義します。 <リンク> 外部の JavaScript または CSS をこのドキュメントにリンクするために使用されます。 <メタ> 他の HTML 要素では記述できないメタデータを定義します。 <スタイル> インライン CSS に使用されます。

脚本

要素説明 <スクリプト> インラインスクリプトを定義するか、外部スクリプトへのリンクを定義します。スクリプト言語は JavaScript です。 <スクリプトなし> ブラウザがスクリプトをサポートしていない場合に表示される代替テキストを定義します。実行時に JavaScript を介してコンテンツをインスタンス化するコンテナー。

章

要素説明 <本文> HTML ドキュメントのコンテンツを表します。ドキュメント内に存在できる <body> 要素は 1 つだけです。ドキュメント内のセクションを定義します。ナビゲーションリンクのみを含むセクションを定義します。残りのコンテンツから独立した、完全に独立したコンテンツブロックを定義します。ページのコンテンツとの関連性が低いコンテンツを定義します。削除しても、残りのコンテンツは引き続き意味を持ちます。 <h1>、<h2>、<h3>、<h4>、<h5>、<h6> title 要素は 6 レベルのドキュメントタイトルを実装します。<h1> が最大のタイトル、<h6> が最小のタイトルです。 title 要素は、章のトピックを簡単に説明します。ページまたはセクションのヘッダーを定義します。多くの場合、ロゴ、ページタイトル、ナビゲーション用の目次が含まれます。ページまたはセクションの終わりを定義します。多くの場合、著作権情報、法的情報へのリンク、フィードバック提案のアドレスが含まれています。 <アドレス> 連絡先情報を含むセクションを定義します。ドキュメント内の主要なコンテンツまたは重要なコンテンツを定義します。

コンテンツを整理する

要素説明 <p> 段落を定義します。 <時間> 章、記事、またはその他の長いコンテンツ内の段落間の区切り文字を表します。 <前> これは、コンテンツが事前に植字されており、その形式が保持される必要があることを意味します。 <ブロック引用> 他の情報源からの引用を表します。 <オル> 順序付きリストを定義します。 <ul> 順序なしリストを定義します。 <リ> リスト内のリスト項目を定義します。 <dl> 定義リスト (用語とその定義のリスト) を定義します。 <dt> 次の <dd> で定義される用語を表します。 <dd> 先行する用語の定義を表します。ドキュメントに関連付けられた凡例を表します。凡例の説明を表します。 <div> 特別な意味を持たない一般的なコンテナを表します。

テキストフォーム

要素説明 <a> 別のリソースへのハイパーリンクを表します。 <em> 強調テキストを表します。 <strong> 特に重要なテキストを表します。 <小> 免責事項、著作権に関する記述など、文書を理解する上で重要ではないコメントを表します。 <s> 不正確または無関係なコンテンツを表します。 <引用> 作品のタイトルを表します。 <q> インライン参照を表します。 <DFN> 最も近い祖先に含まれる用語の定義を表します。 <abbr> 省略または略語を表し、その完全な内容は title 属性に含まれます。コンテンツの一部に相当する機械可読な要素に関連付けられます (この要素は HTML 標準の WHATWG バージョンにのみ存在し、HTML5 標準の W3C バージョンには存在しません)。日付と時刻の値を表します。機械可読な値は datetime 属性によって指定されます。 <コード> コンピュータコードを表します。 <var> コード内の変数を表します。 <サンプル> プログラムまたはコンピューターの出力を表します。 <kbd> ユーザー入力を表します。通常はキーボードからの出力ですが、音声入力などの他の入力を表すこともできます。 <サブ>、<サップ> それぞれ下付き文字と上付き文字を表します。 <i> 専門用語や外国語のフレーズなど、さまざまな性質のテキストを表します。 <b> 注意が必要なテキストを表します。 <u> スペルミスのテキストをマークするなど、下線を引く必要があるテキストコメントを表します。強調表示する必要がある引用テキストを表します。漢字とそのピンインなど、ルビコメントでマークされたテキストを表します。中国語ピンインなどのルビコメントを表します。ルビコメントの周囲に追加で挿入されたテキストを表します。ルビコメント表示をサポートしていないブラウザでわかりやすいコメント表示を提供するために使用されます。親要素のテキスト方向から分離する必要があるテキストの一部を表します。異なるテキスト方向または未知のテキスト方向の形式でテキストを埋め込むことができます。 <bdo> 子要素のテキスト方向を指定し、デフォルトのテキスト方向を明示的にオーバーライドします。 <スパン> 特別な意味を持たないテキストを表します。この要素は、他の意味要素がテキストに適していない場合に使用できます。 <br> 改行を表します。単語の区切りの機会 (Word Break Opportunity) を表します。テキストが長すぎて改行する必要がある場合に改行が追加されます。

編集

要素説明 <イン> 定義によりドキュメントにコンテンツが追加されます。 <デル> ドキュメントから削除するコンテンツを定義します。

コンテンツを埋め込む

要素説明 <画像> 絵を表します。 <iframe> インラインフレームを表します。アプリケーションやインタラクティブコンテンツなどの埋め込み外部リソースを表します。 <オブジェクト> 画像、HTML サブドキュメント、プラグインなどの外部リソースを表します。 <パラメータ> <object> 要素で指定されたプラグインのパラメータを表します。ビデオ、そのビデオファイル、字幕を表し、ビデオを再生するためのユーザーインターフェイスを提供します。サウンドの一部、またはオーディオストリームを表します。 <video> や <audio> などのメディア要素のメディアソースを指定します。 <video> や <audio> などのメディア要素のテキストトラック (字幕) を指定します。チャート、ゲーム描画などのグラフィックスをスクリプトを通じてリアルタイムにレンダリングできるビットマップ領域を表します。 <マップ> <area> 要素とともに、画像マッピング領域を定義します。 <エリア> <map> 要素とともに、画像マッピング領域を定義します。埋め込みベクトル画像を定義します。数式を定義します。

シート

要素説明 <テーブル> 多次元データを定義します。 <キャプション> テーブルのタイトルを表します。 <コルグループ> テーブル内の単一または複数の列のグループを表します。 <列> テーブル内の列を表します。 <本体> テーブル内の特定のデータ部分 (テーブルの本体) を表します。 <頭> テーブル内の列ラベル (ヘッダー) を表します。 <足> テーブル内の列の概要 (テーブルフッター) を表します。 <tr> テーブル内の行を表します。 <td> テーブル内のセルを表します。 <番目> テーブルのヘッダーセルを表します。

形状

要素説明 <フォーム> コントロールで構成されるフォームを表します。 <フィールドセット> コントロールグループを表します。 <凡例> <fieldset> コントロールグループのタイトルを表します。 <ラベル> フォームコントロールのタイトルを表します。 <入力> ユーザーがデータを編集できるようにするデータ領域 (テキストボックス、ラジオボタン、チェックボックスなど) を表します。 <ボタン> ボタンを表します。 <選択> ドロップダウンボックスを表します。他のコントロールに提供される事前定義されたオプションのセットを表します。 <オプトグループ> オプションのグループ化を表します。 <オプション> <select> 要素または <datalist> 要素内のオプションを表します <テキストエリア> 複数行のテキストボックスを表します。キーペアジェネレーターコントロールを表します。計算された値を表します。プログレスバーを表します。スライダーを表します。

インタラクティブな要素

要素説明ユーザーがクリックして追加情報やコントロールを取得できるウィジェットを表します。 <details> 要素の概要またはタイトルを表します。ユーザーがクリックできるメニュー項目を表します。メニューを表します。

HTMLタグの種類

1. 1. HTML とは何ですか?また、HTML ではないものは何ですか?

1.1. HTMLとは何ですか?

ハイパーテキストマークアップ言語 (HTML) は、Web ページの作成に使用されるマークアップ言語です。

Web ページのファイル拡張子: .html または .htm

本質的に、これらはブラウザーが認識できるルールであり、私たちはルールに従って Web ページを作成し、ブラウザーはルールに従って Web ページをレンダリングします。同じタグでもブラウザによって解釈が異なる場合があります。 (互換性の問題)

1.2. HTML ではないもの

HTML はマークアップ言語であり、プログラミング言語ではありません。 HTML はタグを使用して Web ページを記述します。

2. 2. HTML文書の基本構造

基本構造例

<!DOCTYPE html> <html lang="zh-CN"> <頭> <meta charset="UTF-8"> <title>CSS スタイルの優先順位</title> </head> <本文> </body> </html>

HTMLの基本フォーマットの説明

注: 中国語の Web ページの場合、<meta charset="utf-8"> を使用してエンコーディングを宣言する必要があります。そうしないと文字化けが発生します。一部のブラウザでは GBK をデフォルトのエンコーディングとして設定するため、それを <meta charset="gbk"> に設定する必要があります。

2.1. head 内でよく使用されるタグ

<!DOCTYPE html>  <html lang="zh-CN"> <頭>  <meta charset="UTF-8">  <title>初めての HTML</title>  <スタイル> あ{ 色:ダークレッド; } </スタイル>   <リンク rel="スタイルシート" href="text.css">   <meta http-equiv="x-ua-compatibility" content="IE=edge"> </head>

2.1.1. メタタグの補足

• <meta> 要素は、ページ、説明、検索エンジンのキーワード、更新頻度に関するメタ情報 (マタ情報) を提供できます。 • <meta> タグはドキュメントの先頭にあり、コンテンツは含まれません。 • <meta> は、ユーザーには表示されない情報を提供します。メタタグの構成: メタタグには、http-equiv 属性と name 属性の 2 つの属性があり、これらの異なるパラメータ値により、異なる Web ページ機能が実現されます。

1.http-equiv 属性:

http のファイルヘッダー関数と同等で、Web ページのコンテンツを正しく表示するために役立つ情報をブラウザーに返すことができます。対応する属性値は content であり、content 内のコンテンツは実際には各パラメーターの変数値です。

<meta http-equiv="refresh" content="2;URL=https://baidu.com">  <meta http-equiv="content-Type" charset=UTF8">  <meta http-equiv="x-ua-compatibility" content="IE=edge">

2.name属性:

これは主に Web ページを記述するために使用され、対応する属性値はコンテンツです。コンテンツ内のコンテンツは、主に検索エンジンロボットによって情報の検索と分類に使用されます。

3. 3. Body 内でよく使用されるタグ

3.1. 基本的なタグ

3.2. 画像タグ

img タグの組み込み属性に加えて、いくつかのカスタム属性を追加することもできます。

3.3. タグ

3.3.1. タグの概要

a タグは、一般的なハイパーリンクタグです。いわゆるハイパーリンクは、Web ページからターゲットへの接続関係を指します。ターゲットは、別の Web ページまたは同じ Web ページ上の別の場所です。写真、電子メールアドレス、ファイル、アプリケーションなどを使用することもできます。デフォルトでは、リンクはブラウザに次のように表示されます。

未訪問のリンクは青色のフォントと下線で表示されます。

訪問したリンクは紫色で下線付きで表示されます。リンクをクリックすると、赤く下線が引かれて表示されます。

注: これらのハイパーリンクに CSS スタイルが設定されている場合、表示スタイルは CSS 設定に従って表示されます。

3.3.2. タグの構文形式

<a href="http://www.oldboyedu.com" target="_blank" id="カスタマイズされた ID 値">クリックしてください</a>

href 属性はターゲット Web アドレスを指定します。アドレスにはいくつかのタイプがあります。 • 絶対 URL - 別のサイトを指します (例: href="http://www.jd.com) • 相対 URL - 現在のサイト内の正確なパス (href="index.htm") を指します。 • アンカー URL - ページ内のアンカーを指します (href="#top")

ターゲット属性: • _blank は、ターゲットページを新しいタブで開くことを意味します • _self は、現在のタブでターゲット Web ページを開くことを意味します

ID 属性: id 属性を使用して、HTML ドキュメントのブックマークを作成できます。ヒント: ブックマークは特別な方法では表示されません。つまり、ブックマークは HTML ページに表示されないため、読者からは隠されています。

HTML ドキュメントに ID を挿入します。 <a id="ID is 1">現在は ID 1 のポジションです</a>

3.4. HTML の特殊文字

html では大文字と小文字が区別されませんが、エンティティ文字では大文字と小文字が区別されます。

3.5、divタグとspanタグ

scan と div の違いは、div がブロックレベルの要素であり、それに含まれる要素が自動的に折り返されることです。 Span はインライン要素であり、その前後に改行はありません。

スパンには構造的な意味はなく、単にスタイルを適用するだけです。他の要素が適切でない場合に使用できます。 scan は div の子要素として使用できますが、span に div が含まれる場合は、ws3c ページ標準に準拠しません。

3.6. 焦点: タグの分類

3.6.1. 最初のタイプ: ブロックレベルのタグ

特長：ラベルは1行で、幅と高さを指定できます。

特性： • 幅と高さを認識する機能 • 上下左右のマージンとパディングはすべて有効です。 • 行を自動的に折り返すことができます • 複数のブロック要素タグをまとめて記述し、デフォルトの配置は上から下へ • margin:0 auto を使用して中央揃えにすることができます。

一般的に使用されるブロック要素には次のものがあります。 <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>、<form>

3.6.2. 2 番目のタイプ: インラインラベル (インラインラベル)

特徴: ラベルは 1 行で、幅と高さはコンテンツによって決まります。コンテンツが HTML の幅を超える場合にのみ折り返されます。

特性： • 幅と高さを設定できない • 上下のマージンは無効で、左右のみが効果を持ち、スペースを拡張するパディングは効果があります。この属性はボックスモデル用であるためです。 • 自動行折り返しなし

一般的に使用されるインライン要素は次のとおりです。 <a>、<span>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

3.7. タグをリストする

リストタグの属性はおおよそ次のとおりです。

3.7.1. 順序なしリスト ul の関連属性

タイプ属性: • ディスク (実線のドット、デフォルト) • サークル (白丸) • 正方形 (実線の正方形) • なし (スタイルなし)

<ul type="ディスク"> <li>実線ドット - デフォルト</li> </ul> <ul type="circle"> <li>黒丸</li> </ul> <ul type="square"> <li>ソリッドスクエア</li> </ul> <ul type="none"> <li>スタイルがありません</li> </ul>

出力例:

3.7.2. 順序付きリスト ol の関連属性

順序付きリスト型の属性値順序付きリストがシーケンスを表すために 1、2、3... のみを使用できるというわけではありません。次の方法も使用できます。

順序付きリストのその他のプロパティ

3.7.3. タイトルリストの関連属性

<dl> <dt>タイトル 1</dt> <dd>タイトル 1 の内容</dd> <dt>タイトル 2</dt> <dd>タイトル 2 1 の内容</dd> <dd>タイトル 2 のコンテンツ 2</dd> </dl>

出力例

3.8. テキストの書式設定タグ

https://blog.csdn.net/qq_44891434/article/details/113371490

https://blog.csdn.net/qq_46137324/article/details/131971697