Block-level elements

块级元素

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; }

用法

块级元素可能只出现在<body>元素中。

Block-level vs. inline

块级元素和内联元素之间有几个关键的区别：

格式化默认情况下，块级元素以新行开始，但内联元素可以从行中的任何位置开始。内容模型一般而言，块级元素可能包含内联元素和其他块级元素。在这种结构性区分中固有的概念是块元素创建“更大”的结构比内联元素。

块级和内联元素的区别在4.01以下的HTML规范中使用。在HTML5中，这种二元区别被更复杂的一组内容类别所取代。“块级”类别大致对应于HTML5 中流量内容的类别，而“内联” 类别对应于短语内容，但还有其他类别。

元素

以下是所有HTML块级元素的完整列表（尽管“块级”在技术上未定义为HTML5中新增的元素）。

<address>联系信息。 <article> HTML5 文章内容。 <aside> HTML5 Aside内容。<blockquote>长（“块”）报价。 <canvas> HTML5 绘图画布。<dd>在描述列表中描述一个术语。<div>文档部门。<dl>说明列表。<dt>说明列表术语。<fieldset>字段设置标签。 <figcaption> HTML5 图标题。 <figure> HTML5将媒体内容与标题分组（请参阅<figcaption>）。 <footer> HTML5 部分或页面页脚。<form>输入表单。 <h1>，<h2>，<h3>，<h4>，<h5>，<h6> 标题级别1-6。 <header> HTML5 部分或页面标题。 <hgroup> HTML5 组头信息。<hr>横向规则（分界线）。<li>项目清单。<main>包含此文档特有的中央内容。<nav>包含导航链接。 <noscript>不支持或关闭脚本的内容。<ol>有序列表。 <output> HTML5 表单输出。<p>段。<pre>预先格式化的文本。网页的<section> HTML5部分。<table>表。<tfoot>表页脚。<ul>无序列表。 <video> HTML5 视频播放器。