010 - 引用大作战
本帖最后由 不二如是 于 2021-6-4 17:37 编辑上一集：009 - 所见即所得
在线视频：
https://www.bilibili.com/video/BV1QW411N762?p=11
课程思维导图
猛戳http://xxx.fishc.com/forum/201803/31/110408mxpszds1j1xxxahm.gif超清
前言
时隔20多天，失踪人口终于回归了。。。
很简单，我们没有去hi，理由很简单：
**** Hidden Message *****
本次我们学习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>
课后作业，完成了吗？
传送门
http://xxx.fishc.com/forum/201803/20/101934b3igkgm9hgbgz0ck.gif
下一集：011 - 格式化大比拼
如果有收获，别忘了评分{:10_281:} ：
http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油，如果喜欢本系列学习笔记，请订阅 专辑☞（传送门）（不喜欢更要订阅{:10_297:} ）
http://xxx.fishc.com/forum/201803/21/151715umqz1qoywp11wjbq.gif
{:7_146:} 怎么找不到课后作业，上一期的也没有。 233 看看 好厉害 ····· 666 {:5_90:} 123
kyi 嘿，继续继续学习咯 kkk 1 看看 999 加油，一起努力 回复 .。。。。。。。。。。。。。 6666666666