跨度标签 HTML

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

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

标签是这样写的：
句法：

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

在下面的例子中，假设我们要在三行中写三个 GeeksforGeeks，粗体，斜体，下划线，绿色，font-family = courier new，所以我们需要使用很多 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
    
    

      
  

输出：

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

HTML

   
      
       
         
     
   
   
      
Welcome To GFG
      GeeksforGeeks

      GeeksforGeeks

      GeeksforGeeks

   

输出：

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

html

   
      
   
   
      
Welcome To GFG
           
      
       GFG
      
      -Contribute-
      
      Article
      
      GCET
   

输出：

span 标签可用于设置文本一部分的颜色/背景颜色：在下面的示例中，段落内应用了三个不同样式的 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!!
      
  
   

输出：

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

html

   
      
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 标签仅包含所需的宽度，其余部分可用于另一个元素。

html

Example:

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

输出：

支持的浏览器：

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

HTML 是网页的基础，用于通过构建网站和 Web 应用程序进行网页开发。您可以按照此 HTML 教程和 HTML 示例从头开始学习 HTML。

CSS 是网页的基础，用于通过样式化网站和 Web 应用程序进行网页开发。您可以按照此 CSS 教程和 CSS 示例从头开始学习 CSS。