マインドマップギャラリー HTMLタグの種類
これは、HTML タグの種類に関するマインド マップです。主な内容は、3. Body 内でよく使用されるタグ、2. HTML 文書の基本構造、1. HTML とは何か、そして何ではないのか、です。 。
2024-04-26 15:22:04 に編集されましたhtmlタグ
スクリプトタグ
1. <head>タグ内に配置します
HTML ドキュメントはブラウザによって上から下に読み込まれるため、<head> タグ内に JavaScript コードを配置すると、JavaScript は <body> タグから必要な要素を取得できず、DOM ページが表示されません。 JavaScriptは実行できません。したがって、JavaScript コードは <head> タグ内に配置されます。これは通常、ユーザーのアクションに応じて事前に読み込まれるために使用されます。これは、HTML ドキュメントのブラウザー表示コンテンツには影響せず、呼び出しの前にスクリプトが確実に読み込まれるようにします。
2. <body>タグ内に配置します
<body> タグ内にある <script> タグには、すぐに実行できる関数やステートメントを含めることができます。ただし、Web ページ要素と対話する必要がある場合 (特定のタグの値を取得したり、タグに値を割り当てたりするなど)。特定のタグ)を使用するには、 < script> タグを Web ページ要素の後に配置する必要があります。
3. <body>タグの後に配置します。
ここで JavaScript コードを解釈する準備をする場合、Web ページ全体がすでに読み込まれているため、すぐに実行する必要があるコマンドには最適な場所ですが、カスタム関数などには適していません。
rel=nofollow
nofollow タグは、スパイダーがこのリンクをクロールしてたどることを防ぎます。
メタ ロボット タグは、スパイダーがページ リンク全体を追跡したりインデックス付けしたりするのを防ぎます。
https://jingyan.baidu.com/article/75ab0bcba6c61fd6874db279.html
共通タグ
https://blog.csdn.net/qq_46137324/article/details/131971697
標準化された 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 内でよく使用されるタグ
<!--タグの分類<h1></h1>--> <!DOCTYPE html> <!--lang="en" は、Web ページの主要言語が英語であることを示します --> <html lang="zh-CN"> <頭> <!--Web ページの元の情報を定義します--> <meta charset="UTF-8"> <!-- 検索エンジンにとって便利です。1 つは、検索キーワードが Web ページの概要に相当することです。 <meta name="キーワード" content="メタサマリー,htmlメタ,メタ属性,メタジャンプ"> <meta name="description" content="オールド ボーイ教育 Python アカデミー"> <!--タブページに表示される内容--> <title>初めての HTML</title> <!--タグのスタイルを定義する--> <スタイル> あ{ 色:ダークレッド; } </スタイル> <!-- JSコードを定義するか、外部JSファイルを導入します <script>alert("Hello World")</script> --> <!--外部スタイル シート ファイル text.css を導入して、a タグの色を緑色に変更します--> <リンク rel="スタイルシート" href="text.css"> <!-- 2秒後に対応するURLにジャンプします。引用符に注意してください。 <meta http-equiv="refresh" content="2;URL=https://www.cnblogs.com/zaixiazhouzhou/default.html?page=1"> --> <!--IE にドキュメントを最も高度なモードでレンダリングするように指示します--> <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 内のコンテンツは実際には各パラメーターの変数値です。
<!--2 秒後に対応する URL にジャンプします。引用符に注意してください --> <meta http-equiv="refresh" content="2;URL=https://baidu.com"> <!--ドキュメントのエンコードタイプを指定します--> <meta http-equiv="content-Type" charset=UTF8"> <!--IE にドキュメントを最も高度なモードでレンダリングするように指示します--> <meta http-equiv="x-ua-compatibility" content="IE=edge">
2.name属性:
これは主に Web ページを記述するために使用され、対応する属性値はコンテンツです。コンテンツ内のコンテンツは、主に検索エンジン ロボットによって情報の検索と分類に使用されます。
<meta name="キーワード" content="メタサマリー,htmlメタ,メタ属性,メタジャンプ"> <meta name="description" content="オールド ボーイ教育 Python アカデミー">
3. 3. Body 内でよく使用されるタグ
3.1. 基本的なタグ
<b>太字</b> <i>斜体</i> <u>下線</u> <s>削除</s> <p>段落タグ</p> <h1>タイトル 1</h1> <h2>タイトル 2</h2> <h3>タイトル 3</h3> <h4>タイトル 4</h4> <h5>タイトル 5</h5> <h6>タイトル 6</h6> <!--改行--> <br> <!--水平線--> <時間>
3.2. 画像タグ
<img src="画像のパス" alt="画像が正常にロードされなかった場合のプロンプト" title="マウスホバー時のプロンプトメッセージ" width="幅" height="高さ (次の 2 つの属性のうちの 1 つだけ)幅と高さは自動的に待機します)、ズームよりも)">
img タグの組み込み属性に加えて、いくつかのカスタム属性を追加することもできます。
<img format="jpg" sx="カスタマイズされた属性" src="画像のパス" >
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