写在开篇
本篇陪你一起复习巩固html中的知识点：文本格式化、引用、颜色
HTML文本格式化
HTML包含很多供格式化输出的元素，用于定义具有特殊含义的文本。
- 看下面代码
<!DOCTYPE html> <html> <head> <title></title> <meta charset="UTF-8"/> </head> <body> <p><b>彩虹运维技术栈社区</b></p> <p><i>公账号ID：TtrOpsStack</i></p> <p><sub>诚邀您的关注，我们会持续分享原创技术文字</sub></p> </body> </html>
- 效果：
常用的文本格化式标签如下：
<b> - 粗体文本 <strong> - 重要文本 <i> - 斜体文本 <em> - 强调文本 <mark> - 标记文本 <small> - 较小的文本 <del> - 删除的文本 <ins> - 插入文本 <sub> - 下标文本 <sup> - 上标文本
HTML引用
1. 长引用
- 什么是长引用
HTML <blockquote> 元素定义从另一个源引用的节，浏览器通常会对 <blockquote> 元素进行缩进处理。
- 看下面代码
<!DOCTYPE html> <html> <head> <title></title> <meta charset="UTF-8"/> </head> <body> <p>彩虹运维技术栈社区</p> <blockquote cite="https://mp.weixin.qq.com/s/v7OqWbUJxoswdtQIwAguxQ"> <p>TtrOpsStack公众号，开启有偿征稿通道啦！用你的才华来赚零花钱吧！</p> <a href="https://mp.weixin.qq.com/s/v7OqWbUJxoswdtQIwAguxQ">猛戳了解...</a> </blockquote> </body> </html>
- 效果如下
2. 短引用
- 什么是短引用
HTML <q> 元素定义短的引用，浏览器通常会为 <q> 元素周围插入引号。
- 看下面代码
<!DOCTYPE html> <html> <head> <title></title> <meta charset="UTF-8"/> </head> <body> <p>彩虹运维技术栈社区</p> <p>公众号：<q>TtrOpsStack</q>，开启有偿征稿通道啦！用你的才华来赚零花钱吧！猛戳下面链接进行了解！</p> <a href="https://mp.weixin.qq.com/s/v7OqWbUJxoswdtQIwAguxQ">请用力猛戳...</a> </body> </html>
- 效果如下
3. 缩写词
什么是缩写词？说白了就是当您将鼠标移到元素上时，使用全局标题属性来显示缩写/首字母缩写的描述。
- 看下面代码
<!DOCTYPE html> <html> <head> <title></title> <meta charset="UTF-8"/> </head> <body> <p>彩虹运维技术栈社区</p> <p>公众号ID是：<abbr title="Taste The Rainbow Operations Stack Community">TtrOpsStack</abbr></p> </body> </html>
- 效果如下：
当鼠标移动到TtrOpsStack，就会提示全称Taste The Rainbow Operations Stack Community
4. 联系信息
address元素可以用于联系信息，联系信息可以是电子邮件地址、URL、物理地址、电话号码、社交媒体等。
- 看下面代码
<!DOCTYPE html> <html> <head> <title></title> <meta charset="UTF-8"/> </head> <body> <p>彩虹运维技术栈社区</p> <p>联系我们：</p> <address> 微信：TtrOps<br> 公账号：TtrOpsStack<br> 邮箱：ttropsstack@139.com </address> </body> </html>
- 效果如下:
5. 著作标题
关于cite元素，HTML中的cite元素可用于定义著作的标题。
- 看下面代码
<!DOCTYPE html> <html> <head> <title></title> <meta charset="UTF-8"/> </head> <body> <p>彩虹象征的寓意是美好、童话、幻想。</p> <p>彩虹在雨后才会出现，说明所要追求的美丽，要在历经一定的挫折之后才能达到想要的目标或是美好的希望。也是一种积极、健康的生活观、生活方式。</p> <p>不经历风雨怎能见彩虹？</p> <img src="./img/img_18.png" width="150" height="150" alt="图片丢失"> <p>依托彩虹的意义，取名为彩虹运维技术栈社区，公账号ID：TtrOpsStack</p> <p>诚邀您的扫码关注</p> <img src="./img/img_19.png" width="300" height="300" alt="图片丢失"> <p><cite>TtrOpsStack</cite>创办于2022年4月底。</p> </body> </html>
- 效果如下
6. 双向重写
HTML bdo元素用于覆盖当前文本方向，废话不说，直接看代码
- 代码如下
<!DOCTYPE html> <html> <head> <title></title> <meta charset="UTF-8"/> </head> <body> <bdo dir="rtl">彩虹运维技术栈社区</bdo> </body> </html>
- 效果如下
7. 小总结
<abbr> 定义缩写或首字母缩略语。 <address> 定义文档作者或拥有者的联系信息。 <bdo> 定义文本方向。 <blockquote> 定义从其他来源引用的节。 <cite> 定义著作的标题。 <q> 定义短的行内引用。
HTML颜色
HTML颜色由预定义的颜色名称指定，或由RGB、HEX、HSL、RGBA或HSLA值指定。
1. Colors颜色
小栗子1：可以使用颜色名称指定颜色，看下面代码：
<!DOCTYPE html> <html> <head> <title></title> <meta charset="UTF-8"/> </head> <body> <h1 style="background-color:Tomato;">彩虹运维技术栈社区，公账号ID：TtrOpsStack</h1> <h1 style="background-color:Orange;">彩虹运维技术栈社区，公账号ID：TtrOpsStack</h1> <h1 style="background-color:DodgerBlue;">彩虹运维技术栈社区，公账号ID：TtrOpsStack</h1> <h1 style="background-color:MediumSeaGreen;">彩虹运维技术栈社区，公账号ID：TtrOpsStack</h1> <h1 style="background-color:Gray;">彩虹运维技术栈社区，公账号ID：TtrOpsStack</h1> <h1 style="background-color:SlateBlue;">彩虹运维技术栈社区，公账号ID：TtrOpsStack</h1> <h1 style="background-color:Violet;">彩虹运维技术栈社区，公账号ID：TtrOpsStack</h1> <h1 style="background-color:LightGray;">彩虹运维技术栈社区，公账号ID：TtrOpsStack</h1> </body> </html>
效果如下:
小栗子2：设置HTML元素的背景色，看下面代码：
<!DOCTYPE html> <html> <head> <title></title> <meta charset="UTF-8"/> </head> <body> <h1 style="background-color:DodgerBlue;">彩虹运维技术栈社区</h1> <p style="background-color:Tomato;">公众号ID：TtrOpsSTack，诚邀您的关注！</p> </body> </html>
效果如下
小栗子3：设置文本的颜色，看下面代码：
<!DOCTYPE html> <html> <head> <title></title> <meta charset="UTF-8"/> </head> <body> <h1 style="color:Tomato;">彩虹运维技术栈社区</h1> <p style="color:DodgerBlue;">公众号ID：TtrOpsSTack</p> <p style="color:MediumSeaGreen;">诚邀您的关注！</p> </body> </html>
效果如下
小栗子4：设置边框的颜色，看下面代码：
<!DOCTYPE html> <html> <head> <title></title> <meta charset="UTF-8"/> </head> <body> <h1 style="border: 2px solid Tomato;">彩虹运维技术栈社区，公众号ID：TtrOpsSTack，诚邀您的关注！</h1> <h1 style="border: 2px solid DodgerBlue;">彩虹运维技术栈社区，公众号ID：TtrOpsSTack，诚邀您的关注！</h1> <h1 style="border: 2px solid Violet;">彩虹运维技术栈社区，公众号ID：TtrOpsSTack，诚邀您的关注！</h1> </body> </html>
效果如下
小栗子5：还可以使用RGB值、十六进制值、HSL值、RGBA值和HSLA值指定颜色，以下三个
元素的背景色设置为RGB、HEX和 HSL值
<!DOCTYPE html> <html> <head> <title></title> <meta charset="UTF-8"/> </head> <body> <div style="background-color:rgb(255, 99, 71);"> <p>彩虹运维技术栈社区，公众号ID：TtrOpsSTack，诚邀您的关注！</p> </div> <div style="background-color:#ff6347;"> <p>彩虹运维技术栈社区，公众号ID：TtrOpsSTack，诚邀您的关注！</p> </div> <div style="background-color:hsl(9, 100%, 64%);"> <p>彩虹运维技术栈社区，公众号ID：TtrOpsSTack，诚邀您的关注！</p> </div> </body> </html>
效果如下：
小栗子6：以下两个div元素的背景色设置为RGBA和HSLA值，这为颜色添加了一个Alpha通道（还设置了50%的透明度）
<!DOCTYPE html> <html> <head> <title></title> <meta charset="UTF-8"/> </head> <body> <div style="background-color:rgba(255, 99, 71, 0.5);"> <p>彩虹运维技术栈社区，公众号ID：TtrOpsSTack，诚邀您的关注！</p> </div> <div style="background-color:hsla(9, 100%, 64%, 0.5);"> <p>彩虹运维技术栈社区，公众号ID：TtrOpsSTack，诚邀您的关注！</p> </div> </body> </html>
效果如下：
2. RGB和RGBA颜色
RGB颜色值表示红色、绿色和蓝色光源，RGBA 颜色值是带有Alpha通道（不透明度）的RGB的扩展。
- 在HTML中，可以使用以下公式将颜色指定为 RGB值：
rgb(red, green, blue)
每个参数（红色、绿色和蓝色）都定义颜色的强度，其值介于0和255之间，这意味着有256 x 256 x 256=16777216种可能的颜色！
小栗子1：
<!DOCTYPE html> <html> <head> <title>陪你一起复习巩固前端技能</title> <meta charset="UTF-8"/> </head> <body> <h1 style="background-color:rgb(255, 0, 0);">彩虹运维技术栈社区</h1> <h1 style="background-color:rgb(0, 0, 255);">公众号ID：TtrOpsStack</h1> <h1 style="background-color:rgb(60, 179, 113);">诚邀您的关注</h1> <h1 style="background-color:rgb(238, 130, 238);">我们会持续分享原创技术文章</h1> <h1 style="background-color:rgb(255, 165, 0);">欢迎关注、点赞、收藏、转发！</h1> <h1 style="background-color:rgb(106, 90, 205);">在此对广大朋友们敬上最诚挚的感谢！</h1> </body> </html>
效果如下：
小栗子2：灰色阴影怎么配？，灰度通常使用三个参数的相等值来定义
<!DOCTYPE html> <html> <head> <title>陪你一起复习巩固前端技能</title> <meta charset="UTF-8"/> </head> <body> <h1 style="background-color:rgb(60, 60, 60);">彩虹运维技术栈社区</h1> <h1 style="background-color:rgb(100, 100, 100);">公众号ID：TtrOpsStack</h1> <h1 style="background-color:rgb(140, 140, 140);">诚邀您的关注</h1> <h1 style="background-color:rgb(180, 180, 180));">我们会持续分享原创技术文章</h1> <h1 style="background-color:rgb(200, 200, 200)">欢迎关注、点赞、收藏、转发！</h1> <h1 style="background-color:rgb(240, 240, 240);">在此对广大朋友们敬上最诚挚的感谢！</h1> </body> </html>
效果如下：
小栗子3：RGBA颜色值怎么配？RGBA颜色值是带有Alpha通道的RGB颜色值的扩展（指定颜色的不透明度）
RGBA 颜色值指定为：
rgba(red, green, blue, alpha)
alpha 参数是介于0.0（完全透明）和1.0（完全不透明）之间的数字
看下面代码：
<!DOCTYPE html> <html> <head> <title>陪你一起复习巩固前端技能</title> <meta charset="UTF-8"/> </head> <body> <h1 style="background-color:rgba(255, 99, 71, 0);">彩虹运维技术栈社区</h1> <h1 style="background-color:rgba(255, 99, 71, 0.2);">公众号ID：TtrOpsStack</h1> <h1 style="background-color:rgba(255, 99, 71, 0.4);">诚邀您的关注</h1> <h1 style="background-color:rgba(255, 99, 71, 0.6);">我们会持续分享原创技术文章</h1> <h1 style="background-color:rgba(255, 99, 71, 0.8)">欢迎关注、点赞、收藏、转发！</h1> <h1 style="background-color:rgba(255, 99, 71, 1);">在此对广大朋友们敬上最诚挚的感谢！</h1> </body> </html>
效果如下图：
写在最后
笔者突然发现一个问题，早上早点起来给大家撸文更有精神，早上真是精力充沛、思维敏捷啊！望大家能持续对我们进行关注、点赞、收藏、转发！非常感谢。
