我们如何使用 span 标签 ? 为 HTML 元素添加样式？

我们使用 <span> 标签来为文本的一部分或文档的一部分添加颜色。此标签主要用于将相似的内容组合在一起，以便于添加样式。我们为 <span> 标签使用行内样式，因为它为行内元素应用样式。

如果我们希望让某些文本或任何其他内容与其他内容不同，我们将它们包装在 <span> 标签中，然后添加 class 属性来识别，然后添加属性值来添加样式。

语法

以下是 <span> 标签的语法。

<span class=" ">Text…</span>

示例 1

下面给出了使用 span 标签为 HTML 元素添加样式的示例。

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <p>
      <span style="color:green;font-weight:bolder">
         Major Sandeep Unnikrishnan</span>was an officer in the Indian Army serving in the elite 51 Special Action Group of the National Security Guards. He was martyred in action during the November 2008 Mumbai attacks.
      <span style="background-color: yellow;"> He was consequently awarded the Ashoka Chakra, India's highest peacetime gallantry award, on 26 January 2009 by the president Pratibha Patil.</span>
   </p>
</body>
</html>

以下是上述示例程序的输出。

示例 2

下面给出了使用 span 标签为 HTML 元素添加样式的示例。

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <p>
      <span style="text-transform: uppercase; font-weight:bolder">
      Major Sandeep Unnikrishnan</span> was an officer in the Indian Army serving in the elite 51 Special Action Group of the National Security Guards. He was martyred in action during the November 2008 Mumbai attacks.
      <span style="font-family:cursive; color: green"> He was consequently awarded the Ashoka Chakra, India's highest peacetime gallantry award, on 26 January 2009 by the president Pratibha Patil.</span>
   </p>
</body>
</html>

以下是上述示例程序的输出。

示例 3

你可以尝试运行以下代码来了解 <span> 标签的用法。在此，我们将在 <p> 标签中使用 <span> 标签。

<!DOCTYPE html>
<html>
<head>
   <title>HTML span Tag</title>
</head>
<body>
   <p>Java is a Programming language widely followed. <span style = "color:#FF0000;">Developed by James Gosling. </span>This is demo text.</p>
   <p>
   <span style = "color:#8866ff;">
   Current Version: 1.8 </span> </p>
</body>
</html>

更新日期: 2022 年 10 月 19 日

2K+ 浏览量

开启你的职业生涯

完成课程以获得认证

开始学习
广告