010 - 引用大作战

不二如是 · 发表于 2018-7-25 11:02:04

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由不二如是于 2021-6-4 17:37 编辑

上一集：009 - 所见即所得

在线视频：

课程思维导图

猛戳

登录/注册后可看大图

超清

前言

时隔20多天，失踪人口终于回归了。。。

很简单，我们没有去hi，理由很简单：

游客，如果您要查看本帖隐藏内容请回复

本次我们学习8个标签，都可以用来在页面中引用相关东西。

1、q元素

q元素用于定义短的引用，行内元素。

就像视频中小甲鱼名言：

不思不学则网贷。。。

我们就可以这样用q元素：

<span>小甲鱼名言：</span><q>不思不学则网贷</q>

复制代码

2、blockquote元素

blockquote元素用于引用长的内容，块级元素。

例如：

引用：
<blockquote>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta exercitationem iusto porro, quae veniam vitae! Ad dolorem doloribus id illo, perferendis totam voluptate? A deleniti explicabo ipsam neque omnis vero.
</blockquote>

复制代码

图中箭头所指即为元素自带的缩进。

有鱼油会问了：

为啥还要搞出个引用类型元素呢？

答案很简答：

我们最近的课程都是在从不同角度，来解释语义与实现分离的理念。

让专业的元素去看它该干的事情，术业有专攻，下一讲的核心点也是这个哦～

我们还可以通过css进行样式设置：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>blockquote</title>
<style>
blockquote{
font: 14px/22px normal helvetica, sans-serif;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 50px;
padding-left: 15px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
border-left: 3px solid #2ebb96;
background-color:#f1f1f1
}
</style>
</head>
<body>
引用：
<blockquote>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta exercitationem iusto porro, quae veniam vitae! Ad dolorem doloribus id illo, perferendis totam voluptate? A deleniti explicabo ipsam neque omnis vero.
</blockquote>
</body>
</html>

复制代码

更多请看：传送门

3、cite元素

cite元素用于定义作品（比如书籍、歌曲、电影、电视节目、绘画、雕塑等等）的标题。

很简单，例如上面q元素中的“小甲鱼名言”被span元素包裹，我们可用cite元素替换：

<cite>小甲鱼名言：</cite><q>不思不学则网贷</q>

复制代码

cite元素中的内容，会自动变为斜体。

4、abbr元素

abbr元素用于定义简称或缩写。

代码：

The <abbr title="鱼C工作室">FishC</abbr> was founded in 2010.

复制代码

通过设置abbr元素的title属性，来完成提示作用。

5、dfn元素

dfn元素用来定义某个专业的术语，防止外行人看到简写后懵逼。

代码：

<p><dfn>鱼C-吹水阁</dfn>常识的解药</p>

复制代码

被dfn元素包裹的内容，会显示为斜体。

如果需要更多样式设置请自行CSS（较为鸡肋的一个标签）。

6、address元素

address元素用于定义文档或文章的作者/拥有者的联系信息。

代码：

<address>
Written by <a href="mailto:fishc_service@126.com">FishC 不二如是</a>.<br>
Welcome to FishC.com
</address>

复制代码

结合我们学过的a元素，学一个新玩法。

当我们单击“蓝色部分”时，会自动调用系统的邮件功能。

7、ruby+rt+rp元素

这三个元素有意思了，可以用来备注汉语拼音。

最外层的ruby元素定义 ruby 注释（中文注音或字符）。

rt元素定义字符（中文注音或字符）的解释或发音。

rp元素在 ruby 注释中使用，以定义不支持 ruby 元素的浏览器所显示的内容。

就像课程中博学的小甲鱼老师说：

离未罔两，不对，是，魑魅魍魉

遇到这种尴尬的时候，就要用它们三兄弟了。

代码：

<ruby>
魑 <rp>对不起您的浏览器不支持拼音注释</rp><rt>chī</rt>
魅 <rp>对不起您的浏览器不支持拼音注释</rp><rt>mèi</rt>
魍 <rp>对不起您的浏览器不支持拼音注释</rp><rt>wǎng</rt>
魉 <rp>对不起您的浏览器不支持拼音注释</rp><rt>liǎng</rt>
</ruby>

复制代码

当我们的浏览器不支持ruby元素时，才会看到rp元素中的内容。

8、bdo元素

bdo元素结合dir属性可用于修改文本方向。

dir有两个值，ltr、rtl

ltr，左向右：

rtl，右向左：

代码：

<p>ltr(左向右):</p>
<bdo dir="ltr">
Welcome to 鱼C论坛
</bdo>
<p>rtl（右向左):</p>
<bdo dir="rtl">
Welcome to 鱼C论坛
</bdo>

复制代码

课后作业，完成了吗？

传送门

登录/注册后可看大图

下一集：011 - 格式化大比拼

如果有收获，别忘了评分

：

登录/注册后可看大图

这位鱼油，如果喜欢本系列学习笔记，请订阅专辑☞（传送门）（不喜欢更要订阅

）

登录/注册后可看大图

floride · 发表于 2018-7-26 19:26:04

floride · 发表于 2018-7-26 19:45:43

怎么找不到课后作业，上一期的也没有。

cjj735243954 · 发表于 2018-8-4 11:41:13

新手·ing · 发表于 2018-8-9 18:31:54

看看

邓文龙0513 · 发表于 2018-9-14 23:43:15

好厉害

无敌太刀 · 发表于 2018-10-2 20:58:07

·····

Azathouth · 发表于 2018-10-6 14:48:30

臭鱼小虾 · 发表于 2018-10-7 13:23:35

w877713458 · 发表于 2018-10-29 17:02:03

123

782173264 · 发表于 2018-10-31 15:54:58

刹那疾风 · 发表于 2018-11-26 15:58:43

嘿，继续继续学习咯

JustinZhu · 发表于 2018-11-29 15:03:24

GodChan · 发表于 2018-12-19 22:46:00

拯救世界的同学 · 发表于 2019-1-10 13:54:38

看看

chenzhiqing · 发表于 2019-2-9 12:44:55

李小控 · 发表于 2019-2-15 16:04:07

加油，一起努力

飞奔的上校 · 发表于 2019-3-24 15:00:52

494303810 · 发表于 2019-3-25 22:30:21

.。。。。。。。。。。。。。

紫殇 · 发表于 2019-4-16 17:11:18

6666666666

账号		自动登录	找回密码
密码			立即注册

[学习笔记] 010 - 引用大作战

马上注册，结交更多好友，享用更多功能^_^

评分

本帖被以下淘专辑推荐:

浏览过的版块