files/zh-cn/web/html/block-level_elements/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117

---
title: 块级元素
slug: Web/HTML/Block-level_elements
tags:
  - HTML
  - Web 开发
  - 初学者
  - 指南
translation_of: Web/HTML/Block-level_elements
---
<p>HTML（超文本标记语言）中元素大多数都是“块级”元素或<a href="/zh-CN/docs/HTML/Inline_elements" title="/zh-CN/docs/HTML/Inline_elements">行内元素</a>。块级元素占据其父元素（容器）的整个空间，因此创建了一个“块”。这篇文章帮助解释这个概念。</p>

<p>通常浏览器会在块级元素前后另起一个新行。下面的例子表明了块级元素的作用：</p>

<h2 id="Block-level_Example" name="Block-level_Example">块级元素示例</h2>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;p&gt;This paragraph is a block-level element; its background has been colored to display the paragraph's parent element.&lt;/p&gt;</pre>

<h3 id="CSS">CSS</h3>

<pre class="brush: css">p { background-color: #8ABB55; }
</pre>

<p>{{ EmbedLiveSample('Block-level_Example') }}</p>

<h2 id="用法">用法</h2>

<ul>
 <li>块级元素只能出现在 {{ HTMLElement("body") }} 元素内。</li>
</ul>

<h2 id="块级元素与行内元素">块级元素与行内元素</h2>

<p>块级元素与行内元素有几个关键区别：</p>

<dl>
 <dt>格式</dt>
 <dd>默认情况下，块级元素会新起一行。</dd>
 <dt>内容模型</dt>
 <dd>一般块级元素可以包含行内元素和其他块级元素。这种结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构。</dd>
</dl>

<p>HTML 标准中块级元素和行内元素的区别至高出现在 4.01 标准中。在 HTML5，这种区别被一个更复杂的<a href="/zh-CN/docs/HTML/Content_categories" title="/zh-CN/docs/HTML/Content_categories">内容类别</a>代替。”块级“类别大致相当于 HTML5 中的<a href="/zh-CN/docs/HTML/Content_categories#Flow_content" title="/zh-CN/docs/HTML/Content_categories#Flow_content">流内容</a>类别，而”行内“类别相当于 HTML5 中的<a href="/zh-CN/docs/HTML/Content_categories#Phrasing_content" title="/zh-CN/docs/HTML/Content_categories#Phrasing_content">措辞内容</a>类别，不过除了这两个还有其他类别。</p>

<h2 id="元素列表">元素列表</h2>

<p>以下是 HTML 中所有的块级元素列表（虽然”块级“在新的 HTML5 元素中没有明确定义）</p>

<div class="threecolumns">
<dl>
 <dt>{{ HTMLElement("address") }}</dt>
 <dd>联系方式信息。</dd>
 <dt>{{ HTMLElement("article") }} {{ HTMLVersionInline(5) }}</dt>
 <dd>文章内容。</dd>
 <dt>{{ HTMLElement("aside") }} {{ HTMLVersionInline(5) }}</dt>
 <dd>伴随内容。</dd>
 <dt>{{ HTMLElement("audio") }} {{ HTMLVersionInline(5) }}</dt>
 <dd>音频播放。</dd>
 <dt>{{ HTMLElement("blockquote") }}</dt>
 <dd>块引用。</dd>
 <dt>{{ HTMLElement("canvas") }} {{ HTMLVersionInline(5) }}</dt>
 <dd>绘制图形。</dd>
 <dt>{{ HTMLElement("dd") }}</dt>
 <dd>定义列表中定义条目描述。</dd>
 <dt>{{ HTMLElement("div") }}</dt>
 <dd>文档分区。</dd>
 <dt>{{ HTMLElement("dl") }}</dt>
 <dd>定义列表。</dd>
 <dt>{{ HTMLElement("fieldset") }}</dt>
 <dd>表单元素分组。</dd>
 <dt>{{ HTMLElement("figcaption") }} {{ HTMLVersionInline(5) }}</dt>
 <dd>图文信息组标题</dd>
 <dt>{{ HTMLElement("figure") }} {{ HTMLVersionInline(5) }}</dt>
 <dd>图文信息组 (参照 {{ HTMLElement("figcaption") }})。</dd>
 <dt>{{ HTMLElement("footer") }} {{ HTMLVersionInline(5) }}</dt>
 <dd>区段尾或页尾。</dd>
 <dt>{{ HTMLElement("form") }}</dt>
 <dd>表单。</dd>
 <dt>{{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}</dt>
 <dd>标题级别 1-6.</dd>
 <dt>{{ HTMLElement("header") }} {{ HTMLVersionInline(5) }}</dt>
 <dd>区段头或页头。</dd>
 <dt>{{ HTMLElement("hgroup") }} {{ HTMLVersionInline(5) }}</dt>
 <dd>标题组。</dd>
 <dt>{{ HTMLElement("hr") }}</dt>
 <dd>水平分割线。</dd>
 <br>
 <dt>{{ HTMLElement("noscript") }}</dt>
 <dd>不支持脚本或禁用脚本时显示的内容。</dd>
 <dt>{{ HTMLElement("ol") }}</dt>
 <dd>有序列表。</dd>
 <dt>{{ HTMLElement("output") }} {{ HTMLVersionInline(5) }}</dt>
 <dd>表单输出。</dd>
 <dt>{{ HTMLElement("p") }}</dt>
 <dd>行。</dd>
 <dt>{{ HTMLElement("pre") }}</dt>
 <dd>预格式化文本。</dd>
 <dt>{{ HTMLElement("section") }} {{ HTMLVersionInline(5) }}</dt>
 <dd>一个页面区段。</dd>
 <dt>{{ HTMLElement("table") }}</dt>
 <dd>表格。</dd>
 <dt>{{ HTMLElement("tfoot") }}</dt>
 <dd>表脚注。</dd>
 <dt>{{ HTMLElement("ul") }}</dt>
 <dd>无序列表。</dd>
 <dt>{{ HTMLElement("video") }} {{ HTMLVersionInline(5) }}</dt>
 <dd>视频。</dd>
</dl>
</div>

<h3 id="See_also" name="See_also">另请参阅</h3>

<ul>
 <li><a href="/zh-CN/docs/Web/HTML/Inline_elements" title="/zh-CN/docs/HTML/Inline_elements">行内元素</a></li>
</ul>