引用大作战
当你词汇量不够用怎么办，那当然是引用他人的名言。而在html中，q、blockquot、cite、abbr、dfn、add元素等都可以承担起“引用”的任务。
q元素
q元素用于定义比较短的引用，流量器通常会在引用的内容两侧添加引号。
演示代码如下：
<!DOCTYPE html>
<html>
<head>
<title>q元素演示</title>
</head>
<body>
<!-- 请在此添加q元素的演示 -->
<p>孔子有云：<q>学而不思则罔，思而不学则殆</q></p>
</body>
</html>
效果图：（引用的部分加上双引号）
blockquote元素
而引用一大段文本，我们通常是使用blockquote元素。浏览器会使用缩进的方式来显示该文本。
另外，我们可以通过cite属性来指定引用来源。
演示代码如下：
<!DOCTYPE html>
<html>
<head>
<title>blockquote元素演示</title>
</head>
<body>
<p>《中国合伙人》中有很多文字还是很不错的：</p>
<!-- 请在此处添blockquote元素的演示 -->
<blockquote>
<p>梦想是什么，梦想就是一种让你感到坚持就是幸福的东西。</p>
<p>当才华撑不起野心的时候，只能安静读书。</p>
<p>最大的骗子其实是我们自己，因为我们总是想改变别人，而拒绝改变自己。</p>
<p>年轻的时候，不该什么都不想，也不能想太多。想得太多会毁了你，我相信这话……成功路上最心酸的是要耐得住寂寞、熬得住孤独，总有那么一段路是你一个人在走，一个人坚强和勇敢。也许这个过程要持续很久，但如果你挺过去了，最后的成功就属于你。</p>
<p>我从来就没有什么梦想，我也不知道什么是梦想，我只知道什么是失败，失败无处不在，人生如此绝望，这就是现实！掉在水里你不会淹死，呆在水里你才会淹死，你只有游，不停地往前游。那些从一开始就选择放弃的人他不会失败，因为他们从一开始就失败了，失败并不可怕，害怕失败才真正可怕。</p>
</blockquote>
<!-- 请在此处添blockquote元素的演示 -->
</body>
</html>
效果图：（文本加了缩进效果，可能有人会这样认为这不是引用，连个双引号都没有，而这就是html5所提倡的语义和呈现分离）
所以如果要实现“美颜”的效果，则要用到css，也就是style元素。
代码如下：
<!DOCTYPE html>
<html>
<head>
<title>blockquote元素演示</title>
<style type="text/css">
blockquote {
display:block;
background: #fff;
padding: 15px 20px 15px 45px;
margin: 0 0 20px;
position: relative;
/*字体*/
font-family: Georgia, serif;
font-size: 16px;
line-height: 1.2;
color: #666;
text-align: justify;
/*边框 - (选项)*/
border-left: 15px solid #429296;
border-right: 2px solid #429296;
/*盒子阴影 - (选项)*/
-moz-box-shadow: 2px 2px 15px #ccc;
-webkit-box-shadow: 2px 2px 15px #ccc;
box-shadow: 2px 2px 15px #ccc;
}
blockquote::before {
content: "\201C"; /*左双引号的Unicode编码*/
/*字体*/
font-family: Georgia, serif;
font-size: 60px;
font-weight: bold;
color: #999;
/*位置*/
position: absolute;
left: 10px;
top:5px;
}
blockquote::after {
content: ""; /*如果要显示右双引号，则写 content: "\201D"; */
}
</style>
</head>
<body>
<p><cite>《中国合伙人》</cite>中有很多文字还是很不错的：</p>
<blockquote>
<p>梦想是什么，梦想就是一种让你感到坚持就是幸福的东西。</p>
<p>当才华撑不起野心的时候，只能安静读书。</p>
<p>最大的骗子其实是我们自己，因为我们总是想改变别人，而拒绝改变自己。</p>
<p>年轻的时候，不该什么都不想，也不能想太多。想得太多会毁了你，我相信这话……成功路上最心酸的是要耐得住寂寞、熬得住孤独，总有那么一段路是你一个人在走，一个人坚强和勇敢。也许这个过程要持续很久，但如果你挺过去了，最后的成功就属于你。</p>
<p>我从来就没有什么梦想，我也不知道什么是梦想，我只知道什么是失败，失败无处不在，人生如此绝望，这就是现实！掉在水里你不会淹死，呆在水里你才会淹死，你只有游，不停地往前游。那些从一开始就选择放弃的人他不会失败，因为他们从一开始就失败了，失败并不可怕，害怕失败才真正可怕。</p>
</blockquote>
</body>
</html>
效果图：（美丽许多~）
cite元素
cite元素通常用来定义作品的标题，比如书籍的标题、歌曲的标题等等，比如像刚刚的例子中，中国合伙人可以用cite元素包裹起来。默认样式是斜体。
演示代码：
<p><cite>《中国合伙人》</cite>中有很多文字还是很不错的：</p>
abbr元素
abbr元素用于定义简称，或者是缩写，配合全局属性title，可以指定该缩进代表的完整含义。
举个栗子：
<p><abbr title="鱼C工作室">FishC.com</abbr> was founded in 2010.</p>
dfn元素
dfn元素用于表现定义中的术语，术语又称为技术名词，是指在特定专业领域中的一般概念的词语的一个指称。像HTML就是一个术语。
演示代码：
<p><dfn>HTML</dfn>是一门用于创建网页的标准标记语言。</p>
效果图：
address元素
顾名思义，address就是定义文档或者文章的作者拥有者联系信息，可以是一个地址，电话，微信等等。
举个栗子：
<address>
<strong>联系我们</strong><br>
邮箱：<a href="mailto:fishc_service@126.com">fishc_service@126.com</a><br>
旺旺：dingdingjiayu<br>
微信：FishC_Studio（公众号）<br>
</address>
效果图：
魑魅魍魉
在网页上遇到生僻词，旁边如果有拼音注解，体验感蹭蹭上升，而ruby、rt、rp元素就是来干这事儿的。
ruby、rt、rp元素
ruby元素要搭配其他两个元素来使用的，
rt元素是用来标记这个注音符号的，
rp元素则是用来标记浏览器不支持ruby元素时，所显示的内容。
举个栗子：
<ruby>魑<rp>（</rp><rt>chī</rt><rp>）</rp></ruby>
<ruby>魅<rp>（</rp><rt>mèi</rt><rp>）</rp></ruby>
<ruby>魍<rp>（</rp><rt>wǎng</rt><rp>）</rp></ruby>
<ruby>魉<rp>（</rp><rt>liǎng</rt><rp>）</rp></ruby>
效果图：
怀古
从前我们的书写方式是从上至下，从右往左。bdo元素可以使我们实现怀古情怀。
bdo元素
bdo元素允许修改默认文本方向。dir默认是ltr——left to right（从左往右），还可以指定rtl（从右往左）。
例子：
<bdo dir="rtl">
<ruby>魑 <rt>chī</rt></ruby>
<ruby>魅 <rt>mèi</rt></ruby>
<ruby>魍 <rt>wǎng</rt></ruby>
<ruby>魉 <rt>liǎng</rt></ruby>
</bdo>
效果图：（顺序相反）
结语
今天内容有点多，不过坚持下来了，撒花~~
167
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
