HTML 跨度标签

HTML span元素是用于内联元素和内容的通用内联容器。它用于为样式目的对元素进行分组（通过使用 class 或 id 属性），这是在没有其他语义元素可用时使用它的更好方法。

span 标签是成对的标签，意味着它同时具有打开（<）和关闭（>）标签，并且必须关闭标签。 span 标签用于对内联元素进行分组，该标签本身不会产生任何视觉变化。 span 与 div 标签非常相似，但 div 是块级标签，而 span 是内联标签。

句法：

Some Text 

属性：此标签接受所有全局属性和事件属性

示例 1：在此示例中，我们只是在 HTML 中使用带有样式的 span 标签。

HTML

 

    
Welcome To GeeksforGeeks
     
GeeksforGeeks is a
        
            computer science portal for
        geeks.
    
 

 

输出：

HTML 标签

示例2：在这个示例中，假设我们要在三行中用粗体、斜体、下划线、绿色和font-family = courier new 写三次GeeksforGeeks，所以我们需要使用很多HTML标签，例如， 、、为每一行的每一时间，而我们要做出改变需要修改每一个标签。

HTML

 

    
Welcome To GfG
    The span tag does not create a line break
    it allows the user to separate things from other elements
    around them on a page within the same line
    

 
    
    
        
            
                GeeksforGeeks
            
        
    
 
    

 
    
    
        
            
                GeeksforGeeks
            
        
    
 
    

 
    
    
        
            
                GeeksforGeeks
            
        
    
 
 

 

输出：

示例 3：在此示例中，通过使用 标签，我们可以减少代码和 HTML 属性，请参见下面的示例，通过在 span 标签中应用 CSS，将显示与使用 标签的示例相同的输出。

HTML

 

    
 
    
    

 

    
Welcome To GFG
    GeeksforGeeks

    GeeksforGeeks

    GeeksforGeeks


 

输出：

使用 CSS 属性设置 标签的样式

示例 4：正如我们所知，span 是一个内联标签，它占用所需的空间，并为其他元素留出空间。所有四跨元素都将显示在同一行，因为每个标签只占用必要的空间，其余空间可用于其他元素。

HTML

 

  

 

  
Welcome To GfG
  
  
    GfG
  
    -Contribute-
  
    Article
  
    GCET

 

输出：

span 标签说明了为元素获取所需空间的内联元素

示例 5： span 标签可用于将颜色/背景颜色设置为文本的一部分。在下面的段落应用示例中，使用不同样式的三倍跨度标签。

HTML

 

    

 

    
Welcome To GfG
     
    
     

        
            GeeksforGeeks
         is A Computer Science Portal where you can
        Publish
         your own
        articles
         and share your knowledge with the world!!
    
 

 

输出：

使用 标签设置颜色

示例 6：使用 span 标签操作 JavaScript，在下面的示例中，我们在 id=”demo” 的段落中添加一个 span 标签，我们可以通过在此示例中应用 javascript 来更改其文本 GFG 将在单击按钮后更改为“GeeksforGeeks” .

HTML

 

    
Welcome to GfG
     

        GfG
          
        A computer Science portal for Geeks
    
 
     
    
    Change Text!
    

 

输出：

使用 Javascript 操作