HTML中span标签使用详解含多种实例（转）

2024-05-29 10:56:31

在网站制作中，span标签应该是用得非常多的了。

那么HTML中的span标签究竟有什么用途呢？

它其实就是用来组合文档中的行内元素，也就是将内容放在span标签之中。

span标签居中

<span style="width:500px; display:inline-block; text-align:center;">中国国旅</span>

居中我们使用“text-align:center”，但是一定要结合display来使用才行，可以是block，也可以是inline-block。

而且如果不设置dislpay，就算给span设置了width也不会有效果。

span标签隐藏

<span style="display:none;">css教程</span>

如果要将span标签隐藏，给其加上display:none即可。

span标签间距

如果是设置span内容的行间距，直接使用line-height即可，如下实例：

<span style="line-height:26px;">
css教程<br />
php教程<br />
html教程
</span>

如果是设置多个span标签相互间的间距，则结合margin与display使用，如下实例：

<span style="display:block;">css教程</span>
<span style="margin-top:10px; display:block;">php教程</span>
<span style="margin-top:10px; display:block;">html教程</span>

span标签自动换行

方法1

<span style="width:300px;display:block;word-break:normal;white-space:pre-wrap;">span标记有一个重要而实用的特性,即它什么事也不会做,它的唯一目的就是围绕你的HTML代码中的其它元素,这样你就可以为它们指定样式了。</span>

方法2

<span style="width:300px;display:block;word-break: break-all; word-wrap: break-word;margin-top:20px;">span标签是被用来组合文档中的行内元素。span没有固定的格式表现。当对它应用样式时，它会产生视觉上的变化。</span>

最后说说今天在网上看到的一个问题，有人问“span标签有value属性吗？”

答案是正常情况下没有，但可以用其他方法实现。

<span class="spanbox">这是一个span标签元素</span>

以jquery为例，我们获取span标签的内容，是使用html()来实现。

<script>
alert($(".spanbox").html());
</script>

但是如果你非要让span有value属性，也可以，自定义一个value属性。

<span class="spanbox" value="aaaaa">这是一个span标签元素</span>
<script>
alert($(".spanbox").attr("value"));
</script>

在jquery中用attr来获取span标签value就行。

本文网址：http://www.santii.com/article/121.html

HTML中span标签使用详解含多种实例（转）相关推荐

JSP中meta标签之详解
JSP中meta标签之详解 2013年01月26日 16:09:27 阅读数:5589 JSP标签 <meta.....>作用总结 <metahttp-equiv="pra ...
url在python_Python中url标签使用详解
首页 {# 此时采用动态获取url的方式,使用url标签可以在DTL模板中动态获取url,#} {# 而使用reverse()函数,可以在Django中动态获取url标签,将视图函数进行反转,得到ur ...
html5标签详解,HTML5中figcaption标签用法详解
HTML5中figure和figcaption标签一般都是配套使用的,先了解下两者的基本定义,然后结合实例来说明两者的用法. 标签规定独立的流内容(图像.图表.照片.代码等等). figure元素的内 ...
在html5代码中加个时间,HTML5中video标签“事件”详解（实时监测当前播放时间）代码...
1.html代码:video后边几个元素,可处理ios 系统的兼容性 2.Js代码: //获取视频DOM元素 var myVideo = document.getElementById("m ...
Html中input标签的详解
今天来给大家讲解一下input标签的内部属性: 直接开门见山,首先我们先看input标签的第一个属性type: 1.type 格式:type="文本的类型" 当type设置为tex ...
HTML标签图文详解（三）
前两篇博文我们学习了HTML的基础知识与标签 HTML标签图文详解(一) HTML标签图文详解(二) 现在我们开更加深入的学习本文主要内容列表标签:<ul>.<OL>.&l ...
04-HTML标签图文详解（一）
一.排版标签注释标签  段落标签<p> <p>This is a paragraph</p> <p>This is ...
HTML标签图文详解（二）
上篇博文我们对HTML有了大致的认识并且熟悉了一些基本的标签 HTML标签图文详解(一) 接下来我们开始更加深入的学习 <body>标签的属性其属性有: bgcolor:设置整个网页的背 ...
html5代码转换为视频,HTML5中的视频代码详解
摘要腾兴网为您分享:HTML5中的视频代码详解,智学网,云闪付,易推广,小红书等软件知识,以及360win10,流量魔盒,fitbit,上港商城,安卓2.3.7,全民惠,五年级下册英语单词表图片,t ...
jQuery数组处理详解(含实例演示)
jQuery的数组处理,便捷,功能齐全. 最近的项目中用到的比较多,深感实用,一步到位的封装了很多原生js数组不能企及的功能. 最近时间紧迫,今天抽了些时间回过头来看 jQuery中文文档中对数组的 ...

最新文章

热门文章