标签定义及使用说明

<span> 用于对文档中的行内元素进行组合。

<span> 标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。如果不对 <span> 应用样式，那么 <span> 元素中的文本与其他文本不会任何视觉上的差异。

<span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。

举例说明

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>菜鸟教程(runoob.com)</title> 

</head>

<body>

<p>This is a paragraph <span style="color:#00ff00;">This is a paragraph</span>

This is a paragraph</p>

<p>我的母亲有 <span style="color:blue;font-weight:bold">蓝色</span> 的眼睛，我得父亲有 <span style="color:darkolivegreen;font-weight:bold">碧绿色</span> 的眼睛。</p>

</body>

</html>

运行结果

HTML 5 <span> 标签的更多相关文章

  1. HTML <span> 标签

    定义和用法: <span>标签被用来组合文档中的行内元素.在行内定义一个区域,也就是一行内可以被<span>划分成好几个区域,从而实现某种特定效果.<span>本身 ...

  2. Div和Span标签显示与隐藏

    本实例中,学习jQuery的知识,显示与隐藏网页上的div或是span标签. 实际环境中,也许是根据某些条件进行,符合条件时,对某个或是某个div或是span标签时行显示与隐藏. 主要是学习jQuer ...

  3. p标签中的span标签文字垂直居中对齐

    <p>轻舞飞扬<span>第一次亲密接触</span></p> p标签的font-size:30px; span标签的font-size:24px; 让 ...

  4. "无意义"的div和span标签

    HTML <div> 元素是块级元素,它是可用于组合其他 HTML 元素的容器.<div>元素没有特定的含义.除此之外,由于它属于块级元素,浏览器会在其前后显示折行.如果与 C ...

  5. 360兼容模式==ie8 兼容模式下 span标签占位问题

    ie8 兼容模式 ie8 标准渲染 应付金额 穿位 错误代码 <span class="span_em">应付金额:<em><span style=& ...

  6. html之span标签

    对于文档中的行内元素最好使用span来组合它们,这样就可以通过样式来格式化它们. span没有任何的样式,当对它应用样式时,才会产生变化 id和class属性是span标签的好伴侣,这样做既可以增加适 ...

  7. span标签之间的空隙

    出现的问题: 在html中,当有两个以及两个以上的span标签并列的时候,如果任意两个span之间换行书写的话,那么他们在页面上展现的时候往往会有空隙 解决的办法有两个: 1.将两个span标签写在同 ...

  8. display:block; 块级元素。<a>,<span>标签设置宽度和高度

    display:block;是让对象成为块级元素(比如a,span等) 转化后 可以对a或者span标签进行width和height设置,否则设置不了 display有很多对象,具体可以参考http: ...

  9. 使用<span>标签为文字设置单独样式

    这一小节讲解<span>标签,我们对<em>.<strong>.<span>这三个标签进行一下总结: 1. <em>和<strong& ...

  10. JS实现60s倒计时(亲测有效)，及span标签如何使用和禁用onclick事件

    效果如下图:点击按钮出现60秒倒计时,60s内按钮不可用,倒计时到了时间方可再次点击获取. 另外还有一个知识点,只有input 及button这样的表单元素有disbale属性,如何设置是否可用属性的 ...

随机推荐

  1. win10 右键菜单很慢的解决方式

    本来想用 win7 的,不想花很多时间折腾了.现在新电脑主板硬盘CPU都在排挤 win7 ,真是可怜呀.正题: 新电脑的性能应该还算不错的, 18 年跑分 29w 以上,但在图标上面右键却都要转圈几秒 ...

  2. oracle批量删除某用户下的表

    昨天干了一天的体力活,到快下班时被要求删除一批测试库上错误的表,主要是这些表的字段和生产上字段顺序对不上,然后让我写个脚本,让dba执行一下,主要是删表这种东西我们都没权限. 然后,我就被难到了,我记 ...

  3. C语言: 从 CodeBlocks 到 Microsoft Visual Studio 2017

    开学到现在寒假,学习了一个学期的C语言,同时也已然用了大半年的 CodeBlocks 来写 C/C++ 程序.CodeBlocks 是写 C/C++ 语言的程序最轻量的IDE(集成开发环境),在 C ...

  4. select2 使用方法总结

    官网:http://select2.github.io/ 调用 <link href="~/Content/select2.min.css" rel="styles ...

  5. BZOJ 3878 【AHOI2014】 奇怪的计算器

    题目链接:奇怪的计算器 如果没有溢出的话,所有的标记都可以在线段树上直接维护,所以一棵线段树就解决问题了. 现在有了溢出,怎么办呢? 发现就算溢出了,各个元素的相对大小关系也是不变的.所以,如果一开始 ...

  6. eclipse中启动 Eclipse 弹出“Failed to load the JNI shared library jvm.dll”错误

    原因1:给定目录下jvm.dll不存在. 对策:(1)重新安装jre或者jdk并配置好环境变量.(2)copy一个jvm.dll放在该目录下. 原因2:eclipse的版本与jre或者jdk版本不一致 ...

  7. 关于repaint和reflow的笔记

    repaint(重绘) ,repaint发生更改时,元素的外观被改变,且在没有改变布局的情况下发生,如改变outline,visibility,background color,box-shadow不 ...

  8. 虹软人脸识别 arcface2.0 安卓版本

    虹软官方网站提供了  AndroidStudio 版本的arcface2.0,我花了 几天的时间整理了一个 ADT版本的源码, 是自己从  官方 2.0 android版本中转换而来的.已经测试了,可 ...

  9. 学了vue和webpack的笔记

    首先把package.json贴出来,这里很多插件存在版本区别,因此要特别注意版本,不是所有的安装最新的都行 { "name": "life_manager", ...

  10. ROS的安装和卸载

    Robot Operating System (ROS) 是一个得到广泛应用机器人系统的软件框架,它包含了一系列的软件库和工具用于构建机器人应用.从驱动到最先进的算法,以及强大的开发者工具,ROS 包 ...