HTML - span 标签_HTML 菜鸟教程

HTML 标签是用于表达文本的内联容器。我们可以轻松地使用 CSS 来设置 span 标签的样式，并且可以通过 JavaScript 使用 class 或 id 属性轻松操作它。

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

语法

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

属性

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

标签示例

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

创建 span 元素

在下面的程序中，我们将使用 HTML 标签创建多个跨度，以标记 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 标签的另一个示例。在这里，我们将创建多个输入字段来接受用户输入，并使用 标签为每个输入字段标记文本或内容的一部分。

<!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 元素

让我们看一下以下示例，我们将在其中运行脚本来解析 标签中使用的内容。

<!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

<< HTML - div 标签 HTML - header 标签 >>

语法

属性

<span> 标签示例

创建 span 元素

设置 span 元素的样式

解析 span 元素

支持的浏览器