学习html中的span标签

发布时间:2019-10-29编辑:脚本学堂
本文介绍有关span标签的一些知识,都是很基础的内容,希望对新手朋友有所帮助。

span与div都是定义一个块,不同在于:span是单行的块(只有一行),div是多行的块。

span标签多用于显示文字。

SPAN标记有一个重要而实用的特性,它的唯一目的就是围绕你的HTML代码中的其它元素,这样就可以为它们指定样式了。
SPAN元素被加入到HTML中,以允许网页制作者给出样式,但无须附加在一个HTML的结构元素上。SPAN在样式表中作为一个选择符使用,而且它也能接受STYLE、CLASS和ID属性。
SPAN是一个内联元素,所以它可以作为HTML中的元素如EM和STRONG使用。

最重要的差别在于虽然EM和STRONG带有结构的意义,但SPAN就没有这样的意义。它的存在纯粹是应用样式,所以当样式表失效时它就没有任何的作用。

span标签的定义和用法

<span> 标签被用来组合文档中的行内元素。
HTML 与 XHTML 之间的差异
NONE
提示和注释:
提示:请使用 <span> 来组合行内元素,以便通过样式来格式化它们。
注释:span 没有固定的格式表现。当对它应用样式时,它才会产生视觉上的变化。

例子:
 

复制代码 代码示例:
<p>
<span>some text.</span>
其它内容:脚本学堂,欢迎您的光临。</p>

解释:
如果不对 span 应用样式,那么 span 元素中的文本与其他文本不会任何视觉上的差异。
尽管如此,上例中的 span 元素仍然为 p 元素增加了额外的结构。
可以为 span 应用 id 或 class 属性,这样既可以增加适当的语义,又便于对 span 应用样式。

可以对同一个 <span> 元素应用 class 或 id 属性,但是更常见的情况是只应用其中一种。
两者的区别在于:class 用于元素组(类似的元素,或者可以理解为某一类元素),而 id 用于标识单独的唯一的元素。

在w3school手册上有一些文本的样式与其他文本是不同的。比如“提示”使用了粗体的橘红色。尽管实现这种效果的方法非常多,我们的做法是:使用“提示”使用 span 元素,然后对这个 span 元素的父元素,即 p 元素应用 class,这样就可以对这个类的子元素 span 应用相应的样式了。
 

复制代码 代码示例:
HTML:
<p class="tip"><span>提示:</span>... ... ...</p>
CSS:
p.tip span { font-weight:bold; color:#ff9955; }

标准属性
id, class, title, style, dir, lang, xml:lang
如需完整的描述,请访问标准属性。

事件属性
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup
如需完整的描述,请访问事件属性。

就介绍这些吧,希望对大家有所帮助。