这一小节讲解<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. HYPER-V2008里安装WINDOWS 2012,以及监控宝

    呵呵,这两者有关系么?没关系.哈哈. 为了方便就放一起了. 至少,2008里的HYPERV能安装2012,倒是给我很多欣慰.

  2. 14.5.3 Locks Set by Different SQL Statements in InnoDB

    14.5.3 Locks Set by Different SQL Statements in InnoDB 通过不同的SQL语句设置的锁 在InnoDB中 一个锁定读, 一个UPDATE 或者一个D ...

  3. ural-1099-Work Scheduling(裸带花树)

    题意: 有N个人,有限对的人可以在一起工作,问最多能有多少对. 分析: 任意图的最大匹配 // File MAXName: 1099.cpp // Author: Zlbing // Created ...

  4. HDU 1523 Decoding Morse Sequences

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1523 此题大意为 给你一串摩尔斯密码  再给你一个字典(下面单词本) 用下面的单词组合成给你的摩尔斯密 ...

  5. jQuery DOM操作之结点转移复制

    jQuery DOM操作之结点转移复制 $('div').append($('p'))这样即可把p标签移动到div标签里 $('div').append( $('p').html() )是把p标签里的 ...

  6. 动态规划(状态压缩)：BZOJ 2621 [Usaco2012 Mar]Cows in a Skyscraper

      2621: [Usaco2012 Mar]Cows in a Skyscraper Time Limit: 20 Sec  Memory Limit: 128 MBSubmit: 303  Sol ...

  7. C#在父窗口中调用子窗口的过程(无法访问已释放的对象)异常，不存在从对象类型System.Windows.Forms.DateTimePicker到已知的托管提供程序本机类型的映射。

    一:C#在父窗口中调用子窗口的过程(无法访问已释放的对象)异常 其实,这个问题与C#的垃圾回收有关.垃圾回收器管 理所有的托管对象,所有需要托管数据的.NET语言(包括 C#)都受运行库的 垃圾回收器 ...

  8. 意大利进口的衬衫面料pH值严重超标·都市快报

    意大利进口的衬衫面料pH值严重超标·都市快报     意大利进口的衬衫面料pH值严重超标         董捷    2007-03-24           通讯员 浙 检 记 者 董 捷      ...

  9. [置顶] 【Git入门之十四】Git GUI

    原创作品,转载请标明:http://blog.csdn.net/jackystudio/article/details/12374495 文章都快写完了,Git GUI才浮出水面,很多人要骂我,这么方 ...

  10. javaweb笔记5之请求编码问题

    post提交: 设置实体内容的编码:request.setCharacterEncoding("utf-8"); 注意:一定要在获取所有参数之前设置,否则设置无效! get方式提交 ...