跨度标签| HTML

HTML span 元素是内联元素和内容的通用内联容器。它用于为样式目的对元素进行分组(通过使用 class 或 id 属性)，这是在没有其他任何其他语义元素可用时使用它的更好方法。 span 与 div 标签非常相似，但 div 是块级标签，span 是内联标签。 Span 标签是成对标签，意味着它同时具有打开(<)和关闭(>)标签，并且必须关闭标签。

• span 标签用于对内联元素进行分组。
• span 标签本身不会做任何视觉上的改变。
• span 与 div 标签非常相似，但 div 是块级标签，span 是内联标签。

标签是这样写的：
句法：

Some Text............. 

在下面的例子中，假设我们想在三行中写三次 GeeksforGeeks，分别是粗体、斜体、下划线、绿色，字体家族 = courier new 所以我们需要使用许多 HTML 标签，例如 、、< u>, 每次在每一行中，我们要进行更改需要修改每个标签。

例子：

    


    
Welcome To GFG
  
    

    
       
           GeeksforGeeks
       
    

  
    

  
    

    
       
           GeeksforGeeks
       
    

  
    

  
    

    
       
           GeeksforGeeks
       
    

      
  

                    

输出：

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

   
      
       
         
     
   
   
      
Welcome To GFG
      GeeksforGeeks

      GeeksforGeeks

      GeeksforGeeks

   

输出：

正如我们所知，span 是一个内联标签，它占用尽可能多的空间，并为其他元素留出空间让我们在下面的示例中看到它，所有四跨度元素都将显示在同一行中，因为每个标签只占用必要的空间，其余空间可用对于其他元素。
例子：

   
      
   
   
      
Welcome To GFG
           
      
       GFG
      
      -Contribute-
      
      Article
      
      GCET
   

输出：
span 标签可用于设置文本一部分的颜色/背景颜色：在下面的示例中，段落内应用了三个不同样式的 span 标签。
例子：

   
      
   
   
      
Welcome To GFG
  
          
      

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

输出：

使用span标签操作javascript：在下面的例子中，我们在段落中添加了一个span标签，id=”demo”我们可以通过应用javascript来改变它的文本在这个例子中GFG将在点击按钮后更改为“GeeksforGeeks”。
例子：

   
      
Welcome to GFG
      
 GFG
      A computer Science portal for Geeks
  
        
    Change Text!
   

输出：
点击按钮之前

点击按钮后

Div标签和span标签的区别

div 和 span 标签是使用 HTML 创建页面时的两个常见标签，并在它们上执行不同的功能，而 div 标签是块级元素，span 是内联元素 div 标签创建一个换行符，默认情况下在文本之间创建一个分隔出现在开始的标记之后，直到标记以

结束。 div 标签为该标签内的所有元素(如文本、图像、段落)创建单独的框或容器。

Properties	Div Tag	Span Tag
Elements Types	Block-Level	Inline
Space/Width	Contain Whole Width Available	Takes only required Width
Examples	Headings, Paragraph, form	Attribute, image
Uses	Web-layout	container for some text
Attributes	Not required, with common css, class	Not required, with common css, class

span 标签不会创建类似于 div 标签的换行符，而是允许用户在同一行内的页面上将事物与它们周围的其他元素分开。避免换行，结果只改变选定的文本，保持它们周围的所有其他元素相同。
下面的示例将显示 span 和 div 标签之间的区别，而 div 标签包含整个宽度，span 标签仅包含所需的宽度，其余部分可用于另一个元素。

Example:

   
      
      
   
   
      
  
      
 div tag   
      
 div tag   
      
 div tag   
      
 div tag   
        
      
      span-tag
      span-tag
      span-tag
      span-tag
   

输出：

支持的浏览器：支持的浏览器如下所列

• 谷歌浏览器
• IE浏览器
• 火狐
• 歌剧
• 苹果浏览器