初心者向けのHTMLタグネストルールの詳細なまとめ

初心者向けのHTMLタグネストルールの詳細なまとめ
最近、HTML を再度学習しており、これは HTML に対する新たな理解と言えます。これを過小評価しないでください。すべての Web ページはこれに基づいています。以下にHTMLタグのネストルールを詳しくまとめておきます。皆様のお役に立てれば幸いです。

XHTML には、div、ul、li、dl、dt、dd、h1~h6、p、a、addressa、span、strong など、多くのタグがあります。これらのタグを使用してページ構造を構築すると、タグを無限にネストできます。ただし、ネストには一定のルールも必要であり、個人の習慣でランダムにネストすることはできません。結局のところ、XHTML は XML ではありません。

XHTML 言語では、ul タグに li が含まれ、dl タグに dt と dd が含まれることは誰もが知っています。これらの固定タグのネスト ルールは非常に明確です。しかし、h1、div、p など、独立していてまとめられていないタグはまだたくさんあります。では、これらのタグのネスト ルールは何でしょうか。今日はこの話題についてお話ししましょう。

XHTML タグのネスト ルールについては、まず、XHTML タグには 2 つの種類があることを知っておく必要があります。
1つはブロックレベル要素と呼ばれる
1 つのタイプはインライン要素 (インライン、インライン、インライン レベルなどとも呼ばれる) と呼ばれます。

ブロックレベル要素とインライン要素の区別は簡単です。次の 2 行のコードを body タグに記述してください。

コードをコピー
コードは次のとおりです。

<div style=”border: 1px solid red;”>div1</div>
<div style=”border: 1px solid red;”>div2</div>


ブラウザのレンダリング効果:
div1
div2

ページ上の 2 つの div は 2 行のスペースを占めています。フロートまたは他の方法で設定されていない限り、これらは隣り合うことはありません。どちらも独自の行のスペースを非常に積極的に占めています。このような現象のあるタグを見かけたら、それをブロック要素と呼ぶことができます。

次に、次の 2 行のコードを body タグに挿入します。

コードをコピー
コードは次のとおりです。

<span style=”border: 1px solid red;”>span1</span>
<span style=”border: 1px solid red;”>span2</span>


ブラウザのレンダリング効果:
スパン1 スパン2

今回は、2 つのスパンが一列に並んでおり、互いに友好的で調和しています...このようなタグの動作をインライン要素と呼ぶことができます。

ブロックレベル要素とインライン要素の違い:

ブロックレベル要素は、通常、Web サイトのアーキテクチャ、レイアウトを構築し、コンテンツを送信するために使用されます。これらの重いタスクはすべてブロックレベル要素であり、次のタグが含まれます。

アドレス、blockquote、center、dir、div、dl、dt、dd、fieldset、form、h1~h6、hr、isindex、menu、noframes、noscript、ol、p、pre、table、ul

埋め込み要素は通常、Web サイトのコンテンツの詳細または一部で「強調、スタイルを区別、上付き文字、下付き文字、アンカー」などを行うために使用されます。次のタグはすべて埋め込み要素です。

a、abbr、acronym、b、bdo、big、br、cite、code、dfn、em、font、i、img、input、kbd、label、q、s、samp、select、small、span、strike、strong、sub、sup、textarea、tt、u、var


ブロック要素とインライン要素は相互に変換できます。変換コードは次のとおりです。
display: block; /* ブロック要素に変換*/
display: inline; /* インライン要素に変換*/

· ブロック要素とインライン要素の CSS 呼び出しルールは異なります (この記事ではタグのネストについて説明するため、この知識ポイントについては詳しく説明しません)。

ブロック要素とインライン要素について簡単に紹介した後、XHTML タグのネスト ルールをリストします。

1. ブロック要素にはインライン要素または一部のブロック要素を含めることができますが、インライン要素にブロック要素を含めることはできません。インライン要素に含めることができるのは、他のインライン要素のみです。
<div><h1></h1><p></p></div> —— はい
<a href=”#”><span></span></a> —— はい
<span><div></div></span> — 間違い

2. ブロックレベル要素は <p> 内に配置できません。
<p><ol><li></li></ol></p> —— 間違い
<p><div></div></p> — 間違い

3. インライン要素のみを含むことができ、ブロックレベル要素を含むことができない特殊なブロックレベル要素がいくつかあります。これらの特殊なタグは次のとおりです。
h1、h2、h3、h4、h5、h6、p、dt

4. li には div タグを含めることができます - これは別々にリストする必要はありませんが、インターネット上では多くの人が混乱しているので、ここで簡単に説明します。

li タグと div タグはどちらもコンテンツを読み込むためのコンテナです。どちらも同等のステータスを持ち、階層はありません (たとえば、h1 と h2 の厳密な階層など)。li タグは親の ul または ol にも対応できることを知っておく必要があります。li は div に対応できないと考える人がいるのはなぜでしょうか。リーはそんなにケチだと思わないでください。リーは痩せていて小さく見えますが、実は心が広いのです...

5. ブロックレベル要素はブロックレベル要素と並べて配置され、インライン要素はインライン要素と並べて配置されます。
<div><h2></h2><p></p></div> —— はい
<div><a href=”#”></a><span></span></div> —— はい
<div><h2></h2><span></span></div> — 間違い

<<:  MySQL でサーバーのインストールを開始できない場合の解決策について簡単に説明します。

>>:  Vue の基本 MVVM、テンプレート構文、データバインディング

推薦する

Linux のメモリ管理とアドレス指定の詳細な紹介

目次1. コンセプトメモリ管理モード住所種別分類例: 2. ページ管理x86 アーキテクチャ 32 ...

aタグ内のテキストを非表示にして画像を表示するには?360モードレンダリングに対応

多くの場合、画像を表示する<a>タグのスタイルに遭遇しますが、タグ内にテキストがあり、そ...

Navicat PremiumはMySQLデータベースを操作します(SQL文を実行します)

1. Navicatの紹介1. Navicat とは何ですか? Navicat は強力な MySQ...

MySQL スロークエリログの基本的な使い方チュートリアル

スロークエリログ関連のパラメータMySQL スロー クエリ関連のパラメータの説明: slow_que...

Nginx を使用してクロスドメイン Vue 開発環境を処理する方法

1. 需要正しい Cookie 配信と SSO テストを確実に実行できるように、ローカル テスト ド...

Blazor における CSS 分離の問題

1. 環境VS 2019 16.9.0 プレビュー 1.0 .NET SDK 5.0.100 2. ...

MySQL の基本クイックスタート知識のまとめ (マインドマップ付き)

目次序文1. データベースの基礎知識1. データベースとは何ですか? 2. データベースの分類3. ...

HTML Web ページ リスト タグ学習チュートリアル

HTML Web ページ リスト タグの学習チュートリアル。 HTML ページでは、リストはアウトラ...

MySQL マスタースレーブ構成の学習ノート

● 新しいプロジェクトのセキュリティを確保するためにクラウド データを購入する予定でした。 Alib...

Dockerを使用してSonarQubeをインストールする詳細なチュートリアル

目次1. イメージをプルする1.1 関連するイメージをプルして実行する1.1.1 関連する画像を取得...

Vueはシンプルなショッピングカートの例を実装します

この記事では、Vueの具体的なコードを共有して、簡単なショッピングカートを実装します。具体的な内容は...

Vue ディレクティブ v-html と v-text

目次1. v-text テキストレンダリング命令2. v-html 1. v-text テキストレン...

LinuxベースのApacheウェブサイトサービス構成の詳細な説明

オープンソース ソフトウェアである Apache は、最も広く使用されている Web アプリケーショ...

初心者のためのWebサイト構築入門 ③ エイリアス(CNAME)レコードとURL転送

①. エイリアス(CNAME)レコードの使用方法:前回の投稿のドメイン名解決では、A レコードの解...

MySQLがブール型を返すいくつかの状況について簡単に説明します。

mysqlはブール型を返します最初のケースでは、直接戻ります select id='22a...