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 视频。

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了