定义和用法:

<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> 标签的更多相关文章

  1. HTML <del> 标签

    HTML <del> 标签 什么是<del> 标签? 定义文档中已被删除的文本. 实例 a month  is <del>25</del> 30 day ...

  2. 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> ...

  3. 来吧,HTML5之基础标签(上)

    什么是html5 HTML 5 是下一代的 HTML.HTML5 仍处于完善之中.然而,大部分现代浏览器已经具备了某些 HTML5 支持. 学习过程中标签的理解 <a>标签  定义超链接, ...

  4. Html标签的语义化

    为了使我们的网站更好的被搜索引擎抓取收录,更自然的获得更高的流量,网站标签的语义化就显得尤为重要.所谓标签语义化,就是指标签的含义. 为了更好的理解标签的语义化,先看下面这个例子: 1 <tab ...

  5. HTML 文本格式化<b><big><em><i><small><strong><sub><sup><ins><del>

    <b> 标签-粗体 定义和用法: <b>标签规定粗体文本. 提示和注释 注释:根据 HTML5 规范,在没有其他合适标签更合适时,才应该把 <b> 标签作为最后的选 ...

  6. html5标签集结1

    1.<bdo>标签:覆盖默认的文本方向. <bdo dir="ltr">Here is some text</bdo>  显示结果(从左到右): ...

  7. HTML标签语义化

    标签语义化 Web语义化是指使用语义恰当的标签,使页面有良好的结构,页面元素有含义,能够让人和搜索引擎都容易理解. 如果可以在合适的位置使用恰当的标签,那么写出来的页面语义明确,结构清晰,搜索引擎也可 ...

  8. <jsp:include page="">和<%@include page=""%> 标签学习

    <jsp:include page=""><jsp:param value=""name=""/><DEL&g ...

  9. 前端基础HTML以及常用的标签

    cs模式:--- c:client  server bs模式:---Browser server 1.WEB标准的概念及组成 网页主要有三部分组成: a:结构   --  主要标准:XHTML和XML ...

  10. HTML标签参考(一)

    hi,小哥哥小姐姐们,我们今天要说的是前端的入门,却也是十分重要的意识的培养哦! • html中的标签数量是很多的,据人统计大概有300个左右,并且每年都会以20-30个的速度增加着,但是这么多的标签 ...

随机推荐

  1. Eclipse创建maven项目

    许久不创建maven web项目了,今天上手很是陌生,搜集资料后终于创建成功,跟大家也分享一下,同时也便于以后再次忘记使用... 新建maven项目(右击new,若不存在,可在other里面寻找)

  2. C# 线程通信 一

    C#多线程通信 using System; using System.Collections.Generic; using System.Linq; using System.Text; using ...

  3. ABAP代码编辑器设置--界线

    ABAP编辑器每行允许的最大字符数: Utilities->Settings打开选项卡: 勾选:Downward-Compat.line Length(72) 设置后看到的效果: 设置步骤:

  4. easyui-window 关闭事件,只要关闭窗口就会触发

    $(function () {            $('#windowsMSG').window({                onBeforeClose: function () { //当 ...

  5. Ubuntu上Docker安装Trouble Shooting

    (我的环境是Mint7.1,相当于Ubuntu14.04) 1,首先,根据docker.com上的安装指导来安装docker,这里就不重复了,参考: https://docs.docker.com/i ...

  6. 运行两个以上tomcat的设置及内存设置

    运行两个或以上tomcat的设置方法 1.解决端口冲突问题设置方法很简单,修改conf/server.xml配置文件中的3个端口即可.默认端口:8005.8080.8009.一般情况位置如下:**** ...

  7. 新接触PHP课程,给自己定制的目标

    PHP课程初接触,对自己的计划和展望恢复 从今天开始了为期四个半月的关于PHP课程的学习.从零开始接触一门新的技术知识,而且还是在短短四个月内就要掌握牢固,其实确确实实感觉不易.可是世间再没有路,不还 ...

  8. miniprofiler对方法的时间性能检测

    miniprofiler对方法的时间性能检测 直接上代码 using StackExchange.Profiling; ... var profiler = MiniProfiler.Current; ...

  9. php : MVC 演示(使用单例工厂)

    此例子是MVC的简单应用, 要达到的效果如下: 用户列表: 姓名 年龄 学历 兴趣 出生地 账号创建时间 操作 keen 20 高中 篮球,足球 广东 2016-11-08 10:00:31 删除 a ...

  10. 浅谈一下关于使用css3来制作圆环进度条

    最近PC端项目要做一个这样的页面出来,其他的都很简单,关键在于百分比的圆环效果.我最初打算是直接使用canvas来实现的,因为canvas实现一个圆是很简便的. 下面贴出canvas实现圆环的代码,有 ...