在DIV+CSS切图布局重构技术中,除了常常使用div标签外也常常使用span标签布局,通常也可以通过对span标签对象设置不同样式实现我们要的美化效果。这里主机吧主要讲的是span标签的定义和用法。

span标签定义和用法

<span> 标签被用来组合文档中的行内元素。

浏览器支持

所有浏览器都支持 <span> 标签。

例子:

<p><span>some text.</span>some other text.</p>

注释:span 没有固定的格式表现。当对它应用样式时,它才会产生视觉上的变化。

如果不对 span 应用样式,那么 span 元素中的文本与其他文本不会任何视觉上的差异。尽管如此,上例中的 span 元素仍然为 p 元素增加了额外的结构。

当然也可以为 span 应用 id 或 class 属性,这样既可以增加适当的语义,又便于对 span 应用样式。

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

支持属性:

<span> 标签支持 HTML 中的全局属性。

<span> 标签支持 HTML 中的事件属性。

HTML span标签:用来组合文档中的行内元素的更多相关文章

  1. 使用jQuery匹配文档中所有的li元素,返回一个jQuery对象,然后通过数组下标的方式读取jQuery集合中第1个DOM元素,此时返回的是DOM对象,然后调用DOM属性innerHTML,读取该元素 包含的文本信息

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 如何修改word文档中每行字符的最大默认值和每页最大行数默认值

    事情起因是这样的,小明在写论文的过程中,发现自己的文档的字与字的间距看起来比其他人的字符间距大,于是觉得奇怪,明明设置了一样的格式啊,设置每行38个字符,每页34行,为什么小明写的文档字符间距看着比较 ...

  3. HTML常用的标签中,行内元素和块级元素

    块元素(block element) HTML标签分类明细 * address - 地址 * blockquote - 块引用 * center - 举中对齐块 * dir - 目录列表 * div ...

  4. css总结17:HTML块级元素&行内元素之分: <div> 和<span>

    1 HTML 区块元素: 大多数 HTML 元素被定义为块级元素或内联元素. 1.1 块级元素实例: <div> <h1>, <p>, <ul>, &l ...

  5. IT兄弟连 HTML5教程 CSS3揭秘 在HTML文档中放置CSS的几种方式

    有很多方法将样式表加入到HTML中,每种方法都有自己的优点和缺点.新的HTML元素和属性已被加入,以允许样式表与HTML文档更简易地组合起来.将样式表加入到HTML中的常用方法有内联样式表.嵌入一张样 ...

  6. python3在word文档中查找多行文字是否存在

    工作中碰到这样一个情况:有多个关键词存在文本文档txt中,想查找下在某个较大的word文档中,这些关键词是否都含有,没有关键词的显示出来. 因为关键词比较多,并且这个工作还是经常会有的,这个情况我试着 ...

  7. [译]我们应该在HTML文档中何处放script标签

    本文翻译youtube上的up主kudvenkat的javascript tutorial播放单 源地址在此: https://www.youtube.com/watch?v=PMsVM7rjupU& ...

  8. 输出5个大写英文字母的组合,并写入到txt文档中,随机数法。

    1.问题起源:最近想申请几个英文商标,研究了一下,英文字母在4到7个之间最好,5个字母尤佳,所以先来输出5个字母的组合,可是想像力有限,于是想用排列组合把所有5个可能的字母组合都输出,再从中挑选几个感 ...

  9. CSS文档流与块级元素和内联元素

    CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...

随机推荐

  1. vue轮播图实现

    1.先安装组件 cnpm install vue-awesome-swiper; 2.在main.js下引入文件: import VueAwsomeSwiper from 'vue-awesome-s ...

  2. jquery的一个小扩展,读取URL里的参数

    /* *扩展jquery的功能: *读取url中参数的功能,方法的参数是要获取的URL里键; *使用前要先导入jquery.js文件. * */ (function ($) { $.getUrlPar ...

  3. css美化页面

    css美化页面 如果在我们一行文字中,想让某个文字凸显出来,使用span! 1.字体样式 font-style:字体的风格 italic normal font-weight:字体的粗细 normal ...

  4. lua调用方法错误

    self.sendMsg(json.encode(info),) self:sendMsg(json.encode(info),) 两个符号就差了一个点,引发的问题确实app崩溃,在这个方法中传的参数 ...

  5. 如何搭建并使用便携式 4G/LTE 伪基站研究移动安全

    此文章PDF文档下载地址:点击下载 0x00 前言 在移动互联网深入普及和物联网开始规模应用的今天,网络安全公司怎能不研究移动安全,要研究移动安全,怎能没有4G/LTE伪基站研究测试环境? 本文介绍如 ...

  6. 二,编程语言类别,和python变量基础

    编程语言类别 机器语言:由二进制组成,直接控制操作硬件,执行效率高,开发效率低. 汇编语言:用英文代替二进制,直接操作控制硬件,执行效率高,开发效率低. 高级语言: 编译型,如C语言,类似谷歌翻译,先 ...

  7. C语言笔记变量与数据类型

    目录 1.转义字符 2.常量与变量 2.1 什么是常量和变量 2.2 内存 2.3 变量的内存机制 2.4 变量命名规则 2.5 变量的定义 2.6 常量的定义 2.7 计算机内存字节顺序 2.8 局 ...

  8. es6 Array数组方法

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  9. ubuntu 16.04 安装 网易云

    现在网易云官网上下载对应版本 文件名:netease-cloud-music_1.0.0-2_amd64_ubuntu16.04.deb 进入下载目录: 正常安装会出现错误 解决的办法是换源 换源教程 ...

  10. hdu5003 Osu!排序实现水题

    Osu! is a famous music game that attracts a lot of people. In osu!, there is a performance scoring s ...