Skip to main content

HTML 内容组合元素 span

<span>：内容组合元素，常被用来组合文档中的行内元素。HTML <span> 元素是短语内容的通用行内容器，并没有任何特殊语义。可以使用它来编组元素以达到某种样式意图（通过使用类或者 Id 属性），或者这些元素有着共同的属性，比如 lang。应该在没有其他合适的语义元素时才使用它。<span> 与 <div> 元素很相似，但 <div> 是一个块元素而 <span> 则是行内元素。

Docs

The Content Span element - HTML

span 元素​

  • 使用 <span> 元素可以使得文档中的行内元素组合在一起，以便于对这些行内元素施加一些样式，比如对文本的颜色或者字体进行修改。
  • 一般来说，<span> 元素不会换行，但是可以使用 display: block 来改变其默认的行内元素的行为。
<p>
  你好
  <span style="color: darkorchid;font-size: 20px;">漂亮</span>
  ，你美丽的模样，总是让人多一些喜欢。
</p>
http://localhost:3000

你好漂亮，你美丽的模样，总是让人多一些喜欢。

div 和 span 元素的历史​

  • 在 HTML 中有两个特殊的元素 div 元素、span 元素：

    • div 元素：division，分开、分配的意思；
    • span 元素：跨域、涵盖的意思；

  • 这两个元素有什么作用呢？无所用、无所不用。

  • 产生的历史：

    • 网页的发展早期是没有 css，这个时候我们必须通过语义化元素来告知浏览器一段文字如何显示；
    • 后来出现了 css，结构和样式需要分离，这个时候 html 只需要负责结构即可；
    • 比如 h1 元素可以是一段普通的文本+CSS 修饰样式；
    • 这个时候就出现了 div、span 来编写 HTML 结构所有的结构，样式都交给 css 来处理；

  • 所以，理论上来说：

    • 我们的页面可以没有 div、span；
    • 我们的页面也可以全部都是 div、span；

div 和 span 元素的区别​

  • 这个时候有一个问题：我出现一个不就可以了吗？

  • div 元素和 span 元素都是 "纯粹的"容器，也可以把他们理解成"盒子"，它们都是用来包裹内容的；

    • div 元素：多个 div 元素包裹的内容会在不同的行显示；

      • 一般作为其他元素的父容器，把其他元素包住，代表一个整体
      • 用于把网页分割为多个独立的部分

    • span 元素：多个 span 元素包裹的内容会在同一行显示；

      • 默认情况下，跟普通文本几乎没差别
      • 用于区分特殊文本和普通文本，比如用来显示一些关键字

  • div 元素包裹的内容会显示在不同的行，可以把网页分成多个独立的部分，一般作为其他的元素的父容器。

  • span 元素包裹的内容会显示在同一行，默认情况下是跟普通的文本没有区别，可以用来凸显一些关键字。