HTML <span> 标签
定义和用法:
<span>标签被用来组合文档中的行内元素。在行内定义一个区域,也就是一行内可以被<span>划分成好几个区域,从而实现某种特定效果。<span>本身没有任何属性。
在IE6下,span元素浮动时一定要把span元素放在a标签之前,不然,会出现浏览器兼容问题,IE6下,浮动过后的span元素会向下错位一行。
提示和注释:
提示:请使用<span>来组合行内元素,以便通过样式来格式化它们。
注释:span没有固定的格式表现。当对它应用样式时,它才会产生视觉上的变化。
<span> 与<div>
<span>在CSS定义中属于一个行内元素,而<div>是块级元素,我们可能通俗地理解为<div>为大容器,大容器当然可以放一个小容器了,<span>就是小容器。
DIV与SPAN的区别与特点
1. div占用的位置是一行,span占用的是内容有多宽就占用多宽的空间距离
2. <span>在<div>中一般都是用于显示一段文本,<span默认是横排的,而<div>默认是竖排的
用<span>有时候是为了使页面元素看起来规整,没有什么特别的用处。
span标签和p标签有什么区别
1. 一般标签都有语义,p标签是指一个段落,而且默认是一个块级元素,span是一个行内元素的 代表,没有 什么意思,一般可以放文字等行内元素
2. <p>标签是一个段落结束的标志,我们知道段落与段落中间会留出一行文字的空白,这样才能显出两 个段落了。也就是说<p>可以放在段落结束的地方 也表示换行的意思.
3. <span>标签主要是指一个块,就是说指定的这一块内容是一起的,不可分割,就算换行的时候也不 会出现空白的情况。
如何定义span标签的宽度和高度
因为span属于内联元素,而内联元素是忽略宽度和高度的,明白了这一点解决就很简单了,解决的办法就是利用css将span变为盒装元素即可。
将内联元素定义为盒装元素的方法有两种:
1.直接使用显示属性display将其定义为盒装元素;
display:block;
2.使用浮动属性float将其自动定义为盒装元素;
float:left;
在css属性里定义以上任意一个属性就可以使span拥有高度和宽度属性。
HTML <span> 标签的更多相关文章
- HTML <del> 标签
HTML <del> 标签 什么是<del> 标签? 定义文档中已被删除的文本. 实例 a month is <del>25</del> 30 day ...
- HTML——b i del a p img h1 h2 h3 h4 h5 h6 hr ol ul 标签的使用方法详解
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 来吧,HTML5之基础标签(上)
什么是html5 HTML 5 是下一代的 HTML.HTML5 仍处于完善之中.然而,大部分现代浏览器已经具备了某些 HTML5 支持. 学习过程中标签的理解 <a>标签 定义超链接, ...
- Html标签的语义化
为了使我们的网站更好的被搜索引擎抓取收录,更自然的获得更高的流量,网站标签的语义化就显得尤为重要.所谓标签语义化,就是指标签的含义. 为了更好的理解标签的语义化,先看下面这个例子: 1 <tab ...
- HTML 文本格式化<b><big><em><i><small><strong><sub><sup><ins><del>
<b> 标签-粗体 定义和用法: <b>标签规定粗体文本. 提示和注释 注释:根据 HTML5 规范,在没有其他合适标签更合适时,才应该把 <b> 标签作为最后的选 ...
- html5标签集结1
1.<bdo>标签:覆盖默认的文本方向. <bdo dir="ltr">Here is some text</bdo> 显示结果(从左到右): ...
- HTML标签语义化
标签语义化 Web语义化是指使用语义恰当的标签,使页面有良好的结构,页面元素有含义,能够让人和搜索引擎都容易理解. 如果可以在合适的位置使用恰当的标签,那么写出来的页面语义明确,结构清晰,搜索引擎也可 ...
- <jsp:include page="">和<%@include page=""%> 标签学习
<jsp:include page=""><jsp:param value=""name=""/><DEL&g ...
- 前端基础HTML以及常用的标签
cs模式:--- c:client server bs模式:---Browser server 1.WEB标准的概念及组成 网页主要有三部分组成: a:结构 -- 主要标准:XHTML和XML ...
- HTML标签参考(一)
hi,小哥哥小姐姐们,我们今天要说的是前端的入门,却也是十分重要的意识的培养哦! • html中的标签数量是很多的,据人统计大概有300个左右,并且每年都会以20-30个的速度增加着,但是这么多的标签 ...
随机推荐
- CentOS7 Nginx负载均衡
五台服务器 192.168.155.129 nginx反向代理服务器 192.168.155.130 apache+PHP服务器,PHP要使用mysql函数库,配置的时候就要指定mysql安装路径,所 ...
- C# Winform中DataGridView绑定后DataGridViewCheckBoxColumn无法显示的问题
在控件DataGridView绑定数据源后,发现DataGridViewCheckBoxColumn不能显示当前的check值.经过一番努力,现将完整代码奉献出来,仅供参考. 错误代码: /*禁止自动 ...
- SpringMVC框架下的异常处理
在eclipse的javaEE环境下:导包.... 1. 在 @ExceptionHandler 方法的入参中可以加入 Exception 类型的参数, 该参数即对应发生的异常对象 2. @Excep ...
- zigbee学习之路(十五):基于协议栈的按键实验
一.前言 经过上次的学习,相信大家已经初步学会使用zigbee协议进行发送和接受数据了.今天,我们要进行的实验是按键的实验,学会如何在协议栈里实现按键中断. 二.实验功能 在协议栈上实现按键中断,BU ...
- #听云博客大赛#如何在自己的App嵌入听云产品监控App性能
近日浏览园子文章的时候,发现博客园与听云正在举办“听云原创博文”大赛.最近手上正好正在开发一款iOS的应用,所以就用听云App来监测一下我的App各个指标,为我的应用保驾护航.下面,我就从头到尾演示下 ...
- Java读取Level-1行情dbf文件极致优化(1)
最近架构一个项目,实现行情的接入和分发,需要达到极致的低时延特性,这对于证券系统是非常重要的.接入的行情源是可以配置,既可以是Level-1,也可以是Level-2或其他第三方的源.虽然Level-1 ...
- java full gc
转自:http://blog.sina.com.cn/s/blog_7a351012010163a1.html
- Learning by doing
Learning by doing 绪论:读了娄老师的公众号中--<做中学(Learning By Doing)>这篇文章后,深有感触,我想到很多自己之前的事情,很多都是每每想的很好,总是 ...
- [OC][转]UITableView属性及方法大全
Tip: UITableView属性及方法大全 (摘录地址) p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; line-height: 14.0px; font: 1 ...
- javascript的继承小结
继承是OO语言中最为津津乐道的概念,一般有两种继承方式,接口继承和实现继承,接口继承只继承方法签名,实现继承则是集成真正的方法.由于js中函数没有签名,因此ECMAScript中没有接口继承,只有实现 ...