文章の目录

• 1、什么是div标签和span标签
• 2、基本语法格式
• 3、常见的属性
• 4、浏览器兼容性
• 5、使用场景
• 6、总结
• 写在最后

---

div 和 span 是没有语义的，是我们网页布局主要的2个盒子，想必你一定听过 css + div。

div 是 division 的缩写，具有分割、分区的意思。
span，具有跨度，跨距，范围的意思。

1、什么是div标签和span标签

<div> 标签（或 HTML 文档分区元素）是一个通用型的流内容容器，在不使用 CSS 的情况下，其对内容或布局没有任何影响。
<span> 标签是短语内容的通用行内容器，并没有任何特殊语义。

2、基本语法格式

<div>这是div</div> <span>这是span</span>

3、常见的属性

div 和 span 标签支持 HTML 中的全局属性。

注意：

div 的 align 属性已废弃；请勿使用。应当使用 CSS Grid 或 CSS Flexbox 来对齐、定位页面上的 <div> 元素；

4、浏览器兼容性

5、使用场景

<div> 元素在语义上不表示任何特定类型的内容。div 可以将内容分组，从而可以使用 class 或是 id 属性方便的定义内容的格式，也可以在一段文档中划分标记出使用另一种语言书写的内容（使用lang 属性）等等；

<div> 元素应当仅在没有任何其它语义元素（比如 <article> 或 <nav>）时使用；

span 可以用来编组元素以达到某种样式意图（通过使用类或者 id 属性），或者这些元素有着共同的属性，比如 lang。应该在没有其他合适的语义元素时才使用它。<span> 与 <div> 标签很相似，但 <div> 是一个块元素，而 <span> 则是行内元素 。

6、总结

这两个都是盒子，用来装我们网页元素的，只不过他们有区别，现在我们主要记住使用方法和特点就好了。

• div 标签，是用来布局的，但是现在一行只能放一个 div；
• div 的开始标签和结束标签都不能省略；
• span 标签，也是用来布局的，一行上可以放好多个 span；
• span 的开始标签和结束标签都不能省略；

写在最后

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！

总结

以上是生活随笔为你收集整理的HTML系列之div和span标签的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。