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:文字方向)
?
?
?