HTML宝典(第 1 版)
2.3.24 span元素
阅读(

HTML基础

HTML元素

结构语义元素

内容分组元素

文本语义元素

wbr元素

br元素

ruby、rb、rt、rp元素

bdo和bdi元素

ins和del元素

sub和sup元素

kbd元素

samp元素

var元素

code元素

time元素

dfn元素

abbr元素

mark元素

cite元素

q元素

s元素

u元素

b元素

i元素

small元素

strong元素

文本元素

span元素

span元素也是一个没有语义的元素,类似于 div 元素。不过,span 是行内元素,它只能包围字词或短语,而 div 元素适合包含块级内容。

如果想为一小块内容定义 class、id、dir、lang 等属性,或定义特殊的显示风格,或定义Javascript行为,而又没有相应的HTML语义元素时,就可以使用 span元素。

如,以下段落中,通过三个 span元素,定义了三小块内容,并为它们分别应用特殊的显示风格:

<p>RGB色彩模式中,R表示<span class="red">红色</span>,G表示<span class="green">绿色</span>,B表示<span class="blue">蓝色</span></p>
.red {
    color: red;
}
.green {
    color: green;
}
.blue {
    color: blue;
}

运行结果如图 2‑45 所示:

span元素
图2-45 span元素

值得说明的是,由于 span元素没有任何语义,因此应将它作为最后的选择,仅在没有其他合适的HTML语义元素时才使用它。

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验