学习HTML之路12（完结）

原创 于 2021-11-17 23:20:48 发布 · 476 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #html #css3

本文详细介绍了HTML中颜色的表示方法，包括RGB、十六进制和RGBA颜色模型，并提供了多种颜色值示例。此外，还讲解了如何使用HTML实体来表示特殊字符。

HTML 颜色

HTML 颜色由红色、绿色、蓝色混合而成。

颜色值

HTML 颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。

每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。

这个表格给出了由三种颜色混合而成的具体效果：

颜色值

颜色(Color)颜色十六进制(Color HEX)颜色RGB(Color RGB)
#000000rgb(0,0,0)
#FF0000rgb(255,0,0)
#00FF00rgb(0,255,0)
#0000FFrgb(0,0,255)
#FFFF00rgb(255,255,0)
#00FFFFrgb(0,255,255)
#FF00FFrgb(255,0,255)
#C0C0C0rgb(192,192,192)
#FFFFFFrgb(255,255,255)

1600万种不同颜色

三种颜色 红，绿，蓝的组合从0到255，一共有1600万种不同颜色(256 x 256 x 256)。

在下面的颜色表中你会看到不同的结果，从0到255的红色，同时设置绿色和蓝色的值为0,随着红色的值变化，不同的值都显示了不同的颜色。

Red LightColor HEXColor RGB
#000000 rgb(0,0,0)
#080000rgb(8,0,0)
#100000rgb(16,0,0)
#180000rgb(24,0,0)
#200000rgb(32,0,0)
#280000rgb(40,0,0)
#300000rgb(48,0,0)
#380000rgb(56,0,0)
#400000rgb(64,0,0)
#480000rgb(72,0,0)
#500000rgb(80,0,0)
#580000rgb(88,0,0)
#600000rgb(96,0,0)
#680000rgb(104,0,0)
#700000rgb(112,0,0)
#780000rgb(120,0,0)
#800000rgb(128,0,0)
#880000rgb(136,0,0)
#900000rgb(144,0,0)
#980000rgb(152,0,0)
#A00000rgb(160,0,0)
#A80000rgb(168,0,0)
#B00000rgb(176,0,0)
#B80000rgb(184,0,0)
#C00000rgb(192,0,0)
#C80000rgb(200,0,0)
#D00000rgb(208,0,0)
#D80000rgb(216,0,0)
#E00000rgb(224,0,0)
#E80000rgb(232,0,0)
#F00000rgb(240,0,0)
#F80000rgb(248,0,0)
#FF0000rgb(255,0,0)

灰暗色调

以下展示了黑色到灰色的渐变

Gray ShadesColor HEXColor RGB
#000000 rgb(0,0,0) 
#080808 rgb(8,8,8) 
#101010 rgb(16,16,16) 
#181818 rgb(24,24,24) 
#202020 rgb(32,32,32) 
#282828 rgb(40,40,40) 
#303030 rgb(48,48,48) 
#383838 rgb(56,56,56) 
#404040 rgb(64,64,64) 
#484848 rgb(72,72,72) 
#505050 rgb(80,80,80) 
#585858 rgb(88,88,88) 
#606060 rgb(96,96,96) 
#686868 rgb(104,104,104) 
#707070 rgb(112,112,112) 
#787878 rgb(120,120,120) 
#808080 rgb(128,128,128) 
#888888 rgb(136,136,136) 
#909090 rgb(144,144,144) 
#989898 rgb(152,152,152) 
#A0A0A0 rgb(160,160,160) 
#A8A8A8 rgb(168,168,168) 
#B0B0B0 rgb(176,176,176) 
#B8B8B8 rgb(184,184,184) 
#C0C0C0 rgb(192,192,192) 
#C8C8C8 rgb(200,200,200) 
#D0D0D0 rgb(208,208,208) 
#D8D8D8 rgb(216,216,216) 
#E0E0E0 rgb(224,224,224) 
#E8E8E8 rgb(232,232,232) 
#F0F0F0 rgb(240,240,240) 
#F8F8F8 rgb(248,248,248) 
#FFFFFF rgb(255,255,255) 

Web安全色?

数年以前，当大多数计算机仅支持 256 种颜色的时候，一系列 216 种 Web 安全色作为 Web 标准被建议使用。其中的原因是，微软和 Mac 操作系统使用了 40 种不同的保留的固定系统颜色（双方大约各使用 20 种）。

我们不确定如今这么做的意义有多大，因为越来越多的计算机有能力处理数百万种颜色，不过做选择还是你自己。

最初，216 跨平台 web 安全色被用来确保：当计算机使用 256 色调色板时，所有的计算机能够正确地显示所有的颜色。

0000000000330000660000990000CC0000FF
0033000033330033660033990033CC0033FF
0066000066330066660066990066CC0066FF
0099000099330099660099990099CC0099FF
00CC0000CC3300CC6600CC9900CCCC00CCFF
00FF0000FF3300FF6600FF9900FFCC00FFFF
3300003300333300663300993300CC3300FF
3333003333333333663333993333CC3333FF
3366003366333366663366993366CC3366FF
3399003399333399663399993399CC3399FF
33CC0033CC3333CC6633CC9933CCCC33CCFF
33FF0033FF3333FF6633FF9933FFCC33FFFF
6600006600336600666600996600CC6600FF
6633006633336633666633996633CC6633FF
6666006666336666666666996666CC6666FF
6699006699336699666699996699CC6699FF
66CC0066CC3366CC6666CC9966CCCC66CCFF
66FF0066FF3366FF6666FF9966FFCC66FFFF
9900009900339900669900999900CC9900FF
9933009933339933669933999933CC9933FF
9966009966339966669966999966CC9966FF
9999009999339999669999999999CC9999FF
99CC0099CC3399CC6699CC9999CCCC99CCFF
99FF0099FF3399FF6699FF9999FFCC99FFFF
CC0000CC0033CC0066CC0099CC00CCCC00FF
CC3300CC3333CC3366CC3399CC33CCCC33FF
CC6600CC6633CC6666CC6699CC66CCCC66FF
CC9900CC9933CC9966CC9999CC99CCCC99FF
CCCC00CCCC33CCCC66CCCC99CCCCCCCCCCFF
CCFF00CCFF33CCFF66CCFF99CCFFCCCCFFFF
FF0000FF0033FF0066FF0099FF00CCFF00FF
FF3300FF3333FF3366FF3399FF33CCFF33FF
FF6600FF6633FF6666FF6699FF66CCFF66FF
FF9900FF9933FF9966FF9999FF99CCFF99FF
FFCC00FFCC33FFCC66FFCC99FFCCCCFFCCFF
FFFF00FFFF33FFFF66FFFF99FFFFCCFFFFFF

  1. RGBA 的意思是（Red-Green-Blue-Alpha）它是在 RGB 上扩展包括了 “alpha” 通道，运行对颜色值设置透明度。

    div {

background:rgba(255,0,0,0.5);

}

    相对于使用 rgb(255,255,0)，使用 rgba(255,255,0,0.5) 可以实现设置颜色透明度的功能，这里的 0.5 表示透明度，范围 0~1，0 表示全透明。

    通常我们为了省略一个 0:

    div {
    background:rgba(255,0,0,.5);
}

    实例：

    <p style="background-color:rgb(255,255,0)">
通过 rbg 值设置背景颜色
</p>
<p style="background-color:rgba(255,255,0,0.25)">
通过 rbg 值设置背景颜色
</p>
<p style="background-color:rgba(255,255,0,0.5)">
通过 rbg 值设置背景颜色
</p>
<p style="background-color:rgba(255,255,0,0.75)">
通过 rbg 值设置背景颜色
</p>

    HTML 颜色名

    目前所有浏览器都支持以下颜色名。

    141个颜色名称是在HTML和CSS颜色规范定义的（17标准颜色，再加124）。下表列出了所有颜色的值，包括十六进制值。

     提示: 17标准颜色：黑色，蓝色，水，紫红色，灰色，绿色，石灰，栗色，海军，橄榄，橙，紫，红，白，银，蓝绿色，黄色。点击其中一个颜色名称（或一个十六进制值）就可以查看与不同文字颜色搭配的背景颜色

    HTML 颜色值

    颜色由红(R)、绿(G)、蓝(B)组成。

    颜色值

    颜色值由十六进制来表示红、绿、蓝（RGB）。

    每个颜色的最低值为 0(十六进制为 00)，最高值为 255(十六进制为FF)。

    十六进制值的写法为 # 号后跟三个或六个十六进制字符。

    三位数表示法为：#RGB，转换为6位数表示为：#RRGGBB。

    HTML 脚本

    JavaScript 使 HTML 页面具有更强的动态和交互性。

    HTML <script> 标签

    <script> 标签用于定义客户端脚本，比如 JavaScript。

    <script> 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。

    JavaScript 最常用于图片操作、表单验证以及内容动态更新。

    HTML<noscript> 标签

    <noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。

    <noscript>元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。

    只有在浏览器不支持脚本或者禁用脚本时，才会显示 <noscript> 元素中的内容

    HTML 脚本标签

    标签描述
    <script>定义了客户端脚本
    <noscript>定义了不支持脚本浏览器输出的文本

     

    HTML 字符实体

    HTML 中的预留字符必须被替换为字符实体。

    一些在键盘上找不到的字符也可以使用字符实体来替换。

    HTML 实体

    在 HTML 中，某些字符是预留的。

    在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。

    如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。 字符实体类似这样：

    &entity_name;

    或

    &#entity_number;

    如需显示小于号，我们必须这样写：&lt; 或 &#60; 或 &#060;

    Remark

    提示： 使用实体名而不是数字的好处是，名称易于记忆。不过坏处是，浏览器也许并不支持所有实体名称（对实体数字的支持却很好）

    HTML 统一资源定位器(Uniform Resource Locators)

    URL 是一个网页地址。

    URL可以由字母组成，如"runoob.com"，或互联网协议（IP）地址： 192.68.20.50。大多数人进入网站使用网站域名来访问，因为 名字比数字更容易记住。

    URL - 统一资源定位器

    Web浏览器通过URL从Web服务器请求页面。

    当你点击 HTML 页面中的某个链接时，对应的 <a> 标签指向万维网上的一个地址。

    一个统一资源定位器(URL) 用于定位万维网上的文档。

    说明:

    • scheme - 定义因特网服务的类型。最常见的类型是 http
    • host - 定义域主机（http 的默认主机是 www）
    • domain - 定义因特网域名，比如 runoob.com
    • :port - 定义主机上的端口号（http 的默认端口号是 80）
    • path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
    • filename - 定义文档/资源的名称

  3. 常见的 URL Scheme

    以下是一些URL scheme：

    Scheme访问用于...
    http超文本传输协议以 http:// 开头的普通网页。不加密。
    https安全超文本传输协议安全网页，加密所有信息交换。
    ftp文件传输协议用于将文件下载或上传至网站。
    file您计算机上的文件。
     

    URL 字符编码

    URL 只能使用 ASCII字符集

    来通过因特网进行发送。由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。

    URL 编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符。

    URL 不能包含空格。URL 编码通常使用 + 来替换空格。

    HTML 速查列表

    HTML 速查列表. 你可以打印它，以备日常使用。

    HTML 基本文档

    <!DOCTYPE html> <html> <head> <title>文档标题</title> </head> <body> 可见文本... </body> </html>

    基本标签（Basic Tags）

    <h1>最大的标题</h1> <h2> . . . </h2> <h3> . . . </h3> <h4> . . . </h4> <h5> . . . </h5> <h6>最小的标题</h6> <p>这是一个段落。</p> <br> （换行） <hr> （水平线） <!-- 这是注释 -->

    文本格式化（Formatting）

    <b>粗体文本</b> <code>计算机代码</code> <em>强调文本</em> <i>斜体文本</i> <kbd>键盘输入</kbd> <pre>预格式化文本</pre> <small>更小的文本</small> <strong>重要的文本</strong> <abbr> （缩写） <address> （联系信息） <bdo> （文字方向） <blockquote> （从另一个源引用的部分） <cite> （工作的名称） <del> （删除的文本） <ins> （插入的文本） <sub> （下标文本） <sup> （上标文本）

    链接（Links）

    普通的链接：<a href="http://www.example.com/">链接文本</a> 图像链接： <a href="http://www.example.com/"><img src="URL" alt="替换文本"></a> 邮件链接： <a href="mailto:webmaster@example.com">发送e-mail</a> 书签： <a id="tips">提示部分</a> <a href="#tips">跳到提示部分</a>

    图片（Images）

    <img loading="lazy" src="URL" alt="替换文本" height="42" width="42">

    样式/区块（Styles/Sections）

    <style type="text/css">

    h1 {color:red;} p {color:blue;}

    </style> <div>文档中的块级元素</div> <span>文档中的内联元素</span>

    无序列表

    <ul> <li>项目</li> <li>项目</li> </ul>

    有序列表

    <ol> <li>第一项</li> <li>第二项</li> </ol>

    定义列表

    <dl> <dt>项目 1</dt> <dd>描述项目 1</dd> <dt>项目 2</dt> <dd>描述项目 2</dd> </dl>

    表格（Tables）

    <table border="1"> <tr> <th>表格标题</th> <th>表格标题</th> </tr> <tr> <td>表格数据</td> <td>表格数据</td> </tr> </table>

    框架（Iframe）

    <iframe src="demo_iframe.htm"></iframe>

    表单（Forms）

    <form action="demo_form.php" method="post/get"> <input type="text" name="email" size="40" maxlength="50"> <input type="password"> <input type="checkbox" checked="checked"> <input type="radio" checked="checked"> <input type="submit" value="Send"> <input type="reset"> <input type="hidden"> <select> <option>苹果</option> <option selected="selected">香蕉</option> <option>樱桃</option> </select> <textarea name="comment" rows="60" cols="20"></textarea> </form>

    实体（Entities）

    &lt; 等同于 < &gt; 等同于 > &#169; 等同于 ©

    HTML 标签简写及全称

    下表列出了 HTML 标签简写及全称：

    标签英文全称中文说明
    aAnchor锚
    abbrAbbreviation缩写词
    acronymAcronym取首字母的缩写词
    addressAddress地址
    altalter替用(一般是图片显示不出的提示)
    bBold粗体（文本）
    bdoDirection of Text Display文本显示方向
    bigBig变大（文本）
    blockquoteBlock Quotation区块引用语
    brBreak换行
    cellcell巢
    cellpaddingcellpadding巢补白
    cellspacingcellspacing巢空间
    centerCentered居中（文本）
    citeCitation引用
    codeCode源代码（文本）
    ddDefinition Description定义描述
    delDeleted删除（的文本）
    dfnDefines a Definition Term定义定义条目
    divDivision分隔
    dlDefinition List定义列表
    dtDefinition Term定义术语
    emEmphasized加重（文本）
    fontFont字体
    h1~h6Header 1 to Header 6标题1到标题6
    hrHorizontal Rule水平尺
    hrefhypertext reference超文本引用
    iItalic斜体（文本）
    iframeInline frame定义内联框架
    insInserted插入（的文本）
    kbdKeyboard键盘（文本）
    liList Item列表项目
    nlnavigation lists导航列表
    olOrdered List排序列表
    optgroupOption group定义选项组
    pParagraph段落
    prePreformatted预定义格式（文本 ）
    qQuotation引用语
    relReload加载
    s/ strikeStrikethrough删除线
    sampSample示例（文本
    smallSmall变小（文本）
    spanSpan范围
    srcSource源文件链接
    strongStrong加重（文本）
    subSubscripted下标（文本）
    supSuperscripted上标（文本）
    tdtable data cell表格中的一个单元格
    thtable header cell表格中的表头
    trtable row表格中的一行
    ttTeletype打印机（文本）
    uUnderlined下划线（文本）
    ulUnordered List不排序列表
    varVariable变量（文本）

     

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

超翔之逸

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值