html:(8):span标签和q标签

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

这一小节讲解<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>

运行结果

<q>标签,短文本引用

      想在你的html中加一段引用吗?比如在你的网页的文章里想引用某个作家的一句诗,这样会使你的文章更加出彩,那么<q>标签是你所需要的。

语法:

<q>引用文本</q>

如下面例子:

<p>最初知道庄子,是从一首诗<q>庄生晓梦迷蝴蝶。望帝春心托杜鹃。</q>开始的。虽然当时不知道是什么意思,只是觉得诗句挺特别。后来才明白这个典故出自是庄子的《逍遥游》,《逍遥游》代表了庄子思想的最高境界,是对世俗社会的功名利禄及自己的舍弃。</p>

讲解:

1. 在上面的例子中,“庄生晓梦迷蝴蝶。望帝春心托杜鹃。” 这是一句诗歌,出自晚唐诗人李商隐的《锦瑟》 。因为不是作者自己的文字,所以需要使用<q></q>实现引用。

2. 注意要引用的文本不用加双引号,浏览器会对q标签自动添加双引号。

下图是代码显示结果:

注意这里用<q>标签的真正关键点不是它的默认样式双引号(如果这样我们不如自己在键盘上输入双引号就行了),而是它的语义:引用别人的话

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>q标签</title>
</head>
<body>
<p>周瑜,不可否认,他是历史上一个了不起的英雄人物!确实也配的上那句<q>聪明秀出为之英,胆略过人为之雄。</q></p>
</body>
</html>

运行结果

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/425759.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

cs20_1-1

1. 基本特点 1.1 save computation(惰性运行) x 2 y 3 add_op tf.add(x, y) mul_op tf.multiply(x, y) useless tf.multiply(x, add_op) pow_op tf.pow(add_op, mul_op) with tf.Session() as sess:z sess.run(pow_op) 如上&#xff0c;因为sess.run(pow_op)不需要用到u…

[剑指offer][JAVA]面试题第[03]题[数组中的重复数字][HashSet]

【问题描述】[数组中的重复数字][简单] 找出数组中重复的数字。 在一个长度为 n 的数组 nums 里的所有数字都在 0&#xff5e;n-1 的范围内。数组中某些数字是重复的&#xff0c;但不知道有几个数字重复了&#xff0c;也不知道每个数字重复了几次。请找出数组中任意一个重复的…

德国超级计算机中心,德国:强化人工智能能力建设 加大高性能计算网络投资...

图片来源&#xff1a;德国马克斯普朗克智能系统研究所德国2020年更新《国家人工智能战略》&#xff0c;在原先30亿欧元基础上再增加20亿欧元支持德国人工智能研究。德国科学联席会议决定投入1.33亿欧元&#xff0c;继续加强对人工智能能力中心和“高校教育的人工智能”进行资助…

HDU-3664-Permutation Counting

Permutation Counting Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submission(s): 1739 Accepted Submission(s): 918 Problem Description Given a permutation a1, a2, … aN of {1, 2, …, N}, we define its E-val…

html:(9):blockquote引用和br换行

<blockquote>标签&#xff0c;长文本引用 <blockquote>的作用也是引用别人的文本。但它是对长文本的引用&#xff0c;如在文章中引入大段某知名作家的文字&#xff0c;这时需要这个标签。 等等&#xff0c;上一节<q>标签不是也是对文本的引用吗&#xff1f;不…

K3CLOUD数据权限授权

1.定义角色&#xff0c;把用户放入角色内 2.设置数据规则 3.设置业务对象功能授权 转载于:https://www.cnblogs.com/RogerLu/p/10370347.html

html:(10):添加空格和hr

为你的网页中添加一些空格 在上一节的例子&#xff0c;我们已经讲解过在html代码中输入空格、回车都是没有作用的。要想输入空格&#xff0c;必须写入 。 语法&#xff1a; 在html代码中输入空格是不起作用的&#xff0c;如下代码。 在浏览中显示&#xff0c;还是没有空格效果…

NYOJ82-迷宫寻宝1

迷宫寻宝&#xff08;一&#xff09; 时间限制&#xff1a; 1000 ms | 内存限制&#xff1a; 65535 KB 难度&#xff1a; 4 描述一个叫ACM的寻宝者找到了一个藏宝图&#xff0c;它根据藏宝图找到了一个迷宫&#xff0c;这是一个很特别的迷宫&#xff0c;迷宫里有N个编过…

[剑指offer][JAVA]面试题第[04]题[二维数中的查找][数组]

【问题描述】[中等] 在一个 n * m 的二维数组中&#xff0c;每一行都按照从左到右递增的顺序排序&#xff0c;每一列都按照从上到下递增的顺序排序。请完成一个函数&#xff0c;输入这样的一个二维数组和一个整数&#xff0c;判断数组中是否含有该整数。示例:现有矩阵 matrix …

微机计算机原理姚向华课后答案,微型计算机操作系统

1. 详尽剖析Mac OS X内部工作原理的具体细节。 2. 揭示Mac OS X及其组件的核心体系结构和实现。 3. 以一种面向实现的方法介绍Mac OS X系统。 4. 透彻解释Mac OS X的众多用户级和内核级IPC机制的工作原理&#xff0c;并且提供足够的知识和示例&#xff0c;可以满足各个层次的读…

node.js Error: connect EMFILE 或者 getaddrinfo ENOTFOUND

Error: getaddrinfo ENOTFOUND] code: ENOTFOUND, errno: ENOTFOUND, syscall: getaddrinfo Error: connect EMFILE 本人在中心服上向800多个ip上发请求&#xff0c;发两次就不行了出现如上报错。 原因是文件句柄不够用了&#xff0c;修改 ulimit 即可&#xff0c;步骤如下&am…

TokenFlow详解

https://github.com/omerbt/TokenFlow/issues/25 https://github.com/omerbt/TokenFlow/issues/31 https://github.com/omerbt/TokenFlow/issues/32 https://github.com/eps696/SDfu register_extended_attention_pnp1. 为所有BasicTransformerBlock layer的attn1重构forward2.…

html:(11):address和code标签

<address>标签&#xff0c;为网页加入地址信息 一般网页中会有一些网站的联系地址信息需要在网页中展示出来&#xff0c;这些联系地址信息如公司的地址就可以<address>标签。也可以定义一个地址&#xff08;比如电子邮件地址&#xff09;、签名或者文档的作者身份…

Java虚拟机(JVM)面试题大集合

Java虚拟机&#xff08;JVM&#xff09;Java内存区域说一下 JVM 的主要组成部分及其作用&#xff1f;说一下 JVM 运行时数据区深拷贝和浅拷贝说一下堆栈的区别&#xff1f;队列和栈是什么&#xff1f;有什么区别&#xff1f;HotSpot虚拟机对象探秘对象的创建为对象分配内存处理…

从html到pug模板,将变量从html-webpack-plugin传递到pug模板

是否可以将变量传递给我之前在html-webpack-plugin中定义的pug-html-loader加载的.pug模板&#xff1f;webpack.config.babel.js...{test: /\.pug$/,use: [{loader: html-loader},{loader: pug-html-loader,options: {self: true}}]}...plugins: [new HtmlWebpackPlugin({chunk…

crossdomain.xml配置不当的利用和解决办法

00x1: 今天在无聊的日站中发现了一个flash小站&#xff0c;点进crossdomain.xml一看&#xff0c;震惊 本屌看到这个*就发觉事情不对 百度一下&#xff0c;这是一个老洞&#xff0c;配置不当能引起各种问题就算能远程加载恶意的swf文件&#xff0c;(swf是flash专用后缀文件常用于…

html:(12):pre和ul-li

使用<pre>标签为你的网页加入大段代码 在上节中介绍加入一行代码的标签为<code>&#xff0c;但是在大多数情况下是需要加入大段代码的&#xff0c;如下图&#xff1a; 怎么办&#xff1f;不会是每一代码都加入一个<code>标签吧&#xff0c;没有这么复杂&…

Sudoku Extension UVALive - 4763

题目地址 https://icpcarchive.ecs.baylor.edu/index.php?optioncom_onlinejudge&Itemid8&pageshow_problem&problem2764就是让你写一个计算数独的程序 这个程序有几个条件 1 输入o处填奇数2 输入e处天偶数3 输入0处随便填4 输入相同小写字符的地方要写相同的数5 …

[Leedcode][JAVA][第394题][字符串解码][栈][类型转换]

【问题描述】[中等] 给定一个经过编码的字符串&#xff0c;返回它解码后的字符串。编码规则为: k[encoded_string]&#xff0c;表示其中方括号内部的 encoded_string 正好重复 k 次。注意 k 保证为正整数。你可以认为输入字符串总是有效的&#xff1b;输入字符串中没有额外的空…

2019昆明计算机会议,计算机 | ACSAC 2019等国际会议信息6条

图形学与多媒体IPTA 2019International Conference on Image Processing Theory, Tools and Applications全文截稿: 2019-06-02开会时间: 2019-11-06会议难度: ★★CCF分类: 无会议地点: Istanbul, Turkey网址&#xff1a;http://www.ipta-conference.com/ipta19/The ninth Int…