📜  跨度标签| HTML

📅  最后修改于: 2021-09-01 02:31:11             🧑  作者: Mango

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

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

标签是这样写的:
句法:

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

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

例子:




    GeeksforGeeks span tag


    

Welcome To GFG

                                GeeksforGeeks                     
                                GeeksforGeeks                     
                                GeeksforGeeks                                            

输出:
无跨度

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



   
      GeeksforGeeks span tag
       
         
     
   
   
      

Welcome To GFG

      GeeksforGeeks
      GeeksforGeeks
      GeeksforGeeks
   

输出:
无跨度

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



   
      GeeksforGeeks span tag
   
   
      

Welcome To GFG

                          GFG              -Contribute-              Article              GCET    

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



   
      GeeksforGeeks span tag
   
   
      

Welcome To GFG

                    

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

   

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



   
      

Welcome to GFG

      

GFG       A computer Science portal for Geeks

                Change Text!    

输出:
点击按钮之前
Span_JS_上一页
点击按钮后
span_JS_After

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:

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

输出:
spanvsdiv

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

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