日期:2014-05-17  浏览次数:20665 次

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>标记来语义化的

?