行内元素、块级元素、空(void)元素分别有哪些?

行内元素、块级元素、空(void)元素分别有哪些?

在前端开发中,HTML元素可以分为行内元素、块级元素和空(void)元素。以下是这些元素的分类和示例:

行内元素

行内元素(也称为内联元素)不占有独立的区域,它们仅仅依靠自己的字体大小或图像大小来支撑结构。行内元素通常不会独占一行,而是和其他行内元素并排显示。以下是一些常见的行内元素:

a:超链接

span:用于组合文档内容

strong、b:强调文本,显示为粗体

em、i:定义斜体文本

label:定义表单控件的标签

img:定义图像(特殊,可以设置宽高)

input、select、textarea、button:定义表单控件

abbr:定义缩写词

cite:定义引用

code:定义计算机代码文本

big、small:定义较大或较小的文本

sub、sup:定义下标或上标文本

块级元素

块级元素通常会独占一行或多行,可以对其单独设置高度、宽度以及对齐等属性。块级元素是一个容器,可以容纳内联元素和其他的块级元素。以下是一些常见的块级元素:

div:用于组合文档内容

p:定义段落

h1-h6:定义标题,级别从高到低

form:定义用于用户输入的表单

ul、ol、dl:分别定义无序列表、有序列表和定义列表

dt、dd:分别定义列表中的项目和描述

li:定义列表项

table、tr、td、th:定义表格及其行、单元格和表头单元格

hr:定义主题之间的分隔线

blockquote:定义长的引用

address:定义地址信息

menu:定义菜单列表

pre:定义预格式化的文本

空(void)元素

空元素是没有内容的HTML元素,它们在开始标签中就已经关闭,无法包含任何子元素。以下是一些常见的空元素:

input:定义输入控件(尽管在某些上下文中,它可能通过JavaScript动态地获得内容或值,但从HTML结构的角度来看,它仍然是一个空元素)

img:定义图像(同样,虽然它显示图像,但不包含任何HTML内容)

link:定义文档与外部资源的关系(通常用于链接样式表)

meta:提供有关HTML文档的元数据

br:插入一个简单的换行符

hr:定义主题之间的分隔线(在某些情况下,也可以视为块级元素,但从其不包含内容的角度来看,它也可以被视为空元素)

请注意,虽然img、input和td等元素在某些方面表现出与行内元素或块级元素相似的特性(例如可以设置宽高),但它们在HTML规范中被定义为空元素,因为它们不能包含任何子元素。同时,HTML和CSS的不断发展可能会引入新的元素或改变现有元素的分类和行为,因此建议定期查阅最新的官方文档或相关资源以获取最准确的信息。

相关探索