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

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

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

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

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

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

如下面例子：

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

语法：

文本

<!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>

运行结果

html:(8):span标签和q标签相关推荐

前端第二章：5.语义化标签、p标签、q标签、em标签、strong标签、blockquote标签、br标签、h标签
一.语义化标签 0.在页面中独占一行的元素被称为块元素 0.1 不要关注html的显示,要关注他们的语义 0.2 在页面中不会独占一行的元素叫做行内元素(inline element,内联元素) 1 ...
html5 a标签,img标签，em和i标签，strong和b标签,q标签
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
q标签，短文本引用；blockquote标签，长文本引用
<q>标签,短文本引用 <q>引用文本</q>,默认显示双引号,不需要在文本中添加 <blockquote>标签,长文本引用浏览器对<block ...
blockquote 和 q 标签 css样式
blockquote与q标签都是用来表示内容引用的.两者有什么区别呢? 简单说,blockquote重点在block上,它包含的子元素要求是块元素(block-level content),比如p.d ...
CSS系列之美化网页/span标签和div标签/字体样式/文本样式
CSS系列之美化网页/span标签和div标签/字体样式/文本样式 01 span标签和div标签 span标签的作用能让几个文字或者某个词语凸显出来属于行内元素 div标签属于块级元素程序示 ...
html标签 q,HTML标签之q blockquote
两个标签都表示"引用". 不同的是,q标签是行内元素,在内容的开始和结尾处会包有"",而 blockquote是块级元素,默认带有左右40px的外间距,不带&q ...
【Web】HTML（No.03）HTML标签（一）标题标签、段落标签、水平线标签、换行标签、div/span标签、图像标签、链接标签、base标签、特殊字符标签、注释标签、文本格式化标签
HTML标签分类在HTML页面中,带有"< >"符号的元素被称为HTML标签,如上面提到的 HTML.head.body都是HTML骨架结构标签.所谓标签就是放在&q ...
html语言q,HTML: q 标签
HTML: 标签 HTML引用标签 ( )表示一个封闭的并且是短的行内引用的文本. 这个标签是用来引用短的文本,所以请不要引入换行符; 对于长的文本的引用请使用替代.此标签通常也称为元素. 在线示 ...
html+css——q标签
比如在你的网页的文章里想引用某个作家的一句诗,这样会使你的文章更加出彩,那么<q>标签是你所需要的. 语法: <q>引用文本</q> 如下面例子: ...

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

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

<q>标签，短文本引用

html:(8):span标签和q标签相关推荐

最新文章

热门文章