<span>与<div>标签

最新推荐文章于 2023-12-28 13:59:34 发布

Flora1108

最新推荐文章于 2023-12-28 13:59:34 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端学习文章标签： html 标签

本文链接：https://blog.youkuaiyun.com/weixin_39480464/article/details/78530066

前端学习专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了HTML中div和span两个标签的区别与应用场景。div作为块级元素主要用于页面布局，而span作为行内元素则常用于局部样式调整。通过实例展示了两者在实际网页制作中的运用。

HTML只是赋予内容的手段，大部分HTML标签都有其意义（如<p>标签创建段落，<h1>标签创建标题等），然而<span>标签和<div>标签没有实际上的意义，但实际上，与CSS结合起来后，应用范围就非常广泛了。

它们被用来组合成一大块的HTML代码并赋予一定的信息，大部分的用类属性class和标记属性id与元素联系起来。

1、<span>标签和<div>标签的相同之处

<span>标签和<div>标签非常类似，是HTML中组合用的标签，可以作为插入CSS这类风格的容器，或插入class.id等语法内容的容器。

<div id="client-boyera" class="client">
    <p><span class="client-title">client information:</span></p>
    <table class="client-data">
        <tr>
            <th>last name:</th>
            <td>boyera</td>
        </tr>
        <tr>
            <th>first name:</th>
            <td>stephane</td>
        </tr>
        <tr>
            <th>tel:</th>
            <td>0431-123456</td>
        </tr>
    </table>
</div>

2、<span>标签和<div>标签的区别

div（division）是一个块级元素，可以包含段落、标题、表格，乃至诸如章节、摘要和备注等。而span是行内元素，span的前后是不会换行的，它没有结构的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用span。

从功能角度来说，<div>一般用来做布局，而<span>标签用来做文字的效果，尤其是标题和链接的效果，所以我们经常会看见诸如<h1 class=”…”><span>…</span></h1>之类的代码。

不过，块级元素和行内元素也不是一成不变的，只要给块元素定义display：inline，块元素便成为内嵌元素；同样，给内嵌元素定义display：block后，内嵌元素便成为块元素。block和inline的区别主要有内容模型（Content model）、格式(formatting)和Directionality（如何处理两种语言混合在一起的Unicode码）。

例如：<div>…</div>是块，<span>…</span>是行，块里可以含行，即div里可以有span行。
</div>显示时（分块结束处），系统自动换行，而</span>不换行。

例如，当使用<div>标签时，代码如下。

<p>aaaaaaaa<div>bbbbbbb</div><div>ccccccc</div></p>

运行结果：

aaaaaaaa

bbbbbbb
ccccccc

当使用<span>标签时，代码如下。

<p>aaaaaaaa<span>bbbbbbb</span><span>ccccccc</span></p>

运行结果：

aaaaaaaabbbbbbbccccccc