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
118
119
120
121
122
123
124
125
126
127
128
129
130
|
---
title: 區塊級元素
slug: Web/HTML/Block-level_elements
translation_of: Web/HTML/Block-level_elements
---
<p><span class="seoSummary">HTML (</span>超文字標記語言, <span class="seoSummary"><strong>Hypertext Markup Language</strong>) 元素通常為 "區塊級" 元素或是 <a href="/en-US/docs/HTML/Inline_elements" title="/en-US/docs/HTML/inline_elements">"行內" 元素</a>。 一個區塊級元素會藉由建立"區塊"的動作, 完全佔滿其父元素(容器)的空間。本文將為您說明其意涵.</span></p>
<p>瀏覽器預設以在元素前後換行的方式, 表現區塊級元素. 視覺上會呈現為一排縱向堆疊的方塊。</p>
<div class="note">
<p>區塊級元素必定以換行方式, 取得完整寬度的空間(向左右兩側儘可能地延伸出去)。</p>
</div>
<p>以下範例將展示區塊級元素的影響:</p>
<h2 id="Block-level_Example" name="Block-level_Example">區塊級元素</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><p>This paragraph is a block-level element; its background has been colored to display the paragraph's parent element.</p></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="區塊級_vs._行內元素">區塊級 vs. 行內元素</h2>
<p>There are a couple of key differences between block-level elements and inline elements:</p>
<dl>
<dt>Formatting</dt>
<dd>By default, block-level elements begin on new lines, but inline elements can start anywhere in a line.</dd>
<dt>Content model</dt>
<dd>Generally, block-level elements may contain inline elements and other block-level elements. Inherent in this structural distinction is the idea that block elements create "larger" structures than inline elements.</dd>
</dl>
<p>The distinction of block-level vs. inline elements is used in HTML specifications up to 4.01. In HTML5, this binary distinction is replaced with a more complex set of <a href="/en-US/docs/HTML/Content_categories" title="/en-US/docs/HTML/Content_categories">content categories</a>. The "block-level" category roughly corresponds to the category of <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="/en-US/docs/HTML/Content_categories#Flow_content">flow content</a> in HTML5, while "inline" corresponds to <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>, but there are additional categories.</p>
<h2 id="相關元素">相關元素</h2>
<p>The following is a complete list of all HTML block level elements (although "block-level" is not technically defined for elements that are new in HTML5).</p>
<div class="threecolumns">
<dl>
<dt>{{ HTMLElement("address") }}</dt>
<dd>Contact information.</dd>
<dt>{{ HTMLElement("article") }} {{ HTMLVersionInline(5) }}</dt>
<dd>Article content.</dd>
<dt>{{ HTMLElement("aside") }} {{ HTMLVersionInline(5) }}</dt>
<dd>Aside content.</dd>
<dt>{{ HTMLElement("blockquote") }}</dt>
<dd>Long ("block") quotation.</dd>
<dt>{{ HTMLElement("canvas") }} {{ HTMLVersionInline(5) }}</dt>
<dd>Drawing canvas.</dd>
<dt>{{ HTMLElement("dd") }}</dt>
<dd>Describes a term in a description list.</dd>
<dt>{{ HTMLElement("div") }}</dt>
<dd>Document division.</dd>
<dt>{{ HTMLElement("dl") }}</dt>
<dd>Description list.</dd>
<dt>{{ HTMLElement("dt") }}</dt>
<dd>Description list term.</dd>
<dt>{{ HTMLElement("fieldset") }}</dt>
<dd>Field set label.</dd>
</dl>
<dl>
<dt>{{ HTMLElement("figcaption") }} {{ HTMLVersionInline(5) }}</dt>
<dd>Figure caption.</dd>
<dt>{{ HTMLElement("figure") }} {{ HTMLVersionInline(5) }}</dt>
<dd>Groups media content with a caption (see {{ HTMLElement("figcaption") }}).</dd>
<dt>{{ HTMLElement("footer") }} {{ HTMLVersionInline(5) }}</dt>
<dd>Section or page footer.</dd>
<dt>{{ HTMLElement("form") }}</dt>
<dd>Input form.</dd>
<dt>{{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}</dt>
<dd>Heading levels 1-6.</dd>
<dt>{{ HTMLElement("header") }} {{ HTMLVersionInline(5) }}</dt>
<dd>Section or page header.</dd>
<dt>{{ HTMLElement("hgroup") }} {{ HTMLVersionInline(5) }}</dt>
<dd>Groups header information.</dd>
<dt>{{ HTMLElement("hr") }}</dt>
<dd>Horizontal rule (dividing line).</dd>
<dt>{{ HTMLElement("li") }}</dt>
<dd>List item.</dd>
<dt>{{ HTMLElement("main") }}</dt>
<dd>Contains the central content unique to this document.</dd>
<dt>{{ HTMLElement("nav") }}</dt>
<dd>Contains navigation links.</dd>
</dl>
<dl>
<dt>{{ HTMLElement("noscript") }}</dt>
<dd>Content to use if scripting is not supported or turned off.</dd>
<dt>{{ HTMLElement("ol") }}</dt>
<dd>Ordered list.</dd>
<dt>{{ HTMLElement("output") }} {{ HTMLVersionInline(5) }}</dt>
<dd>Form output.</dd>
<dt>{{ HTMLElement("p") }}</dt>
<dd>Paragraph.</dd>
<dt>{{ HTMLElement("pre") }}</dt>
<dd>Preformatted text.</dd>
<dt>{{ HTMLElement("section") }} {{ HTMLVersionInline(5) }}</dt>
<dd>Section of a web page.</dd>
<dt>{{ HTMLElement("table") }}</dt>
<dd>Table.</dd>
<dt>{{ HTMLElement("tfoot") }}</dt>
<dd>Table footer.</dd>
<dt>{{ HTMLElement("ul") }}</dt>
<dd>Unordered list.</dd>
<dt>{{ HTMLElement("video") }} {{ HTMLVersionInline(5) }}</dt>
<dd>Video player.</dd>
</dl>
</div>
<h3 id="See_also" name="See_also"><br>
參閱</h3>
<ul>
<li><a href="/en-US/docs/Web/HTML/Inline_elements" title="en/HTML/Inline_elements">行內元素</a></li>
</ul>
|
