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：文字方向）