From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001
From: Peter Bengtsson <mail@peterbe.com>
Date: Tue, 8 Dec 2020 14:40:17 -0500
Subject: initial commit

---
 .../zh-cn/web/html/block-level_elements/index.html | 117 +++++++++++++++++++++
 1 file changed, 117 insertions(+)
 create mode 100644 files/zh-cn/web/html/block-level_elements/index.html

(limited to 'files/zh-cn/web/html/block-level_elements')

diff --git a/files/zh-cn/web/html/block-level_elements/index.html b/files/zh-cn/web/html/block-level_elements/index.html
new file mode 100644
index 0000000000..77db95f538
--- /dev/null
+++ b/files/zh-cn/web/html/block-level_elements/index.html
@@ -0,0 +1,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>
-- 
cgit v1.2.3-54-g00ecf