首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

HTML 中的 span 标签基准用途的讨论(样式+交互)

2013-07-01 
HTML 中的 span 标签标准用途的讨论(样式+交互)无语义行内元素。在段内定义与该段样式不同的内容的样式。?同

HTML 中的 span 标签标准用途的讨论(样式+交互)

无语义行内元素。

在段内定义与该段样式不同的内容的样式。

?

同时满足以下条件的内容你可以使用span标签:

1、行内元素(inline)

2、无语义

3、你需要给他添加特定样式或做js钩子的时候

?

如:

1.这是一段话,段落里有一些特殊的需要标记的内容,如<span class="red">红色</span>。

2.这是一个箭头:<span class="narrow">.</span>。可以通过定义该class使其显示为一个箭头。

3.你还可以输入<span id="J_zishu">140</span> 个字。J_zishu用作js钩子

?

<span> 标签被用来组合文档中的行内元素。

使用 <span> 来组合行内元素,以便通过样式来格式化它们。

?

另外就是还有一些利用inline的特性来实现交互或者布局的tip吧:

比如:

1 避免点击块状显示标签时,产生误操作

如<div><h1>之类的标签,客户端浏览器会自动给block属性,本来点击h1包住的标题才会触发动作,在点击标题外但仍处在h1横条范围内的地方,也会触发。像这种情况,给<div><h1>等再加一个<span>就可以解决。

2 让元素保持在一行

在某些元素后面再加上其他的不同格式的内容,但不想它到下一行,只能用<span>嵌套。

?

?

<span>标准属性有:id, class, title, style, dir, lang, xml:lang

<span>事件属性有:onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

?

使用DIV或者SPAN元素结合id或者class来实现特定的语义或者结构化效果,以补充HTML标记中不包含的标记对象:“客户”,“电话号码”,“emai[注①]”等等;

注:① email 的话,在HTML5中是可以用<address>标记来语义化的

?

在HTML5对于SPAN的文档定义中,

大意就是,SPAN元素它自己本身啥也不是,但是,它在结合诸如:class,lang,或者dir属性时,非常有用。它起到描述了(文档内容)的作用。(样式:class+css;内容语言:lang;dir:文字方向)

?

?

?

热点排行