HTML 块级元素
HTML块级元素
HTML(超文本标记语言)中元素大多数都是“块级”元素或行内元素。块级元素占据其父元素(容器)的整个空间,因此创建了一个“块”。这篇文章帮助解释这个概念。
通常浏览器会在块级元素前后另起一个新行。下面的例子表明了块级元素的作用:
块级元素示例
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.
用法
块级元素只能出现在 <body>
元素内。
块级元素与行内元素
块级元素与行内元素有几个关键区别:
- 格式
- 默认情况下,块级元素会新起一行。
- 内容模型
- 一般块级元素可以包含行内元素和其他块级元素。这种结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构。
HTML 标准中块级元素和行内元素的区别至高出现在 4.01 标准中。在 HTML5,这种区别被一个更复杂的内容类别代替。”块级“类别大致相当于 HTML5 中的流内容类别,而”行内“类别相当于 HTML5 中的措辞内容类别,不过除了这两个还有其他类别。
元素列表
以下是 HTML 中所有的块级元素列表(虽然”块级“在新的 HTML5 元素中没有明确定义)
标签 | 说明 |
---|---|
<address> |
联系方式信息。 |
<article> HTML5 |
文章内容。 |
<aside> HTML5 |
伴随内容。 |
<audio> HTML5 |
音频播放。 |
<blockquote> |
块引用。 |
<canvas> HTML5 |
绘制图形。 |
<dd> |
定义列表中定义条目描述。 |
<div> |
文档分区。 |
<dl> |
定义列表。 |
<fieldset> |
表单元素分组。 |
<figcaption> HTML5 |
图文信息组标题 |
<figure> HTML5 |
图文信息组 (参照 <figcaption> ](/))。 |
<footer> HTML5 |
区段尾或页尾。 |
<form> |
表单。 |
<h1>...<h6> |
标题级别 1-6. |
<header> HTML5 |
区段头或页头。 |
<hgroup> HTML5 |
标题组。 |
<hr> |
水平分割线。 |
<noscript> |
不支持脚本或禁用脚本时显示的内容。 |
<ol> |
有序列表。 |
<output> HTML5 |
表单输出。 |
<p> |
行。 |
<pre> |
预格式化文本。 |
<section> HTML5 |
一个页面区段。 |
<table> |
表格。 |
<tfoot> |
表脚注。 |
<ul> |
无序列表。 |
<video> HTML5 |
视频。 |