HTML P 태그가 div를 중첩할 수 없는 이유는 무엇입니까? HTML P 태그에 대한 CSS 스타일의 예도 있습니다.

이 글은 html p 태그의 고급 버전을 소개합니다. 이전 글의 기본 버전을 보지 못한 분들은 아래 링크를 클릭하여 읽어보실 수 있습니다. 이 글은 주로 html p 태그에 대한 두 가지 중요한 지식을 소개합니다. 요점 중 하나는 CSS 스타일을 사용하여 P 태그의 특정 사용을 제어하는 ​​방법입니다. 관심 있는 학생들이 직접 코드를 시도해 볼 수 있습니다. 다른 하나는 HTML P 태그를 div에 중첩할 수 없는 이유에 대한 자세한 설명입니다.

html P 태그 정의 및 사용 지침:

태그 정의 단락을 주의 깊게 읽어보시기 바랍니다.

요소는 자동으로 앞뒤에 공백을 만듭니다. 브라우저는 이러한 공백을 자동으로 추가하거나 스타일시트에서 지정할 수 있습니다.

html P 태그의 속성:

div 태그가 HTML의 P 태그 내에 중첩될 수 없는 이유

심층 연구:

먼저 in- 라인 인라인 요소와 블록-라인 블록 요소. HTML의 거의 모든 요소가 인라인 요소이거나 블록 요소이기 때문입니다.

인라인이라는 단어는 인라인, 인라인, 인라인, 라인 레벨 등 다양한 해석이 있습니다. 그러나 모두 동일한 의미를 의미합니다. 여기서는 관례적인 이름인 인라인을 선택합니다.

다음 예를 보면 둘 사이의 차이점을 이해할 수 있습니다.

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

위의 예를 연습하면 효과를 볼 수 있습니다. 여기서는

그리고 에는 줄 바꿈이 없습니다. 마찬가지로 CSS를 통해 div를 인라인 요소로 정의하고 범위를 블록 요소로 정의할 수 있지만 HTML에서는 사용할 수 없습니다. 블록 요소는 인라인 요소나 특정 블록 요소를 포함할 수 있지만(위의 예는 실제로 잘못된 사용입니다--->

안에

를 넣었습니다). 인라인 요소는 블록 요소를 포함할 수 없습니다. , 이는 다른 인라인 요소만 포함할 수 있습니다.

<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>

그리고 이건 괜찮습니다.

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

왜요? 우리가 사용하는 DTD에서는 블록 수준 요소를

안에 배치할 수 없다고 규정하고 일부 브라우저에서는 다음과 같은 쓰기를 허용하기 때문입니다.

This is the Beginning of a Paragraph

태그가 아직 끝나지 않은 경우 다음 블록 요소를 만나면 자동으로 종료됩니다. 실제로 브라우저는 다음과 같이 처리합니다.

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

지금은 그런 방식으로 작성합니다.

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

텍스트 테스트

이것은 첫 번째 예에서

안에

를 넣는 것이 불합리한 것과 같습니다.

그렇다면 어떤 블록 요소를 어떤 요소 안에 넣을 수 없나요? 나는 당신이 이 질문을 가지고 있다는 것을 알고 있으며, 내가 목록을 만든다면 당신이 그 질문을 기억하기 어렵다는 것을 알고 있습니다. 먼저 모든 블록 요소를 여러 레벨로 다시 나눌 수 있습니다. 의 다음 레벨에는

, , 그리고 우리는 시각적 요소가 에만 나타날 것이라는 것을 이미 알고 있으므로 를 첫 번째 수준에 넣은 다음, 무료 중첩 요소는 세 번째 수준에 배치하지 않습니다. , 나머지는 두 번째 수준에 배치됩니다. <p>자유롭게 중첩될 수 없는 요소는 인라인 요소만 포함할 수 있는 요소입니다. 여기에는 제목 태그 </p> <h1>, <h2>, <h3>, <h4>, <h5> , <h6>, <caption> 단락 표시의 <p> 구분선 및 특수 요소 </p> <dt> ;) <p><strong>호환성 참고 사항</strong></p> <p>HTML 4.01에서는 p 요소의 정렬 속성이 더 이상 사용되지 않습니다. XHTML 1.0 Strict DTD에서는 p 요소의 정렬 속성이 지원되지 않습니다. </p> <p>대신 CSS를 사용해 주세요. </p> <p>CSS 구문: </p><pre class="brush:html;toolbar:false">&lt;p style=&quot;text-align:right&quot;&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:html;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:html;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:html;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:html;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> </dt> </caption> </h6> </h5> </h4> </h3> </h2> </h1>

위 내용은 HTML P 태그가 div를 중첩할 수 없는 이유는 무엇입니까? HTML P 태그에 대한 CSS 스타일의 예도 있습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!