>  기사  >  웹 프론트엔드  >  HTML 블록 수준 요소에 대한 자세한 설명

HTML 블록 수준 요소에 대한 자세한 설명

高洛峰
高洛峰원래의
2017-03-15 12:48:541720검색

이전 단어

HTML5가 등장하기 전에는 일반적으로 요소를 블록 레벨, 인라인, 인라인 블록 요소로 나누었습니다. 이 기사에서는 HTML 블록 수준 요소

h

 에 대해 자세히 소개합니다. 제목(Heading) 요소에는 4a249f0d628e2318394fd9b75b4636b1가 가장 높은 수준이고, 4e9ee319e0fa4abc21ff286eeb145ecc이 가장 낮은 수준입니다.

섹션의 주제를 간략하게 설명하는 제목 요소   4a249f0d628e2318394fd9b75b4636b1부터 4e9ee319e0fa4abc21ff286eeb145ecc까지 중요성이 점차 감소하고 글꼴 크기도 감소합니다. 제목 요소 사용 시 주의할 점

1. 제목의 글꼴을 줄이기 위해 하위 제목을 사용하지 말고 대신 CSS의 font-size 스타일을 사용하세요.

2. 특정 수준의 제목을 건너뛰지 마세요. 항상 4a249f0d628e2318394fd9b75b4636b1으로 시작한 다음 c1a436a314ed609750bd7c7d319db4da 등을 사용하세요.

3. 2f8332c8dcfd5c7dec030a070bf652c3 요소를 사용할 때 다음 항목에 대한 중복을 피하세요. 편의상 페이지에 4a249f0d628e2318394fd9b75b4636b1을 사용할 때에는 페이지 제목을 4a249f0d628e2318394fd9b75b4636b1로 표기하고, 그 외의 제목은 c1a436a314ed609750bd7c7d319db4da부터 시작해야 합니다. 2f8332c8dcfd5c7dec030a070bf652c3을 사용할 때 각 섹션은 c1a436a314ed609750bd7c7d319db4da

[기본 스타일]

//从h1到h6
margin: 0.67em 0 -> 0.83em 0 -> 1em 0 -> 1.33em 0 -> 1.67em 0 -> 2.33em 0;
font-size: 2em -> 1.5em -> 1.17em -> 1em -> 0.83em -> 0.67em;
font-weight: bold;

를 사용해야 하며 HTML5에는 제목을 의미하는 새로운 d8eccd9ed644b68a6460a2bb84548c82 태그가 추가되었습니다. 그룹, 제목을 결합하는 데 사용됩니다. 블록에 여러 수준의 제목이 필요한 경우에만

<hgroup>
    <h1>水果</h1>
    <h2>苹果</h2>
</hgroup>

를 사용하세요. 단락, 이 요소는 일반적으로 세로 공백이나 문자로 구분되어 인접한 텍스트와 분리된 텍스트 블록으로 나타납니다. 첫 줄 들여쓰기

[기본 스타일]

margin: 16px 0;

<p>段落1</p>
<p>段落2</p>
<p>段落3</p>

e388a4556c0f65e1904146cc1a846bee

p

요소(pide)(또는

HTML 문서

파티션 요소)는 특정 콘텐츠 유형을 의미적으로 나타내지 않는 스트리밍 콘텐츠의 일반 컨테이너로,

그룹화

다른 e388a4556c0f65e1904146cc1a846bee 요소에 사용할 수 있으며 일반적으로 스타일 관련 요구 사항에 사용됩니다( class 또는 id 속성) 또는 동일한 특성을 가진 요소 집합을 그룹화하는 요소(예: lang)의 경우 다른 의미 요소를 사용할 수 없는 경우(예: 또는 ) hr23c3de37f2f9ebcb477c4a90aac6fffd  c787b9a589a3ece771e842a6176cf8e9 요소는 단락 수준 요소 간의 주제 전환을 나타냅니다(예: 단락 내 장면의 변경). 스토리 또는 장 주제의 변경). HTML의 초기 버전에서는 수평선이었습니다. 비주얼 브라우저에서는 여전히 가로선으로 표현될 수 있지만, 현재는 표현 수준이 아닌 의미론적으로 정의되어 있습니다.

<p>段落1</p>
<hr>
<p>段落2</p>

를 분할하기 위해

를 사용할 필요는 없습니다. 기본 스타일]

margin: 8px 0;
border-style: inset;
border-width: 1px;

f32b48428a809b51f04d3228cdf461fa

pre

f32b48428a809b51f04d3228cdf461fa f32b48428a809b51f04d3228cdf461fa 요소는 미리 서식이 지정된 텍스트를 나타냅니다. 이 요소의 텍스트는 일반적으로 원본 파일의 형식에 따라 고정 너비 글꼴로 표시됩니다. 텍스트의 공백 문자(예: 공백 및 줄 바꿈)가 표시되며 일반적으로 코드 블록 및 코드 블록과 같은 조판 내용을 나타냅니다. 캐릭터 페인팅 등

<pre class="brush:php;toolbar:false">
body {
  color:red;
}

【기본 스타일】

margin: 1em 0;
white-space: pre;

blockquote

e03b848252eb9375d56be284e690e873 요소(또는 HTML 블록 수준

quote

요소), 그 안의 텍스트가 인용된 내용임을 나타냅니다. 보통 렌더링을 할 때 이 부분의 내용은 어느 정도 들여쓰기가 됩니다. 인터넷에서 인용한 경우 인용 속성에 원본 콘텐츠의 출처 URL 주소를 설정하면 독자에게 인용 출처를 텍스트 형식으로 알리고 싶은 경우

요소를 사용할 수 있습니다.

 [참고] 인용 작성자는 인용

<blockquote cite="http://baike.baidu.com/view/921793.htm">
  <p>横眉冷对千夫指,俯首甘为孺子牛</p>
</blockquote>    
<p>鲁迅</p>

【기본 스타일】

margin: 1em  40px;
b8a712a75cab9a5aded02f74998372b4 주소f3a85e1241a187c5ac462d886e9a968b

요소를 사용하면 작성자가 가장 가까운 또는

상위 요소는 연락처 정보를 제공합니다. 후자의 경우 문서 전체에 적용됩니다

  当表示一个和联系信息无关的任意的地址时,使用e388a4556c0f65e1904146cc1a846bee元素而不是208700f394e4cf40a7aa505373e0130b元素。这个元素不能包含除了联系信息之外的任何信息,比如出版日期(这应该包含在865ebc4a8f40017839ddd62af936776f元素中)。通常,208700f394e4cf40a7aa505373e0130b元素可以放在当前section的c37f8231a37e88427e62669260f0074d元素中,如果存在的话

【默认样式】

font-style: italic;

 

其他

  除了上面介绍的e388a4556c0f65e1904146cc1a846beec8b28895262a62371d18ac056c4442e2e388a4556c0f65e1904146cc1a846beef32b48428a809b51f04d3228cdf461fab8a712a75cab9a5aded02f74998372b4208700f394e4cf40a7aa505373e0130b标签外,还有一些前面已经介绍过的标签属于块级标签

  包括骨架类标签(100db36a723c770d327fc0aef2ce13b16c04bd5ca3fcae76e30b72ad730ca86d),列表类标签(ff6d136ddc5fdfeffaf53ff6ee95f185c34106e0b4e09414b63b2ea253ff83d6def3eed00a09ea710a4bfa4b7fe7477167bc4f89d416b0b8236eaa5f43dee74273de882deff7a050a357292d0a1fca94),表单类标签(<a href="http://www.php.cn/wiki/125.html" target="_blank">for</a>m2b5469ab79cf842344327415c3b3bb95be6d67dae90cc1ad6469079e163d0939e911751791aa3ba95dc724e2fb9059765b7a15bed8615d1b843806256bebea725a07473c87748fb1bf73f23d45547ab8),HTML5新增的结构标签(23c3de37f2f9ebcb477c4a90aac6fffd15221ee8cba27fc1d7a26c47a001eb9b1aa9e5d373740b65a0cc8f0a02150c53c37f8231a37e88427e62669260f0074dc787b9a589a3ece771e842a6176cf8e92f8332c8dcfd5c7dec030a070bf652c3),HTML5新增的多媒体标签(24203f2f45e6606542ba09fd2181843a614eb9dc63b3fb809437a716aa228d24),HTML5新增的功能性标签(631fb227578dfffda61e1fa4d04b7d25a5e9d42b316b6d06c62de0deffc36939)

 

最后

  可能有人会觉得0c6dc11e160d3b678d68754cc175188a标签应该是一个块级元素,因为它有换行,与块级元素的特征很相似。但它实际上是一个内联元素,它的用途是在文本中产生一个换行

위 내용은 HTML 블록 수준 요소에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.