[翻译] 块级元素(Block-level Elements)

HTML 中元素大多数都是“块级”元素或行内元素。块级元素占据其父元素(容器)的一整行空间,因此创建了一个“块”。这篇文章帮助解释这个概念。

通常浏览器会在块级元素前后另起一个新行,你可以把它们想象成一堆盒子。

A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).

块级元素总是在新的行上开始,并占用可用的全部宽度(尽可能地向左边和右边延伸)。

块级元素示例

<!--HTML-->
<p>This paragraph is a block-level element; its background has been colored to display the paragraph's parent element.</p>
/* CSS */
p { 
    background-color: #8ABB55; 
}

效果如下:

This paragraph is a block-level element; its background has been colored to display the paragraph's parent element.</p>

用法

块级元素只能出现在 元素内。

块级元素与行内元素的区别

块级元素与行内元素有几个关键区别:

格式

默认情况下,块级元素在新行上开始,但是内联元素可以在一行中任何地方开始。

内容模型

一般块级元素可以包含行内元素和其他块级元素。这种结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构。

HTML 标准中块级元素和行内元素的区别至高出现在 4.01 标准中。在 HTML5,这种区别被一个更复杂的内容类别代替。”块级“类别大致相当于 HTML5 中的流内容类别,而”行内“类别相当于 HTML5 中的措辞内容类别,不过除了这两个还有其他类别。

块级元素列表

以下是 HTML 中所有的块级元素列表(虽然”块级“在新的 HTML5 元素中没有明确定义)

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

SHARE THIS PAGE

免责声明:本站文章中的观点都是作者个人观点,并没有以任何方式反映他所属机构的意见。

发表评论