HTML - <span> 标签

HTML <span> 标签是一个用于对文本进行短语化的内联容器。我们可以使用 CSS 轻松地为 span 标签设置样式，并且可以使用类或 ID 属性通过 JavaScript 轻松地操作它。

它应该仅在没有其他语义元素适合时使用。<span> 标签与 <div> 标签不同，<div> 标签是块级元素，而 <span> 是内联元素。它用于对内联元素进行分组和应用样式。

语法

<span>.....</span>

属性

HTML span 标签支持 HTML 的全局和事件属性。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

HTML span 标签示例

下面的示例将说明 span 标签的使用方法。在哪里、何时以及如何使用 span 标签来标记文本的一部分。

创建 span 元素

在下面的程序中，我们使用 HTML <span> 标签创建了多个 span，以标记 HTML 中的部分文本或内容。

Open Compiler

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML span tag</title>
</head>

<body>
   <h3>Tutorialspoint</h3>
   <!-- Creating span Element -->
   <p>Easy Simply Learning on <span>Tutorialspoint.</span></p>
</body>

</html>

设置 span 元素的样式

以下是 HTML <span> 标签的另一个示例。在这里，我们创建了多个输入字段以获取用户输入，并使用 <span> 标签为每个输入字段标记部分文本或内容。

Open Compiler

<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML span tag</title>
    <style>
        span {
            color: green;
            font-size: 24px;
        }
    </style>
</head>

<body>
    <h3>Tutorialspoint</h3>
    <!-- Creating span Element -->
    <p>Easy Simply Learning on <span>Tutorialspoint.</span></p>
</body>

</html>

解析 span 元素

让我们看下面的例子，我们将运行一个脚本用于解析 <span> 标签中使用的内容。

Open Compiler

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML span Tag</title>
   <style>
      #txt {
         font-size: 30px;
      }
   </style>
</head>

<body>
   <!-- Create span Element-->
   <p>Simply Easy Learning<span id='txt'>Tutorialspoint</span></p>
   <button onclick="Show()">Show</button>
   <script>
      function Show() {
         let demo = document.getElementById('txt');
         alert(demo.innerHTML);
      }
   </script>
</body>

</html>

支持的浏览器

标签
span	是	是	是	是	是

html_tags_reference.htm

打印页面