span详细用法

本文详细介绍了HTML中的SPAN标签用法,包括其属性如class、datafld、datasrc等,以及如何使用style属性进行样式定制。此外还提供了SPAN标签的示例代码。

span详细用法

SPAN  
   
  --------------------------------------------------------------------------------  
   
  Description  
   
  This   does   not   have   any   structural   role   or   established   rendering   convention.   It   allows   a   user   to   define   their   own   method   of   rendering   using   style   sheets.    
   
  Syntax  
  <SPAN  
  CLASS=classname  
  DATAFLD=colname  
  DATAFORMATAS=HTML   |   TEXT  
  DATASRC=#ID  
  ID=value  
  LANG=language  
  LANGUAGE=JAVASCRIPT   |   JSCRIPT   |   VBSCRIPT   |   VBS    
  STYLE=css1-properties  
  TITLE=text  
  event   =   script  
  >  
   
   
   
  Parameter   Description    
  CLASS=classname  
      Specifies   the   class   of   the   tag   being   defined.   This   is   used   to   associate   a   sub-classed   style   sheet   with   the   tag.    
  DATAFLD=colname  
      The   column   name   from   the   data   source   object   that   supplies   the   bound   data.      
  DATAFORMATAS=HTML   |   TEXT  
      Indicates   whether   bound   data   is   plain   text   or   HTML.    
  DATASRC=#ID  
      Indicates   the   ID   of   the   data   source   object   that   supplies   the   data   that   is   bound   to   this   element.    
  ID=value  
      An   SGML   identifier   used   as   the   target   for   hypertext   links   or   for   naming   particular   elements   in   associated   style   sheets.   Valid   ID   values   must   begin   with   a   letter.   The   underbar   character,   "_",   may   be   used   in   the   ID   name.   The   ID   should   be   unique   throughout   the   scope   of   the   document.   If   more   than   one   object   with   the   same   identifier   exists   in   a   document,   a   collection   of   those   named   items   is   created   that   can   only   be   referenced   by   ordinal   position.    
  LANG=language  
      Specifies   which   language   to   use   in   ISO   standard   language   abbreviation   form.    
  LANGUAGE=JAVASCRIPT   |   JSCRIPT   |   VBS   |   VBSCRIPT  
      Specifies   the   language   the   current   script   is   written   in   and   invokes   the   proper   scripting   engine.   The   default   value   is   JAVASCRIPT.   JAVASCRIPT,   JSCRIPT     The   scripting   language   is   written   in   JavaScript.    
  VBS,   VBSCRIPT     The   scripting   language   is   written   in   VBScript.    
     
  STYLE=css1-properties  
      Specifies   an   in-line   style   sheet   for   the   tag.    
  TITLE=text  
      Used   to   provide   advisory   information.   The   contents   of   the   title   attribute   will   be   displayed   in   a   ToolTip   during   the   onmouseover   event.  
     
  event  
  Can   be   one   or   more   of   these   events:  
  onclick     ondblclick    
  ondragstart     onhelp    
  onkeydown     onkeypress    
  onkeyup     onmousedown    
  onmousemove     onmouseout    
  onmouseover     onmouseup    
  onselectstart    
     
   
  Remarks  
   
  Both   the   start   and   end   tags   are   required.    
   
  Example  
   
  <P>This   paragraph   contains   a   single   <SPAN   STYLE="color:   blue">blue</SPAN>   word.  
   
  Scripting   Object  
   
  --------------------------------------------------------------------------------  
   
  Description  
   
  Specifies   an   inline   text   container.   This   element   is   especially   useful   for   applying   CSS   styles.    
   
  Properties  
   
  className,   dataFld,   dataFormatAs,   dataSrc,   document,   id,   innerText,   isTextEdit,   lang,   language,   offsetHeight,   offsetLeft,   offsetParent,   offsetTop,   offsetWidth,   outerText,   parentElement,   parentTextEdit,   scrollHeight,   scrollLeft,   scrollTop,   scrollWidth,   sourceIndex,   style,   tagName,   title    
   
  Methods  
   
  blur,   click,   contains,   focus,   getAttribute,   insertAdjacentHTML,   insertAdjacentText,   removeAttribute,   scrollIntoView,   setAttribute    
   
  Collections  
   
  all,   children,   filters    
   
  Events  
   
  onblur,   onclick,   ondblclick,   ondragstart,   onfilterchange,   onfocus,   onhelp,   onkeydown,   onkeypress,   onkeyup,   onmousedown,   onmousemove,   onmouseout,   onmouseover,   onmouseup,   onscroll,   onselectstart 

posted on 2007-07-13 00:15 lbsjs 阅读(...) 评论(...) 编辑 收藏

在 HTML 中,span 标签是一个内联元素,主要用于对文本或内联元素进行分组以便通过 CSS 或 JavaScript 对其进行样式设置或操作。以下是 span 标签的使用方法及示例: ### 基本用法 span 标签用于包围一小段文本,使其不换行显示,与换行标签 `<br/>` 相反。示例如下: ```html <p>这是一段包含 <span>span 标签</span> 的文本。</p> ``` 上述代码中,“span 标签” 被 `<span>` 标签包围,不会导致文本换行 [^4]。 ### 设置属性 - **id 属性**:为 span 元素指定唯一标识符,便于通过 JavaScript 或 CSS 操作该元素。示例如下: ```html <span id="uniqueSpan">这是有唯一 ID 的 span</span> <script> var spanElement = document.getElementById('uniqueSpan'); spanElement.style.color = 'red'; </script> ``` 在上述代码中,通过 `id` 属性为 span 元素设置了唯一标识符,然后使用 JavaScript 获取该元素并改变其文本颜色 [^2]。 - **class 属性**:为 span 元素指定一个或多个类名,可通过 CSS 对该元素进行样式设置。示例如下: ```html <style> .highlight { background-color: yellow; } </style> <span class="highlight">这是有类名的 span</span> ``` 上述代码中,通过 `class` 属性为 span 元素指定了类名 “highlight”,并在 CSS 中为该类名设置了背景颜色 [^2]。 - **style 属性**:为 span 元素指定内联样式,以覆盖任何外部样式表中的样式设置。示例如下: ```html <span style="color: blue; font-weight: bold;">这是设置了内联样式的 span</span> ``` 在上述代码中,使用 `style` 属性直接为 span 元素设置了文本颜色和字体加粗样式 [^2]。 - **data-* 属性**:用于在 span 元素中存储自定义数据。示例如下: ```html <span data-custom="custom data">这是存储了自定义数据的 span</span> <script> var span = document.querySelector('span'); var customData = span.dataset.custom; console.log(customData); </script> ``` 上述代码中,使用 `data-custom` 属性为 span 元素存储了自定义数据,然后通过 JavaScript 的 `dataset` 属性获取该数据 [^2]。 ### 配合 JavaScript 获取属性值 在 HTML 中使用 span 标签并配合 JavaScript 获取其属性值,示例如下: ```html <span class="spanbox" value="aaaaa">这是一个 span 标签元素</span> <script> alert($(".spanbox").attr("value")); </script> ``` 上述代码通过 jQuery 的 `attr` 方法获取了 span 元素的 `value` 属性值 [^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值