这一小节讲解<span>标签，我们对<em>、<strong>、<span>这三个标签进行一下总结：

1. <em>和<strong>标签是为了强调一段话中的关键字时使用，它们的语义是强调。

2. <span>标签是没有语义的，它的作用就是为了设置单独的样式用的。

如果现在我们想把上一小节的第一段话“美国梦”三个字设置成blue（蓝色），但注意不是为了强调“美国梦”，而只是想为它设置和其它文字不同的样式（并不想让屏幕阅读器对“美国梦”这三个字加重音读出），所以这样情况下就可以用到<span>标签了。

如下面例子：

<p>1922年的春天，一个想要成名名叫<em>尼克•卡拉威</em>（托比•马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，<strong>股票</strong>飞涨的时代。为了追寻他的<span>美国梦</span>，他搬入纽约附近一海湾居住。</p>

语法：

<span>文本</span>

具体示例:

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>了不起的盖茨比</title>

<style>

span{

    color:blue;

}

</style>

</head>

<body>

    <p>1922年的春天，一个想要成名名叫尼克•卡拉威（托比•马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的<span>美国梦</span>，他搬入纽约附近一海湾居住。</p>

    <p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>

</body>

</html>

　　

使用<span>标签为文字设置单独样式的更多相关文章

  1. 强调语气<strong>和<em>标签,文字设置单独样式<span>

    区别:1,<em> 表示强调,<strong> 表示更强烈的强调. 2,并且在浏览器中<em> 默认用斜体表示,<strong> 用粗体表示. 3,两个 ...

  2. css3-5 css3鼠标、列表和尺寸样式怎么用（文字有关的样式会被继承）

    css3-5  css3鼠标.列表和尺寸样式怎么用(文字有关的样式会被继承) 一.总结 一句话总结:css标签中文字有关的样式会被继承.由常用样式记起. 1.鼠标常用样式有哪些? cursor:poi ...

  3. [寒江孤叶丶的Cocos2d-x之旅_33]RichTextEx一款通过HTML标签控制文字样式的富文本控件

    RichTextEx一款通过HTML标签控制文字样式的富文本控件 原创文章,欢迎转载.转载请注明:文章来自[寒江孤叶丶的Cocos2d-x之旅系列] 博客地址:http://blog.csdn.net ...

  4. span标签中显示固定长度，超出部分用省略号代替，光标放到文字上显示全部

    在span中实现显示某段内容,固定其长度,多余部分用省略号代替,这样就用到html的title属性: 如:<span title="value"></span&g ...

  5. CSS 中如何把 Span 标签设置为固定宽度

    一.形如<span>ABC</span>独立行设置SPAN为固定宽度方法如下: span {width:60px; text-align:center; display:blo ...

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

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

  7. CSS中如何把Span标签设置为固定宽度

    一.形如<span>ABC</span>独立行设置SPAN为固定宽度方法如下: span {width:60px; text-align:center; display:blo ...

  8. 使文字在div中水平和垂直居中的的css样式为，四个边分别设置阴影样式

    text-align:center; /*水平居中*/ line-height: 20px; /*行距设为与div高度一致*/ HTML元素 <div>水平垂直居中</div> ...

  9. PHP使用echo输出标签设置CSS样式问题

    使用php是可以输出HTML标签的,这为页面设计带来很大方便. 在此记录php输出标签设置CSS样式的问题: echo可使用''.""或你不用引号,如果想要输出带CSS样式的HTM ...

随机推荐

  1. 牢记负载均衡与HA，高性能是不同的方案。一般的CLUSTER只能实现其中的一种，而ORACLE的RAC可以有两种。

    F5/LVS<—Haproxy<—Squid/Varnish<—AppServer. 现在网站发展的趋势对网络负载均衡的使用是随着网站规模的提升根据不同的阶段来使用不同的技术: 第一 ...

  2. 「Poetize3」Heaven Cow与God Bull

    描述 Description 给定一个整数n,求一个整数m,满足m<=n,并且m/phi(m)的值最大.注:phi(m)代表m的欧拉函数,即不大于m且与m互质的数的个数. 题解:m/phi(m) ...

  3. POJ 3468 A Simple Problem with Integers(详细题解) 线段树

    这是个线段树题目,做之前必须要有些线段树基础才行不然你是很难理解的. 此题的难点就是在于你加的数要怎么加,加入你一直加到叶子节点的话,复杂度势必会很高的 具体思路 在增加时,如果要加的区间正好覆盖一个 ...

  4. Android RSA加密对象数据

    前几天说了手头项目用MD5和双向加密DES来进行加密的,因为产品是在不断的改造中完善的.考虑到DES和MD5加解密还是会存下一定的风险,于是产品一拍,不行,听你们说MD5加密是不安全的,咱们产品以后做 ...

  5. server 2008 ftp 环境重点说明

    最近 在弄ftp  环境,但是 到server 2008 r2  这个系统之后,按照之前的方法 不行了 具体情况如下 利用本机 资源管理器 访问不了,根本不出现 登录框 提示 然后 到ftp  站点 ...

  6. Vim笔记

    复制多行: v 可视化,选择多行,然后yy复制.

  7. HDOJ(HDU) 2504 又见GCD(利用最大公约数反推)

    Problem Description 有三个正整数a,b,c(0 import java.util.Scanner; public class Main{ public static void ma ...

  8. JavaScript中的加号

    JavaScript中的加号“+”可以作为数学运算符的加,也可以作为字符串拼接,也可以作为一元运算符,表示正数. 1+2 "2"+"3" 3+"2&q ...

  9. [JAVA关键字] static & final

    JAVA十分常见的关键字static & final 总的来说final表示常量,即不可更改的:而static表示静态,即全局的 1. final 类:不能被继承 2. final 方法:能被 ...

  10. 【背包型动态规划】灵魂分流药剂(soultap) 解题报告

    问题来源 BYVoid魔兽世界模拟赛 [问题描述] 皇家炼金师赫布瑞姆刚刚发明了一种用来折磨一切生物的新产品,灵魂分流药剂.灵魂分流药剂的妙处在于能够给服用者带来巨大的痛苦,但是却不会让服用者死去,而 ...