Block-level elements - [ HTML 中文开发手册 ] - 在线原生手册

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

目录搜索

Attributes accesskey (attribute) class (attribute) contenteditable (attribute) contextmenu (attribute) data-* (attribute) dir (attribute) draggable (attribute) dropzone (attribute) Global attributes hidden (attribute) id (attribute) itemid (attribute) itemprop (attribute) itemref (attribute) itemscope (attribute) itemtype (attribute) lang (attribute) slot (attribute) spellcheck (attribute) style (attribute) tabindex (attribute) title (attribute) translate (attribute) Elements a abbr address area article aside audio b base bdi bdo blockquote body br button canvas caption cite code col colgroup data datalist dd del details dfn dialog div dl dt em embed fieldset figcaption figure footer form h1 head header hr html i iframe img input input type="button" input type="checkbox" input type="color" input type="date" input type="datetime"-local input type="email" input type="file" input type="hidden" input type="image" input type="month" input type="number" input type="password" input type="radio" input type="range" input type="reset" input type="search" input type="submit" input type="tel" input type="text" input type="time" input type="url" input type="week" ins kbd label legend li link main map mark menu menuitem meta meter nav noscript object ol optgroup option output p param picture pre progress q rp rt rtc ruby s samp script section select slot small source span strong style sub summary sup table tbody td template textarea tfoot th thead time title tr track u ul var video wbr Miscellaneous Attributes Block-level elements CORS enabled image CORS settings attributes Element Inline elements Kinds of HTML content Link types Microdata Optimizing your pages for speculative parsing Preloading content Reference Supported media formats Using the application cache Obsolete acronym applet basefont big blink center command content dir element font frame frameset hgroup image input type="datetime" isindex keygen listing marquee nextid noframes plaintext strike tt xmp

文字

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 视频播放器。