HTML系列之div和span标签
  yQfRNkVtsm2H 2023年11月19日 12 0

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、浏览器兼容性

HTML系列之div和span标签_HTML

5、使用场景

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

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

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

6、总结

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

div 标签,是用来布局的,但是现在一行只能放一个 div;

div 的开始标签和结束标签都不能省略;

span 标签,也是用来布局的,一行上可以放好多个 span;

span 的开始标签和结束标签都不能省略;


【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月19日 0

暂无评论

推荐阅读
  NHaurzrhyr04   2023年12月23日   98   0   0 htmljQueryhtmljQuery
yQfRNkVtsm2H