HTML P タグは div をネストできないのはなぜですか? HTML P タグの CSS スタイルの例もあります-htmlチュートリアル-php.cn

この記事ではhtml pタグの応用編を紹介します。前回の記事の基礎編をまだ見ていない方は、以下のリンクをクリックして読んでください。この記事では主にhtml pタグに関する2つの重要な知識を紹介しています。クリックすると、1 つは CSS スタイルを使用して P タグの特定の使用を制御する方法で、それぞれに例があり、興味のある学生は自分でコードを試すことができます。もう 1 つは、HTML P タグを div にネストできない理由の詳細な説明です。希望する

html P タグのタグ定義と使用方法:

タグ定義の段落をよくお読みください。

要素の前後に空白が自動的に作成されます。これらのスペースはブラウザによって自動的に追加されるか、スタイルシートで指定することもできます。

html P タグの属性:

HTML P タグは div をネストできないのはなぜですか? HTML P タグの CSS スタイルの例もあります

HTML の P タグ内で div タグをネストできないのはなぜですか

詳細な研究:

まず内部を理解しましょうline inline 要素と block-line block 要素。これは、HTML のほとんどすべての要素が inline 要素または block 要素であるためです。

インラインという言葉には、インライン、インライン、インライン、ラインレベルなど、さまざまな解釈があります。ただし、これらはすべて同じ意味を指します。ここでは、慣習的な名前であるインラインを選択します。

次の例を見ると、この 2 つの違いが理解できます。

    <p>测试一下块元素与<span>内联元素</span>的差别</p>
    <p>测试一下<div>块元素</div>与内联元素的差别</p>

ログイン後にコピー

ここでは、

によって新しい行が生成されます。また、には改行がありません。同様に、CSS を介して div をインライン要素として定義し、span をブロック要素として定義することもできます。内部で任意に変換します。ブロック要素にはインライン要素または特定のブロック要素を含めることができます (上記の例は実際には間違った使用法です--->

を

内に置きました)。ただし、インライン要素にはブロック要素を含めることはできません。他のインライン要素のみを含めることができます。

<h2>我喜欢在<a href="http://www.php.cn/ " >php中文网</a>讨论Web标准的原因。</h2>

ログイン後にコピー

ここで、

はブロック要素、

を含めることは問題ありません。 ; 同様に、

には

を含めることができ、

にを含めることもできますが、次のような場合はインライン要素であるため間違っています。ブロック要素を含む:

  <a href="#"> <h2>这样是错误的用法！</h2></a>

ログイン後にコピー

一部のブロック要素に他のブロック要素を含めることができない場合もあります。例:

   <p>测试文字
    < ul>
        li>现阶段是不能这样用的，要等到XHTML 2.0才可以这样用。</li>
    </ul>
       测试文字
    </p>

ログイン後にコピー

これで大丈夫です。

えー

なぜですか？私たちが使用する DTD では、ブロックレベルの要素を

内に配置できないと規定しており、一部のブラウザではこのような記述が許容されているためです:

これは段落の始まりです

タグがまだ終了していない場合、次のブロック要素に遭遇したときにタグ自体が終了します。実際、ブラウザは次のように処理します:

   <ul>
         <li><p>这样是可以的</p></li>
    </ul>

ログイン後にコピー

つまり、この書き方では次のようになります。次のようにしてください:

    <p>这是一个段落的开始</p>
    <p>这是另一个段落的开始</p>

ログイン後にコピー

テストテキスト

これは、最初の例の

の中に

を入れることの不合理と同じです。

では、どのブロック要素の中にどのブロック要素を配置できないのでしょうか?このような質問があると思いますが、リストを作成するだけでは覚えておくのが難しいこともわかります。まず、すべてのブロック要素をいくつかのレベルに分割します。が最外層にあり、の次のレベルには、のみが含まれることがわかります。 ;frameset>、