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

이전 단어

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

h

 에 대해 자세히 소개합니다. 제목(Heading) 요소에는 <h1></h1>가 가장 높은 수준이고, <h6></h6>이 가장 낮은 수준입니다.

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

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

2. 특정 수준의 제목을 건너뛰지 마세요. 항상 <h1></h1>으로 시작한 다음 <h2></h2> 등을 사용하세요.

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

[기본 스타일]

//从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에는 제목을 의미하는 새로운 <hgroup></hgroup> 태그가 추가되었습니다. 그룹, 제목을 결합하는 데 사용됩니다. 블록에 여러 수준의 제목이 필요한 경우에만

<hgroup>
    <h1 id="水果">水果</h1>
    <h2 id="苹果">苹果</h2>
</hgroup>

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

[기본 스타일]

margin: 16px 0;

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

<p></p>

p<p></p> 

요소(pide)(또는

HTML 문서

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

그룹화

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

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

를 분할하기 위해

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

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

<hr>

pre

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

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

【기본 스타일】

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

blockquote

및 <pre class="brush:php;toolbar:false"></pre> 요소(또는 HTML 블록 수준

quote

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

요소를 사용할 수 있습니다. <p></p> [참고] 인용 작성자는 인용

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

【기본 스타일】

margin: 1em  40px;

<blockquote></blockquote> 주소<cite></cite>

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

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

  当表示一个和联系信息无关的任意的地址时，使用<p></p>元素而不是<address></address>元素。这个元素不能包含除了联系信息之外的任何信息，比如出版日期(这应该包含在time>元素中)。通常，<address></address>元素可以放在当前section的<footer></footer>元素中，如果存在的话

【默认样式】

font-style: italic;

 

其他

  除了上面介绍的<p></p>、<h></h>、<p></p>、<hr>、<blockquote></blockquote>、<address></address>标签外，还有一些前面已经介绍过的标签属于块级标签

  包括骨架类标签(、)，列表类标签(<ul></ul>、<ol></ol>、dl>、<dd></dd>、<dt></dt>)，表单类标签(<a href="http://www.php.cn/wiki/125.html" target="_blank">for</a>m、<fieldset></fieldset>、<output></output>、<legend></legend>、<optgroup></optgroup>、<option></option>)，HTML5新增的结构标签(<article></article>、<aside></aside>、<header></header>、<footer></footer>、<nav></nav>、<section></section>)，HTML5新增的多媒体标签(<figure></figure>、<figcaption></figcaption>)，HTML5新增的功能性标签(<summary></summary>、<details></details>)

 

最后

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

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