马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 不二如是 于 2021-6-4 17:37 编辑
在线视频：
课程思维导图
前言
时隔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>
课后作业，完成了吗？
如果有收获，别忘了评分 ：
这位鱼油，如果喜欢本系列学习笔记，请订阅 专辑☞（ 传送门）（ 不喜欢更要订阅 ）
| 
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2018-7-25 11:02:04
置顶卡
千斤顶
显身卡
发表于 2018-7-26 19:26:04
发表于 2018-8-4 11:41:13
