记录: <span> 和 <div>

HTML div与span详解

最新推荐文章于 2022-05-06 14:30:15 发布

原创最新推荐文章于 2022-05-06 14:30:15 发布 · 585 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html

学习笔记专栏收录该内容

1 篇文章

订阅专栏

本文详细解释了HTML中div和span这两个元素的区别与用法。div作为块级元素，每次都会新开一行；而span作为内联元素则不会。此外还介绍了它们在网页布局中的实际应用案例。

概念

span 代表英语单词：span（跨度）。在HTML中用作行内元素标签。
div代表英语单词：division（分割，划分）。在HTML中用作块元素标签。

区别

div每次都以新行来结束或开始，而span不是。
div和span都没有任何语义，仅仅用来作为组合其他元素的
容器
div可以内嵌span但是反过来不行。

例子

<!--修改自coursera-->
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>div and span elements</title>
</head>
<body>
  <div>*** 新的一行 ***</div>
  <div>*** 新的一行 ***</div>
  <span>*** 由于前面的div和后面的div都需要占据一行，所以这是新的一行。 ***</span>
  <div>
    *** 内嵌了span，所以span跟在后面，不占据一行
    <span>*** 跟着前面 ***</span>
    还是在一个div里，所以这里还是在同一行 ***
  </div>
</body>
</html>