HTML 블록 수준 요소에 대한 자세한 설명-HTML 튜토리얼-php.cn

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

高洛峰

풀어 주다： 2017-03-15 12:48:54

원래의

1707명이 탐색했습니다.

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

<p>

h

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

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

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

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

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

<p> [기본 스타일]

//从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;

로그인 후 복사

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

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

로그인 후 복사

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

[기본 스타일]

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> <nav> 요소는 단락 수준 요소 간의 주제 전환을 나타냅니다(예: 단락 내 장면의 변경). 스토리 또는 장 주제의 변경). HTML의 초기 버전에서는 수평선이었습니다. 비주얼 브라우저에서는 여전히 가로선으로 표현될 수 있지만, 현재는 표현 수준이 아닌 의미론적으로 정의되어 있습니다.

<p>

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

로그인 후 복사

를 분할하기 위해

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

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

로그인 후 복사

<p> <hr>

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

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

로그인 후 복사

<p>【기본 스타일】

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

로그인 후 복사

<p>

blockquote

<p> 및

</code> 요소(또는 HTML 블록 수준 </p> quote<p> 요소), 그 안의 텍스트가 인용된 내용임을 나타냅니다. 보통 렌더링을 할 때 이 부분의 내용은 어느 정도 들여쓰기가 됩니다. 인터넷에서 인용한 경우 인용 속성에 원본 콘텐츠의 출처 URL 주소를 설정하면 독자에게 인용 출처를 텍스트 형식으로 알리고 싶은 경우 </p> 요소를 사용할 수 있습니다. <p></p> [참고] 인용 작성자는 인용 <h3><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;"><blockquote cite="http://baike.baidu.com/view/921793.htm">
　　<p>横眉冷对千夫指,俯首甘为孺子牛</p>
</blockquote>    
<p>鲁迅</p>
로그인 후 복사