HTML <span> 标签是用于表达文本的内联容器。我们可以轻松地使用 CSS 来设置 span 标签的样式，并且可以通过 JavaScript 使用 class 或 id 属性轻松操作它。
只有当没有其他语义元素合适时，才应使用它。<span> 标签与 <div> 标签不同，<div> 标签是块级元素，而 <span> 是内联级元素。它用于对内联元素进行分组和应用样式。
语法
<span>.....</span>
属性
<span> 标签支持 HTML 的 全局属性 和 事件属性。
<span> 标签示例
下面的示例将说明<span> 标签的用法。在何处、何时以及如何使用<span> 标签来标记文本的一部分。
创建 span 元素
在下面的程序中，我们将使用 HTML <span> 标签创建多个跨度，以标记 HTML 中的部分文本或内容。
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML span tag</title>
</head>
<body>
<h3>qikepu</h3>
<!-- Creating span Element -->
<p>Easy Simply Learning on <span>qikepu.</span></p>
</body>
</html>
设置 span 元素的样式
以下是 HTML <span> 标签的另一个示例。在这里，我们将创建多个输入字段来接受用户输入，并使用 <span> 标签为每个输入字段标记文本或内容的一部分。
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML span tag</title>
<style>
span {
color: green;
font-size: 24px;
}
</style>
</head>
<body>
<h3>qikepu</h3>
<!-- Creating span Element -->
<p>Easy Simply Learning on <span>qikepu.</span></p>
</body>
</html>
解析 span 元素
让我们看一下以下示例，我们将在其中运行脚本来解析 <span> 标签中使用的内容。
<!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'>qikepu</span></p>
<button onclick="Show()">Show</button>
<script>
function Show() {
let demo = document.getElementById('txt');
alert(demo.innerHTML);
}
</script>
</body>
</html>
支持的浏览器
| 浏览器 |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| 是否支持 | Yes | Yes | Yes | Yes | Yes |
