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

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

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

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

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

html P タグの属性:

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

詳細な研究:

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

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

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

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

ここでは、

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

を

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

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

ここで、

はブロック要素、

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

には

を含めることができ、

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

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

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

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

これで大丈夫です。

えー

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

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

これは段落の始まりです

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

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

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

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

テストテキスト

これは、最初の例の

の中に

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

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

、 のみが含まれることがわかります。 ;frameset>、、視覚要素が にのみ表示されることはすでにわかっているため、 を最初のレベルに配置し、自由ではないネストされた要素を 3 番目のレベルに配置します。 、その他は 2 番目のレベルに配置されます。 <p>いわゆる自由にネストできない要素とは、インライン要素のみを含めることができる要素です。タイトル タグ </p> <h1>、<h2>、<h3>、<h4>、<h5> が含まれます。 、 <h6 id="">、 </h6> </h5> </h4> </h3> </h2> </h1> <p> 段落記号の区切り線 </p> <dt> (リスト要素 </dt> <dl> の子レベルにのみ存在します) ;)。 <p><strong>互換性に関する注意事項</strong></p> <p> HTML 4.01 では、p 要素の align 属性は非推奨となり、XHTML 1.0 Strict DTD では、p 要素の align 属性はサポートされません。 </p> <p>代わりにCSSを使用してください。 </p> <p>CSS 構文: </p><pre class='brush:php;toolbar:false;'>&lt;p&gt;测试文字&lt;/p&gt; &lt;ul&gt; &lt;li&gt;现阶段是不能这样用的，要等到XHTML 2.0才可以这样用。&lt;/li&gt; &lt;/ul&gt;</pre><p><span style="font-size: 16px;"><strong>html P タグの CSS スタイルの例: </strong></span></p> <p>1. " text-left "、" text-right "、" text-center " 属性は </p> <p> タグの内容を制御します。場所</p><pre class='brush:php;toolbar:false;'> &lt;p class=&quot;text-left&quot;&gt;在左&lt;/p&gt; &lt;p class=&quot;text-right&quot;&gt;在右&lt;/p&gt; &lt;p class=&quot;text-center&quot;&gt;居中&lt;/p&gt;</pre><p>2.“ text-lowercase ”、“ text-uppercase ”、“ text-capitalize ”属性控制</p> <p>标签英文内容的大小写 </p><pre class='brush:php;toolbar:false;'> &lt;p class=&quot;text-lowercase&quot;&gt;hahahahhahahaha都小写&lt;/p&gt; &lt;p class=&quot;text-uppercase&quot;&gt;hahahahhahahaha都大写&lt;/p&gt; &lt;p class=&quot;text-capitalize&quot;&gt;hahahahhahahaha首字母大写&lt;/p&gt;</pre><p>3.字体：“text-muted ”、“text-info ”、“text-success ”、“text-warning ”、“text-primary ”、“text-danger ”等属性，对不同情况下的内容进行不同颜色的标注</p><pre class='brush:php;toolbar:false;'> &lt;p class=&quot;text-muted&quot;&gt;text-muted&lt;/p&gt; &lt;p class=&quot;text-info&quot;&gt;text-info&lt;/p&gt; &lt;p class=&quot;text-success&quot;&gt;text-success&lt;/p&gt; &lt;p class=&quot;text-warning&quot;&gt;text-warning&lt;/p&gt; &lt;p class=&quot;text-primary&quot;&gt;text-primary&lt;/p&gt; &lt;p class=&quot;text-danger&quot;&gt;text-danger&lt;/p&gt;</pre><p>4.背景：“bg-muted ”、“bg-info ”、“bg-success ”、“bg-warning ”、“bg-primary ”、“bg-danger ”等属性，对不同情况下的内容进行不同颜色背景的标注</p><pre class='brush:php;toolbar:false;'> &lt;p class=&quot;bg-muted&quot;&gt;bg-muted&lt;/p&gt; &lt;p class=&quot;bg-info&quot;&gt;bg-info&lt;/p&gt; &lt;p class=&quot;bg-success&quot;&gt;bg-success&lt;/p&gt; &lt;p class=&quot;bg-warning&quot;&gt;bg-warning&lt;/p&gt; &lt;p class=&quot;bg-primary&quot;&gt;bg-primary&lt;/p&gt; &lt;p class=&quot;bg-danger&quot;&gt;bg-danger&lt;/p&gt;</pre><p>点击这里查看p标签的基础学习文章：<a href="http://www.php.cn/div-tutorial-409056.html" target="_blank"><span style="color: rgb(0, 0, 0); font-family: " helvetica neue sc tahoma arial sans-serif>html<p>标签是什么元素？关于html p标签的定义和作用详解</p></span></a></p> <p>【小编的相关推荐】</p> <p><a href="http://www.php.cn/div-tutorial-408951.html" target="_blank">html dir标签是干啥的？<dir>标签的具体定义和属性介绍</dir></a><br></p> <p><a href="http://www.php.cn/div-tutorial-408952.html" target="_blank">html noscript标签是什么意思？关于noscript标签的用法你了解多少？</a><br></p> </dl>

以上がHTML P タグは div をネストできないのはなぜですか? HTML P タグの CSS スタイルの例もありますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。