検索
ホームページウェブフロントエンドhtmlチュートリアルHTMLのPタグにDIVタグを含めることができないのはなぜですか?

概要:

1. ブロック要素には インライン要素 または特定のブロック要素を含めることができます (上記の例は実際には間違った使用法です--->

を内部に配置しました)

)

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

2、。DTD では、ブロックレベルの要素を次のように規定しています。

3. 重要なポイント: 3 つのレベルのブロック要素

4. inline 要素の img 要素と input 要素は特殊です。 W3C では、インライン要素にはない幅と高さを持っています。要素を display:inline-block に設定すると、置換要素の効果がシミュレートされます。


原因: プロジェクトの作業中に、元々 DW で正しいコードが MyEclipse6.0 にあることがわかりました。 しかし、多くのエラーが表示され、非常に驚​​きました。そこで理由を調べたところ、ブロックレベル要素 P 内で p をネストできないことがわかりました。

さらに深い研究: HTML のほとんどすべての要素はインライン要素またはブロック要素であるため、まずインライン要素とブロックライン ブロック要素について理解しましょう。

インラインという言葉には、インライン、インライン、インライン、ラインレベルなど、さまざまな解釈があります。ただし、ここでは、慣習的な名前であるインラインユニオンを選択します。

まず、以下の例を見てください。そうすれば、この 2 つの違いを理解できるでしょう:

ブロック要素と インライン要素 の違いをテストします。 p>

ブロック要素

とインライン要素

効果は次のとおりです。

HTML中为何P标签内不可包含p标签? - JORTON - ★柳暗花明★ 上記ではたとえば、

は単独で新しい行を生成しますが、これは CSS レンダリングを行わない場合のみであり、span を次のように定義することもできます。ただし、HTML ではブロック要素を任意に変換することはできません。ブロック要素にはインライン要素または特定のブロック要素を含めることができます (上記の例は実際には間違った使用法です--->

の中に

を入れています)。

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

、もう一度見てください:

<h2 id="我喜欢在-a-nbsp-href-nbsp-经典论坛-a-讨论Web标准的原因">我喜欢在<a href="#" >经典论坛</a>讨论Web标准的原因。</h2>


ここで、

はブロック要素です。 を含む

にも問題はありません。

を含む場合も同様です。以下は、インライン要素にブロック要素を含めるべきではないため、これは間違いです:

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


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

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


これで大丈夫です。

りー


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

内に配置できないと規定しており、一部のブラウザーではそのような記述が許容されているからです。


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


当一个

签还没结束时,遇到下一个块元素就会把自己结束掉,其实浏览器是把它们处理成这样:

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


所以刚才那样的写法会变成这样:

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


这也是跟刚才说第一个例子中

里面放

不合理是同一个道理。



以下为重点理解部分:

那哪些块元素里面不能放哪些块元素呢?我知道你有这个疑问,也知道我仅仅列一张清单你不好记住它们。我们可以先把所有的块元素再次划分成几个级别的,我们已经知道是在最外层,下一级里面只会有head

>、、、,而我们已经知道了可视的元素只会出现在里,所以我们把划在第一个级里面,接着,把不可以自由嵌套的元素划在第三个级,其他的就归进第二个级。<span style="color:rgb(255,0,0)">所谓的不可自由嵌套的元素就是里面只能放内联元素的,它们包括有:标题标记的<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<caption>;段落标记的<p>;分隔线</p> <hr>和一个特别的元素<dt>(它只存在于列表元素</dt> <dl>的子一级)。</dl> </caption> </h6> </h5> </h4> </h3> </h2> </h1></span><p style="font-family:宋体,Arial,Helvetica,sans-serif; margin-top:0px; margin-bottom:10px; padding-top:0px; padding-bottom:0px; line-height:21px; text-indent:2em"><span style="background-color:rgb(255,255,255)"><span style="color:rgb(255,0,255)">为什么说第二级的元素可以自由嵌套呢?</span>我们可以把它们看成是一些容器(或者说是盒子), 这些容器的大小可以自由变化,例如我们可以把<ul>嵌在<p>里面,也可以把</p> <p>嵌在</p> <li>里面。</li> </ul></span></p> <p style="color:rgb(51,51,51); font-family:宋体,Arial,Helvetica,sans-serif; margin-top:0px; margin-bottom:10px; padding-top:0px; padding-bottom:0px; line-height:21px; text-indent:2em"><span style="color:rgb(255,0,0); background-color:rgb(255,255,255)"> HTML には、<ul>、</ul> <ol>、<dl>、<table> という特殊な要素がいくつかあり、そのサブレベルは、指定された要素、<ul>、&lt の子レベルである必要があります。 ;ol> は <li> である必要があります; <dl> の子レベルは <caption> または </caption> <thead> である必要があります。 </thead> <tfoot>、</tfoot> <tbody> など、次のサブレベルは <tr> でなければなりません (</tr> <tr> は <thead>、</thead> </tr> </tbody> <tfoot>、</tfoot> <tbody> にのみ存在します)。 <td> または </td> <th> でコンテンツを配置できます。 <p style="font-family:宋体,Arial,Helvetica,sans-serif; margin-top:0px; margin-bottom:10px; padding-top:0px; padding-bottom:0px; line-height:21px; text-indent:2em"><span style="background-color:rgb(255,255,255)">これは、多くの人が W3C 検証に合格しない理由でもあります。> ただし、エラー ラベルを <p> または <span> に変更すると合格できません。これは、検証のための盲目的な検証です。<p> は神ではありません。</p> <p> は <a href="http://www.php.cn/html/html-yuyihua.html" target="_blank">semantic</a> タグを置き換えることはできません。 </p></span></p> <p style="color:rgb(51,51,51); font-family:宋体,Arial,Helvetica,sans-serif; margin-top:0px; margin-bottom:10px; padding-top:0px; padding-bottom:0px; line-height:21px; text-indent:2em"><span style="color:rgb(255,255,255); background-color:rgb(255,255,255)"><br></span></p> <p style="font-family:宋体,Arial,Helvetica,sans-serif; margin-top:0px; margin-bottom:10px; padding-top:0px; padding-bottom:0px; line-height:21px; text-indent:2em"><span style="background-color: rgb(255, 255, 255); font-family: 宋体, Arial, Helvetica, sans-serif; line-height: 21px; text-indent: 24px; color: rgb(0, 0, 0);">実際、インライン要素の中にはまだ区別することができます </span><span style="background-color: rgb(255, 255, 255); font-family: 宋体, Arial, Helvetica, sans-serif; line-height: 21px; text-indent: 24px; color: rgb(204, 51, 204);">特別な要素 (<img alt="HTMLのPタグにDIVタグを含めることができないのはなぜですか?" >、<input> など) がいくつかあり、それらは定義できます。幅と高さ。 IEですが ブラウザでは、すべての要素で幅と高さを定義できますが、これは IE 独自の標準であり、すべてのブラウザがサポートしているわけではありません。W3C ではこれらを置換要素と呼んでいます。</span><span style="font-family: 宋体, Arial, Helvetica, sans-serif; line-height: 21px; text-indent: 24px; background-color: rgb(255, 255, 255);">翻訳に適した単語が見つかりません。これらはインラインに属しますまた、「表示: inline-block の応用」で説明した inline-block には、他の要素を置換要素としてシミュレートできる機能もあります。当面は、それについて詳しく知る必要はありません。 、それを学ぶのは後で待ってください</span><span style="background-color: rgb(255, 255, 255); font-family: 宋体, Arial, Helvetica, sans-serif; line-height: 21px; text-indent: 24px;">。 <br></span></p> <p style="color: rgb(51, 51, 51); font-family: 宋体, Arial, Helvetica, sans-serif; margin-top: 0px; margin-bottom: 10px; padding-top: 0px; padding-bottom: 0px; line-height: 21px; text-indent: 2em;"><br></p></span></p> </th> </tbody> </dl> </li> </ul> </table> </dl> </ol></span></p>

以上がHTMLのPタグにDIVタグを含めることができないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
HTML、CSS、およびJavaScriptの理解:初心者向けガイドHTML、CSS、およびJavaScriptの理解:初心者向けガイドApr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript:1)htmlStructuresContent、2)cssStylesit、および3)Javascriptaddsinteractivity、形成、

HTMLの役割:Webコンテンツの構造HTMLの役割:Webコンテンツの構造Apr 11, 2025 am 12:12 AM

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。

HTMLとコード:用語を詳しく見るHTMLとコード:用語を詳しく見るApr 10, 2025 am 09:28 AM

htmlisaspecifictypeofcodefocuseduructuringwebcontent

HTML、CSS、およびJavaScript:Web開発者に不可欠なツールHTML、CSS、およびJavaScript:Web開発者に不可欠なツールApr 09, 2025 am 12:12 AM

HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。

HTML、CSS、およびJavaScriptの役割:コアの責任HTML、CSS、およびJavaScriptの役割:コアの責任Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTMLは初心者のために簡単に学ぶことができますか?HTMLは初心者のために簡単に学ぶことができますか?Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1)HTMLの学習曲線はスムーズで簡単に開始できます。 2)基本タグをマスターして、Webページの作成を開始します。 3)柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用​​できます。 4)豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

HTMLでの開始タグの例は何ですか?HTMLでの開始タグの例は何ですか?Apr 06, 2025 am 12:04 AM

Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。

CSSのフレックスボックスレイアウトを使用して、メニューの点線のラインセグメンテーション効果のセンターアラインメントを実現する方法は?CSSのフレックスボックスレイアウトを使用して、メニューの点線のラインセグメンテーション効果のセンターアラインメントを実現する方法は?Apr 05, 2025 pm 01:24 PM

メニューで点線のラインセグメンテーション効果を設計する方法は?メニューを設計するときは、通常、皿の名前と価格の間に左右に合わせることは難しくありませんが、真ん中の点線またはポイントはどうですか...

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

Dreamweaver Mac版

Dreamweaver Mac版

ビジュアル Web 開発ツール

SublimeText3 Linux 新バージョン

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン