HTML中div与span标签的区别(带图)

HTML中div与span标签的区别(带图)

   html的div和span, 经常会用到, 尤其是前者。

        1. div是块级元素, 实际上就是一个区域, 主要用于容纳其他标签。 默认的display属性是block

        2. span是行内元素, 主要用于容纳文字。 默认的display属性是inline

测试代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
        div{
            background: red;
        }
        span{
            background: red;
        }
    </style>
</head>

<body>
<p>测试</p>
<span >我是span,行内元素</span>
<div>我是div,块级元素</div>
</body>
</html>

区别如图所示:

HTML中div与span标签的区别(带图)

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/114753.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • inline函数的使用和理解

    inline函数的使用和理解在 C 中 inline 函数是一种比较小巧的函数 将函数声明为 inline 该函数就成为内联函数 内联函数使函数的调用成本大大降低 因为编译器通常会对内联函数进行优化 如果 inline 函数的本体很小 编译器对内联函数的优化会使编译后产生的目标码比不使用内联函数产生的目标码更小 编译器对内联函数一般都是对每一个调用到该内联函数的地方都以函数本体替换 所以也使其执行速率大大提高 但如果

    2025年11月19日
    4
  • java_简易画图板

    java_简易画图板下面我将分享用Java制作简易画图板的过程。version1Draw.javaJava代码importjavax.swing.JFrame;/****@authoryangzhenlin*

    2022年7月2日
    22
  • 电脑word文档图标变了怎么办_word图标变成白纸

    电脑word文档图标变了怎么办_word图标变成白纸当我们在使用word文档的时候,可能会遇到word文档图标显示异常的情况,那么这个时候我们该怎么办?下面是学习啦小编整理的word文档图标显示异常的解决方法,供您参考。word文档图标显示异常的解决方法一点击“开始”菜单,输入“运行”并搜索。点击“运行”。输入regedit,然后点击确定。双击打开HKEY_CLASSES_ROOT。找到.docx,鼠标右击,选择删除。用同样的方法依次打开HKEY…

    2022年9月25日
    5
  • CAN通信(一)——认识CAN总线[通俗易懂]

    CAN总线通俗易懂CAN总线背景CAN总线是什么网络拓扑节点、报文、信号CAN总线背景作为并非通信专业的土鳖汽车工程师,CAN通信是必须掌握的,但是,记得刚开始上来一看什么定义(什么串行数据通信协议,什么物理层和数据链路层功能,什么帧处理,位填充。。。刚学的时候确实一脸懵)。所以,我只从汽车工程师的角度讲讲我能理解和用得到的CAN通信,才疏学浅,请各位指教!关于OSI模型、物理层、数据链路层,高低电平、数据帧。。等等等,请自行查看如下链接:链接:https://blog.csdn.net/kgc

    2022年4月11日
    69
  • idea安装教程csdn_灯具安装教程

    idea安装教程csdn_灯具安装教程一、下载百度搜索“idea下载”后点进下载网页,如图示直接点击右手边黑色的下载,其余不动二、安装下载完成后建议即刻打开运行,一路next到安装路径,尽量选择C盘以外的盘(这里我想说懂的都懂,不懂就按着做),如果不知道放哪个文件夹可新建个soft专门放应用完成后继续next,第一个32/64按照自己系统类型选择(右击此电脑,点击属性,在关于界面的设备规格里可查看),这里直接勾选64即可。其余都可不选。后面继续next和install加载完成后勾选运行,再点击结…

    2022年10月2日
    4
  • Java AbstractMethodError 原因分析

    Java AbstractMethodError 原因分析背景AbstractMethodError异常对于我来说还是比较不常遇见的,最近有幸遇到,并侥幸的解决了,在这里把此种场景剖析一番,进入正题,下面是AbstractMethodError在Java的异常机制中所处的位置:现在明确了AbstractMethodError所具有的特性:1.它是Error的子类,Error类及其子类都是被划分在非检查异常之列的,就是说这些异常不能在编译阶…

    2022年6月2日
    37

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号