HTML的块级元素与行内元素

在HTML中,元素可以分为两大类:块级元素(block-level elements)和行内元素(inline elements)。这两种类型的元素在网页布局和呈现中扮演着不同的角色。

块级元素(Block-level Elements)

  • 定义:块级元素通常会在新的一行开始,并且占据整个行的宽度。它们可以包含其他块级元素或行内元素。

  • 特点

    • 自动换行:每个块级元素都在其前后生成换行。
    • 可设置宽度和高度:可以通过CSS设置它们的宽度和高度。
    • 通常用于布局和分组其他元素。
  • 常见的块级元素

    • <div>:通用容器
    • <h1> - <h6>:标题元素
    • <p>:段落
    • <ul><ol>:无序和有序列表
    • <li>:列表项
    • <header><footer><section><article><nav>:HTML5语义元素

行内元素(Inline Elements)

  • 定义:行内元素不会在新的一行开始,而是与其他行内元素和文本在同一行内显示。它们只占据其内容所需的宽度。

  • 特点

    • 不会产生换行:行内元素不会在其前后产生换行。
    • 不能设置宽度和高度:行内元素的宽度和高度通常由其内容决定,无法通过CSS设置。
    • 通常用于修饰文本或小型元素。
  • 常见的行内元素

    • <span>:通用的行内容器
    • <a>:链接
    • <strong>:强调文本(通常为粗体)
    • <em>:强调文本(通常为斜体)
    • <img>:图像
    • <br>:换行
    • <code>:代码片段

代码示例:

html 复制代码
<!DOCTYPE html>
<html>
<head>
    <title>块级元素与行内元素</title>
    <style>
        .block {
            background-color: lightblue;
            margin: 10px;
            padding: 10px;
        }
        .inline {
            background-color: lightgreen;
            margin: 5px;
            padding: 5px;
        }
    </style>
</head>
<body>

<div class="block">
    这是一个块级元素(div)。
    <span class="inline">这是一个行内元素(span)。</span>
    继续在同一行。
</div>

<p class="block">这是另一个块级元素(p)。</p>

<a href="#" class="inline">这是一个行内链接(a)。</a>

</body>
</html>
相关推荐
爱泡脚的鸡腿7 分钟前
HTML CSS 第二次笔记
前端·css
灯火不休ᝰ23 分钟前
前端处理pdf文件流,展示pdf
前端·pdf
智践行25 分钟前
Trae开发实战之转盘小程序
前端·trae
最新资讯动态31 分钟前
DialogHub上线OpenHarmony开源社区,高效开发鸿蒙应用弹窗
前端
lvbb6640 分钟前
框架修改思路
前端·javascript·vue.js
树上有只程序猿43 分钟前
Java程序员需要掌握的技术
前端
从零开始学安卓1 小时前
Kotlin(三) 协程
前端
阿镇吃橙子1 小时前
一些手写及业务场景处理问题汇总
前端·算法·面试
庸俗今天不摸鱼1 小时前
【万字总结】前端全方位性能优化指南(九)——FSP(First Screen Paint)像素级分析、RUM+合成监控、Lighthouse CI
前端·性能优化