HTML块级元素及行内元素

KuaiKan 2021-7-25 722

在 HTML 中,标签(tag)通常又被称作元素(element)。例如 <a> 标签又叫做 <a> 元素,<p> 标签也叫作 <p> 元素。

HTML 元素根据其表现形式可以分为 2 种:

  • 块级元素

  • 行内元素

任何 HTML 元素都属于这两者中的任意一种。

提示:块级元素和行内元素的概念极其重要,同时也是学习 CSS 的基础知识之一,请读者不要忽略。

1. 块级元素

块级元素(block element)在浏览器中占据整行,并排斥其它元素与其位于同一行。也就是说,块级元素的宽度是 100%。常见的块级元素如下表:

块级元素

块级元素说明
div最典型的块元素
p表示段落
h1-h6表示1-6级标题(默认加粗)
br表示换行
ol有序列表
ul无序列表

2. 行内元素

行内元素又称内联元素(inline block)。在浏览器中可以与其它行内元素共占一行,只有当多个元素的总宽度大于浏览器的宽度时,才会换行显示。常见的行内元素如下表:

行内元素

行内元素说明
a超链接
span常用行级
strong加粗,强调
b加粗,不强调
em斜体,强调
i斜体,不强调
img图片
input输入框
select下拉列表

1) 实例演示

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>块元素与行内元素</title>
</head>
<body>
    <div>div标签(块级标签)</div>
    <p>p标签(块级标签)</p>
    <span>span标签(行内标签)</span>
    <a href="#">a标签(行内标签)</a>
</body>
</html>

在浏览器中运行效果如下:


div标签(块级标签)

p标签(块级标签)

span标签(行内标签)a标签(行内标签)


通过运行结果可以发现,<div> 标签和 <p> 标签分别独占一行,因为它们是块级元素;而 <span> 标签和 <a> 标签在同一行中显示,因为它们是行内元素。

注意,这里我们说的独占一行是指元素在浏览器中的运行效果,并不是在编辑器中独占一行。在编辑器中,不论怎么书写代码,都不会影响它在浏览器中的运行效果。

3. 元素的嵌套

HTML 中的各个元素之间是可以互相嵌套的,例如:

  • 块元素可以嵌套块元素

  • 块元素可以嵌套行内元素

  • 行内元素可以嵌套行内元素

  • 行内元素可以嵌套块元素

值得注意的是我们不建议行内元素中嵌套块元素,这样不仅不符合开发规范,还会导致行内元素也独占一行。

下面来看一段元素之间互相嵌套的代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素间的嵌套</title>
</head>
<body>
    <!-- 块级元素嵌套块级元素 -->
    <div>
        <p>p标签(块级元素)</p>
        <div>div标签(块级元素)</div>
    </div>
    <!-- 块级元素嵌套行内元素 -->
    <div>
        <span>span标签(行内元素)</span>
    </div>
    <!-- 行内元素嵌套 -->
    <span>
        <span>span标签(行内元素)</span>
        <a href="#">a标签(行内元素)</a>
    </span>
</body>
</html>

浏览器运行效果如下:


p标签(块级元素)

div标签(块级元素)
span标签(行内元素)

span标签(行内元素) a标签(行内元素)


4. 总结

  1. 块级元素的宽度是 100%,在浏览器中默认独占一行

  2. 行内元素在浏览器中默认与其它行内元素共占一行。只有当多个行内元素的总宽度大于浏览器的宽度时,才会换行显示。

  3. 块级元素内部可以嵌套块级元素或行内元素。

  4. 建议行内元素里面只嵌套行内元素。


签名:这个人很懒,什么也没有留下!
最新回复 (0)
返回