HTML自学手册-基础篇5

HTML 基础颜色:红、绿、蓝色

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

每种颜色的最小值是0(十六进制:#00)。最大值是255(十六进制:#FF)。

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

HTML自学手册-基础篇5 插图1
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>自学元宇宙 (liboven.cn)</title> 
</head> 
<body>

<p style="background-color:#FFFF00">
通过十六进制设置背景颜色
</p>

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

<p style="background-color:yellow">
通过颜色名设置背景颜色
</p>

</body>
</html>

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

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

HTML自学手册-基础篇5 插图2

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

HTML自学手册-基础篇5 插图3

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

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

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

HTML自学手册-基础篇5 插图4

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标准颜色:黑色,蓝色,水,紫红色,灰色,绿色,石灰,栗色,海军,橄榄,橙,紫,红,白,银,蓝绿色,黄色;点击其中一个颜色名称(或一个十六进制值)就可以查看与不同文字颜色搭配的背景颜;


按十六进制的值排序

单击一个颜色名或者 16 进制值,就可以查看与不同文字颜色搭配的背景颜色

HTML自学手册-基础篇5 插图5
HTML自学手册-基础篇5 插图6
HTML自学手册-基础篇5 插图7
HTML自学手册-基础篇5 插图8
HTML自学手册-基础篇5 插图9
HTML自学手册-基础篇5 插图10
HTML自学手册-基础篇5 插图11
HTML自学手册-基础篇5 插图12
HTML自学手册-基础篇5 插图13

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

颜色值由十六进制来表示红、绿、蓝(RGB)。
每个颜色的最低值为 0(十六进制为 00),最高值为 255(十六进制为FF)。
十六进制值的写法为 # 号后跟三个或六个十六进制字符。
三位数表示法为:#RGB,转换为6位数表示为:#RRGGBB

HTML自学手册-基础篇5 插图14

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

如何将脚本插入 HTML 文档
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>自学元宇宙 (liboven.cn)</title> 
</head>
<body>

<script>
document.write("Hello World!")
</script> 

</body>
</html>
复制代码,点击 “尝试一下” 按钮,粘贴到 HTML运行测试工具查 看实例!
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>自学元宇宙 (liboven.cn)</title> 
</head> 
<body>

<script>
document.write("Hello World!")
</script>
<noscript>抱歉,你的浏览器不支持 JavaScript!</noscript>

<p>不支持 JavaScript 的浏览器会使用 <noscript> 元素中定义的内容(文本)来替代。</p>
 
</body>
</html>

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

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

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

下面的脚本会向浏览器输出”Hello World!”:

<script>
document.write("Hello World!");
</script>

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

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

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

<script>
document.write("Hello World!")
</script>
<noscript>抱歉,你的浏览器不支持 JavaScript!</noscript>

JavaScript实例代码-JavaScript可以直接在HTML输出:

document.write("<p>这是一个段落。</p>");

JavaScript事件响应:

<button type="button" onclick="myFunction()">点我!</button>
复制代码,点击 “尝试一下” 按钮,粘贴到 HTML运行测试工具查 看实例!

JavaScript处理 HTML 样式:

document.getElementById("demo").style.color="#ff0000";

标签描述
<script>定义了客户端脚本
<noscript>定义了不支持脚本浏览器输出的文本
温馨提示:本文最后更新于2022-12-27 10:04:01,某些文章具有时效性,若有错误或已失效,请在下方留言或联系云小叔叔
文章版权声明 1、本网站名称:元宇宙之家
2、本站永久网址:https://liboven.cn
3、本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行删除处理。
4、本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
6、本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。

© 版权声明
THE END
喜欢就支持一下吧
点赞5赞赏 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

夸夸
夸夸
还有吗!没看够!
取消
昵称常用语表情代码图片

    暂无评论内容