暂无图片
暂无图片
暂无图片
暂无图片
暂无图片
首页 / 运维开发必备技能！陪你一起复习巩固前端，攻破第一道防线。

运维开发必备技能！陪你一起复习巩固前端，攻破第一道防线。

不背锅运维 2022-06-21
249

写在开篇

本篇陪你一起复习巩固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>

效果如下图：



写在最后

笔者突然发现一个问题，早上早点起来给大家撸文更有精神，早上真是精力充沛、思维敏捷啊！望大家能持续对我们进行关注、点赞、收藏、转发！非常感谢。


前端开发html代码
文章转载自不背锅运维，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

评论