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>
위의 예를 연습하면 효과를 볼 수 있습니다. 여기서는
안에
<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>这样是错误的用法!</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>
로그인 후 복사텍스트 테스트
이것은 첫 번째 예에서
안에 를 넣는 것이 불합리한 것과 같습니다.
그렇다면 어떤 블록 요소를 어떤 요소 안에 넣을 수 없나요? 나는 당신이 이 질문을 가지고 있다는 것을 알고 있으며, 내가 목록을 만든다면 당신이 그 질문을 기억하기 어렵다는 것을 알고 있습니다. 먼저 모든 블록 요소를 여러 레벨로 다시 나눌 수 있습니다. 의 다음 레벨에는
, < ;frameset>, 그리고 우리는 시각적 요소가 에만 나타날 것이라는 것을 이미 알고 있으므로 를 첫 번째 수준에 넣은 다음, 무료 중첩 요소는 세 번째 수준에 배치하지 않습니다. , 나머지는 두 번째 수준에 배치됩니다. 자유롭게 중첩될 수 없는 요소는 인라인 요소만 포함할 수 있는 요소입니다. 여기에는 제목 태그
, , , , , , 단락 표시의 구분선 및 특수 요소
;) 호환성 참고 사항
HTML 4.01에서는 p 요소의 정렬 속성이 더 이상 사용되지 않습니다. XHTML 1.0 Strict DTD에서는 p 요소의 정렬 속성이 지원되지 않습니다.
대신 CSS를 사용해 주세요.
CSS 구문:
<p style="text-align:right">
로그인 후 복사html P 태그의 CSS 스타일 예:
1 " text-left ", " text-right ", " text-center " 속성 제어
위치
<p class="text-left">在左</p>
<p class="text-right">在右</p>
<p class="text-center">居中</p>
로그인 후 복사2.“ text-lowercase ”、“ text-uppercase ”、“ text-capitalize ”属性控制
标签英文内容的大小写
<p class="text-lowercase">hahahahhahahaha都小写</p>
<p class="text-uppercase">hahahahhahahaha都大写</p>
<p class="text-capitalize">hahahahhahahaha首字母大写</p>
로그인 후 복사3.字体:“text-muted ”、“text-info ”、“text-success ”、“text-warning ”、“text-primary ”、“text-danger ”等属性,对不同情况下的内容进行不同颜色的标注
<p class="text-muted">text-muted</p>
<p class="text-info">text-info</p>
<p class="text-success">text-success</p>
<p class="text-warning">text-warning</p>
<p class="text-primary">text-primary</p>
<p class="text-danger">text-danger</p>
로그인 후 복사4.背景:“bg-muted ”、“bg-info ”、“bg-success ”、“bg-warning ”、“bg-primary ”、“bg-danger ”等属性,对不同情况下的内容进行不同颜色背景的标注
<p class="bg-muted">bg-muted</p>
<p class="bg-info">bg-info</p>
<p class="bg-success">bg-success</p>
<p class="bg-warning">bg-warning</p>
<p class="bg-primary">bg-primary</p>
<p class="bg-danger">bg-danger</p>
로그인 후 복사点击这里查看p标签的基础学习文章:html标签是什么元素?关于html p标签的定义和作用详解
【小编的相关推荐】
html noscript标签是什么意思?关于noscript标签的用法你了解多少?
위 내용은 HTML P 태그가 div를 중첩할 수 없는 이유는 무엇입니까? HTML P 태그에 대한 CSS 스타일의 예도 있습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
를 포함할 수 있으며
도 를 포함하는 것은 올바르지만 다음과 같은 경우에는 인라인 요소이므로 잘못된 것입니다. 블록 요소 포함:
<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>
텍스트 테스트
이것은 첫 번째 예에서
를 넣는 것이 불합리한 것과 같습니다.
그렇다면 어떤 블록 요소를 어떤 요소 안에 넣을 수 없나요? 나는 당신이 이 질문을 가지고 있다는 것을 알고 있으며, 내가 목록을 만든다면 당신이 그 질문을 기억하기 어렵다는 것을 알고 있습니다. 먼저 모든 블록 요소를 여러 레벨로 다시 나눌 수 있습니다. 의 다음 레벨에는
, < ;frameset>,자유롭게 중첩될 수 없는 요소는 인라인 요소만 포함할 수 있는 요소입니다. 여기에는 제목 태그
, , , , , , 단락 표시의 구분선 및 특수 요소
;) 호환성 참고 사항
HTML 4.01에서는 p 요소의 정렬 속성이 더 이상 사용되지 않습니다. XHTML 1.0 Strict DTD에서는 p 요소의 정렬 속성이 지원되지 않습니다.
대신 CSS를 사용해 주세요.
CSS 구문:
<p style="text-align:right">
로그인 후 복사html P 태그의 CSS 스타일 예:
1 " text-left ", " text-right ", " text-center " 속성 제어
위치
<p class="text-left">在左</p>
<p class="text-right">在右</p>
<p class="text-center">居中</p>
로그인 후 복사2.“ text-lowercase ”、“ text-uppercase ”、“ text-capitalize ”属性控制
标签英文内容的大小写
<p class="text-lowercase">hahahahhahahaha都小写</p>
<p class="text-uppercase">hahahahhahahaha都大写</p>
<p class="text-capitalize">hahahahhahahaha首字母大写</p>
로그인 후 복사3.字体:“text-muted ”、“text-info ”、“text-success ”、“text-warning ”、“text-primary ”、“text-danger ”等属性,对不同情况下的内容进行不同颜色的标注
<p class="text-muted">text-muted</p>
<p class="text-info">text-info</p>
<p class="text-success">text-success</p>
<p class="text-warning">text-warning</p>
<p class="text-primary">text-primary</p>
<p class="text-danger">text-danger</p>
로그인 후 복사4.背景:“bg-muted ”、“bg-info ”、“bg-success ”、“bg-warning ”、“bg-primary ”、“bg-danger ”等属性,对不同情况下的内容进行不同颜色背景的标注
<p class="bg-muted">bg-muted</p>
<p class="bg-info">bg-info</p>
<p class="bg-success">bg-success</p>
<p class="bg-warning">bg-warning</p>
<p class="bg-primary">bg-primary</p>
<p class="bg-danger">bg-danger</p>
로그인 후 복사点击这里查看p标签的基础学习文章:html标签是什么元素?关于html p标签的定义和作用详解
【小编的相关推荐】
html noscript标签是什么意思?关于noscript标签的用法你了解多少?
위 내용은 HTML P 태그가 div를 중첩할 수 없는 이유는 무엇입니까? HTML P 태그에 대한 CSS 스타일의 예도 있습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
, , , , 단락 표시의 구분선 및 특수 요소
;) 호환성 참고 사항
HTML 4.01에서는 p 요소의 정렬 속성이 더 이상 사용되지 않습니다. XHTML 1.0 Strict DTD에서는 p 요소의 정렬 속성이 지원되지 않습니다.
대신 CSS를 사용해 주세요.
CSS 구문:
<p style="text-align:right">
로그인 후 복사html P 태그의 CSS 스타일 예:
1 " text-left ", " text-right ", " text-center " 속성 제어
위치
<p class="text-left">在左</p>
<p class="text-right">在右</p>
<p class="text-center">居中</p>
로그인 후 복사2.“ text-lowercase ”、“ text-uppercase ”、“ text-capitalize ”属性控制
标签英文内容的大小写
<p class="text-lowercase">hahahahhahahaha都小写</p>
<p class="text-uppercase">hahahahhahahaha都大写</p>
<p class="text-capitalize">hahahahhahahaha首字母大写</p>
로그인 후 복사3.字体:“text-muted ”、“text-info ”、“text-success ”、“text-warning ”、“text-primary ”、“text-danger ”等属性,对不同情况下的内容进行不同颜色的标注
<p class="text-muted">text-muted</p>
<p class="text-info">text-info</p>
<p class="text-success">text-success</p>
<p class="text-warning">text-warning</p>
<p class="text-primary">text-primary</p>
<p class="text-danger">text-danger</p>
로그인 후 복사4.背景:“bg-muted ”、“bg-info ”、“bg-success ”、“bg-warning ”、“bg-primary ”、“bg-danger ”等属性,对不同情况下的内容进行不同颜色背景的标注
<p class="bg-muted">bg-muted</p>
<p class="bg-info">bg-info</p>
<p class="bg-success">bg-success</p>
<p class="bg-warning">bg-warning</p>
<p class="bg-primary">bg-primary</p>
<p class="bg-danger">bg-danger</p>
로그인 후 복사点击这里查看p标签的基础学习文章:html标签是什么元素?关于html p标签的定义和作用详解
【小编的相关推荐】
html noscript标签是什么意思?关于noscript标签的用法你了解多少?
위 내용은 HTML P 태그가 div를 중첩할 수 없는 이유는 무엇입니까? HTML P 태그에 대한 CSS 스타일의 예도 있습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
, , 단락 표시의 구분선 및 특수 요소
;) 호환성 참고 사항
HTML 4.01에서는 p 요소의 정렬 속성이 더 이상 사용되지 않습니다. XHTML 1.0 Strict DTD에서는 p 요소의 정렬 속성이 지원되지 않습니다.
대신 CSS를 사용해 주세요.
CSS 구문:
<p style="text-align:right">
로그인 후 복사html P 태그의 CSS 스타일 예:
1 " text-left ", " text-right ", " text-center " 속성 제어
위치
<p class="text-left">在左</p>
<p class="text-right">在右</p>
<p class="text-center">居中</p>
로그인 후 복사2.“ text-lowercase ”、“ text-uppercase ”、“ text-capitalize ”属性控制
标签英文内容的大小写
<p class="text-lowercase">hahahahhahahaha都小写</p>
<p class="text-uppercase">hahahahhahahaha都大写</p>
<p class="text-capitalize">hahahahhahahaha首字母大写</p>
로그인 후 복사3.字体:“text-muted ”、“text-info ”、“text-success ”、“text-warning ”、“text-primary ”、“text-danger ”等属性,对不同情况下的内容进行不同颜色的标注
<p class="text-muted">text-muted</p>
<p class="text-info">text-info</p>
<p class="text-success">text-success</p>
<p class="text-warning">text-warning</p>
<p class="text-primary">text-primary</p>
<p class="text-danger">text-danger</p>
로그인 후 복사4.背景:“bg-muted ”、“bg-info ”、“bg-success ”、“bg-warning ”、“bg-primary ”、“bg-danger ”等属性,对不同情况下的内容进行不同颜色背景的标注
<p class="bg-muted">bg-muted</p>
<p class="bg-info">bg-info</p>
<p class="bg-success">bg-success</p>
<p class="bg-warning">bg-warning</p>
<p class="bg-primary">bg-primary</p>
<p class="bg-danger">bg-danger</p>
로그인 후 복사点击这里查看p标签的基础学习文章:html标签是什么元素?关于html p标签的定义和作用详解
【小编的相关推荐】
html noscript标签是什么意思?关于noscript标签的用法你了解多少?
위 내용은 HTML P 태그가 div를 중첩할 수 없는 이유는 무엇입니까? HTML P 태그에 대한 CSS 스타일의 예도 있습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
구분선 및 특수 요소
호환성 참고 사항
HTML 4.01에서는 p 요소의 정렬 속성이 더 이상 사용되지 않습니다. XHTML 1.0 Strict DTD에서는 p 요소의 정렬 속성이 지원되지 않습니다.
대신 CSS를 사용해 주세요.
CSS 구문:
<p style="text-align:right">
html P 태그의 CSS 스타일 예:
1 " text-left ", " text-right ", " text-center " 속성 제어
위치
<p class="text-left">在左</p> <p class="text-right">在右</p> <p class="text-center">居中</p>
2.“ text-lowercase ”、“ text-uppercase ”、“ text-capitalize ”属性控制
标签英文内容的大小写
<p class="text-lowercase">hahahahhahahaha都小写</p> <p class="text-uppercase">hahahahhahahaha都大写</p> <p class="text-capitalize">hahahahhahahaha首字母大写</p>
3.字体:“text-muted ”、“text-info ”、“text-success ”、“text-warning ”、“text-primary ”、“text-danger ”等属性,对不同情况下的内容进行不同颜色的标注
<p class="text-muted">text-muted</p> <p class="text-info">text-info</p> <p class="text-success">text-success</p> <p class="text-warning">text-warning</p> <p class="text-primary">text-primary</p> <p class="text-danger">text-danger</p>
4.背景:“bg-muted ”、“bg-info ”、“bg-success ”、“bg-warning ”、“bg-primary ”、“bg-danger ”等属性,对不同情况下的内容进行不同颜色背景的标注
<p class="bg-muted">bg-muted</p> <p class="bg-info">bg-info</p> <p class="bg-success">bg-success</p> <p class="bg-warning">bg-warning</p> <p class="bg-primary">bg-primary</p> <p class="bg-danger">bg-danger</p>
点击这里查看p标签的基础学习文章:html 标签是什么元素?关于html p标签的定义和作用详解
【小编的相关推荐】
html noscript标签是什么意思?关于noscript标签的用法你了解多少?
위 내용은 HTML P 태그가 div를 중첩할 수 없는 이유는 무엇입니까? HTML P 태그에 대한 CSS 스타일의 예도 있습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











HTML의 테이블 테두리 안내. 여기에서는 HTML의 테이블 테두리 예제를 사용하여 테이블 테두리를 정의하는 여러 가지 방법을 논의합니다.

HTML 여백-왼쪽 안내. 여기에서는 HTML margin-left에 대한 간략한 개요와 코드 구현과 함께 예제를 논의합니다.

HTML의 Nested Table에 대한 안내입니다. 여기에서는 각 예와 함께 테이블 내에 테이블을 만드는 방법을 설명합니다.

HTML 테이블 레이아웃 안내. 여기에서는 HTML 테이블 레이아웃의 값에 대해 예제 및 출력 n 세부 사항과 함께 논의합니다.

HTML 입력 자리 표시자 안내. 여기서는 코드 및 출력과 함께 HTML 입력 자리 표시자의 예를 논의합니다.

HTML에서 텍스트 이동 안내. 여기서는 Marquee 태그가 구문과 함께 작동하는 방식과 구현할 예제에 대해 소개합니다.

HTML 순서 목록에 대한 안내입니다. 여기서는 HTML Ordered 목록 및 유형에 대한 소개와 각각의 예에 대해서도 설명합니다.

HTML onclick 버튼에 대한 안내입니다. 여기에서는 각각의 소개, 작업, 예제 및 다양한 이벤트의 onclick 이벤트에 대해 설명합니다.
