【HTML教程】跟着菜鸟学语言—HTML5个人笔记经验（四）

HTML学习第三天！
PS：牛牛只是每天花了1.5-2小时左右来学习HTML。

书接上回

HTML<div>和<span>

HTML 可以通过<div> 和 <span>将元素组合起来。

HTML 区块元素

大多数 HTML 元素被定义为块级元素或内联元素。

块级元素在浏览器显示时，通常会以新行来开始（和结束）。

实例: <h1>, <p>, <ul>, <table>

HTML 内联元素

内联元素在显示时通常不会以新行开始。

实例: <b>, <td>, <a>, <img>

HTML <div> 元素

HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。

元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

如果与 CSS 一同使用，

元素可用于对大的内容块设置样式属性。

<div>元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

HTML <span> 元素

HTML <span> 元素是内联元素，可用作文本的容器

<span> 元素也没有特定的含义。

当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

HTML 分组标签

标签描述
<div>定义了文档的区域，块级 (block-level)
<span>用来组合文档中的行内元素， 内联元素(inline)

注：

当涉及到 <div> 和<span>的区别时，以下几点是值得进一步明确的：

块级元素 vs. 行内元素：

  • <div> 是块级元素，它独占一行，可以设置宽度、高度以及边距等样式属性。它适合用于创建页面的大块结构，例如页面的主体区域、容器、布局等。
  • <span> 是行内元素，它不会独占一行，宽度默认由其内容决定。它适合用于对文本或其他行内元素进行样式化、标记或包裹。

默认样式和布局：

  • <div> 元素的默认样式为块级显示，会以块的形式占据可用空间。
  • <span> 元素的默认样式为行内显示，它不会独占一行，只占据其内容的宽度。

嵌套关系：

  • <div> 可以容纳其他块级元素和行内元素，包括其他的 <div> 和 <span> 元素。
  • <span> 通常被用来包裹文本或其他行内元素，比如用来设置特定文本的样式。

总之，<div> 用于创建页面结构和布局，而<span>用于对文本或行内元素进行样式化或包裹。它们在页面设计和样式设置中有不同的用途和作用。

HTML 布局

网页布局对改善网站的外观非常重要。

请慎重设计您的网页布局。

使用<div>元素的网页布局👍

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>跟着牛牛一起做(runoob.com)</title> 
</head>
<body><div id="container" style="width:500px"><div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的网页标题</h1></div><div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript</div><div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容在这里
<p>
<a href="https://blog.csdn.net/qq_47493625/article/details/135874922?spm=1001.2014.3001.5501">HTML教程】跟着菜鸟学语言—HTML5个人笔记经验</a>
</p>
</div><div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
勇敢牛牛不怕困难！ </div>
</div>
<p><a href="https://blog.csdn.net/qq_47493625?spm=1000.2115.3001.5343">许牛牛在线大闯关</a></p>
</body>
</html>

使用<table>元素添加布局👍

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>复制进去看看！</title> 
</head>
<body><table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>主要的网页标题</h1>
<h2>勇敢牛牛在线大闯关</h2>
</td>
</tr><tr>
<td style="background-color:#FFD700;width:100px;vertical-align:top;">
<b>菜单</b><br>
博客首页<br>
个人主页<br>
专栏
</td>
<td style="background-color:#eeeeee;height:200px;width:400px;vertical-align:top;">
嘿咻嘿咻嘿咻（在这里写内容）</td>
</tr><tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
勇敢牛牛向前冲</td>
</tr>
</table></body>
</html>

网站布局

大多数网站会把内容安排到多个列中（就像杂志或报纸那样）。

大多数网站可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。

Tips💡

虽然我们可以使用HTML table标签来设计出漂亮的布局，但是table标签是不建议作为布局工具使用的 - 表格不是布局工具。

HTML 布局 - 使用<div> 元素

div 元素是用于分组 HTML 元素的块级元素。

下面的例子使用五个 div 元素来创建多列布局：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>跟着牛牛一起做(runoob.com)</title> 
</head>
<body><div id="container" style="width:500px"><div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的网页标题</h1></div><div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript</div><div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容在这里
<p>
<a href="https://blog.csdn.net/qq_47493625/article/details/135874922?spm=1001.2014.3001.5501">HTML教程】跟着菜鸟学语言—HTML5个人笔记经验</a>
</p>
</div><div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
勇敢牛牛不怕困难！ </div>
</div>
<p><a href="https://blog.csdn.net/qq_47493625?spm=1000.2115.3001.5343">许牛牛在线大闯关</a></p>
</body>
</html>

HTML 布局 - 使用表格

使用 HTML <table> 标签是创建布局的一种简单的方式。

大多数站点可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。

Tips💡

即使可以使用 HTML 表格来创建漂亮的布局，但设计表格的目的是呈现表格化数据 - 表格不是布局工具！

下面的例子使用三行两列的表格 - 第一和最后一行使用 colspan 属性来横跨两列：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>跟着牛牛一起做！</title> 
</head>
<body><table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>主要的网页标题</h1>
</td>
</tr><tr>
<td style="background-color:#FFD700;width:100px;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#eeeeee;height:200px;width:400px;">
内容在这里</td>
</tr><tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
勇敢牛牛向前冲</td>
</tr>
</table></body>
</html>

HTML 布局 - 有用的提示

Tip: 使用 CSS 最大的好处是，如果把 CSS 代码存放到外部样式表中，那么站点会更易于维护。通过编辑单一的文件，就可以改变所有页面的布局。

Tip: 由于创建高级的布局非常耗时，使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板（您可以使用这些预先构建好的网站布局，并优化它们）。

HTML 布局标签

标签描述
<div>定义文档区块，块级(block-level)
<span>定义 span，用来组合文档中的行内元素。

HTML 表单和输入

HTML 表单用于收集用户的输入信息。

HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。

HTML 表单通常包含各种输入字段、复选框、单选按钮、下拉列表等元素。

以下是一个简单的HTML表单的例子：

  • <form> 元素用于创建表单，action 属性定义了表单数据提交的目标 URL，method 属性定义了提交数据的 HTTP 方法（这里使用的是 “post”）。
  • <label> 元素用于为表单元素添加标签，提高可访问性。
  • <input> 元素是最常用的表单元素之一，它可以创建文本输入框、密码框、单选按钮、复选框等。type 属性定义了输入框的类型，id 属性用于关联 <label> 元素，name 属性用于标识表单字段。
  • <select> 元素用于创建下拉列表，而 <option> 元素用于定义下拉列表中的选项。

尝试一下🎉

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>试试看吧！</title> 
</head>
<body><h2>表单</h2><form action="/" method="post"><!-- 文本输入框 --><label for="name">用户名:</label><input type="text" id="name" name="name" required><br><!-- 密码输入框 --><label for="password">密码:</label><input type="password" id="password" name="password" required><br><!-- 单选按钮 --><label>性别:</label><input type="radio" id="male" name="gender" value="male" checked><label for="male">男</label><input type="radio" id="female" name="gender" value="female"><label for="female">女</label><br><!-- 复选框 --><input type="checkbox" id="subscribe" name="subscribe" checked><label for="subscribe">订阅推送信息</label><br><!-- 下拉列表 --><label for="country">国家:</label><select id="country" name="country"><option value="cn">CN</option><option value="usa">USA</option><option value="uk">UK</option></select><br><!-- 提交按钮 --><input type="submit" value="提交"></form></body>
</html>

小试牛刀-实例👍

以下实例创建了一个表单，包含两个输入框：

<form action="">
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

以下实例创建了一个表单，包含一个普通输入框和一个密码输入框：

<form action="">Username: <input type="text" name="user"><br>Password: <input type="password" name="password"></form>

HTML 表单

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容，比如：文本域（textarea）、下拉列表（select）、单选框（radio-buttons）、复选框（checkbox） 等等。

我们可以使用<form>标签来创建表单:

<form>.input 元素.</form>

HTML 表单 - 输入元素

多数情况下被用到的表单标签是输入标签 <input>。

输入类型是由 type 属性定义。

接下来我们介绍几种常用的输入类型。

文本域（Text Fields）

文本域通过 <input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

实例👍

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

注意:表单本身并不可见。同时，在大多数浏览器中，文本域的默认宽度是 20 个字符。

密码字段

密码字段通过标签 <input type="password"> 来定义:

实例👍

<form>
Password: <input type="password" name="pwd">
</form>

**注意：**密码字段字符不会明文显示，而是以星号 ***** 或圆点 . 替代。

单选按钮（Radio Buttons）

<input type="radio"> 标签定义了表单的单选框选项:

实例👍

<form action="">
<input type="radio" name="sex" value="male">男<br>
<input type="radio" name="sex" value="female">女
</form>

浏览器显示效果如下:

⚪男

⚪女

复选框（Checkboxes）

<input type="checkbox"> 定义了复选框。

复选框可以选取一个或多个选项：

实例👍

<form>
<input type="checkbox" name="vehicle" value="Bike">我喜欢自行车<br>
<input type="checkbox" name="vehicle" value="Car">我喜欢小汽车
</form>

浏览器显示效果如下:

□我喜欢自行车

□我喜欢小汽车

提交按钮(Submit)

<input type="submit"> 定义了提交按钮。

当用户单击确认按钮时，表单的内容会被传送到服务器。表单的动作属性 action 定义了服务端的文件名。

action 属性会对接收到的用户输入数据进行相关的处理:

实例👍

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

假如你在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 html_form_action.php 文件，该页面将显示出输入的结果。

以上实例中有一个 method 属性，它用于定义表单数据的提交方式，可以是以下值：

  • post：指的是 HTTP POST 方法，表单数据会包含在表单体内然后发送给服务器，用于提交敏感数据，如用户名与密码等。
  • get：默认值，指的是 HTTP GET 方法，表单数据会附加在 action 属性的 URL 中，并以 **?**作为分隔符，一般用于不敏感信息，如分页等。例如：https://www.runoob.com/?page=1，这里的 page=1 就是 get 方法提交的数据。

实例👍

<!-- 以下表单使用 GET 请求发送数据到当前的 URL，method 默认位 GET。 -->
<form><label>Name:<input name="submitted-name" autocomplete="name"></label><button>Save</button>
</form><!-- 以下表单使用 POST 请求发送数据到当前的 URL。 -->
<form method="post"><label>Name:<input name="submitted-name" autocomplete="name"></label><button>Save</button>
</form><!-- 表单使用 fieldset, legend, 和 label 标签 -->
<form method="post"><fieldset><legend>Title</legend><label><input type="radio" name="radio"> Select me</label></fieldset>
</form>

HTML 表单标签

New : HTML5新标签

标签描述
<from>定义供用户输入的表单
<input>定义输入域
<textarea>定义文本域 (一个多行的输入控件)
<label>定义了 <input> 元素的标签，一般为输入标题
<fieldest>定义了一组相关的表单元素，并使用外框包含起来
<legend>定义了<fieldset>元素的标题
<select>定义了下拉选项列表
<optgroup>定义选项组
<option>定义下拉列表中的选项
<button>定义一个点击按钮
<datalist> new指定一个预先定义的输入控件选项列表
<keygen> new定义了表单的密钥对生成器字段
<output> new定义一个计算结果

HTML 框架

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。

iframe语法:

<iframe src="URL"></iframe>

该URL指向不同的网页。

iframe - 设置高度与宽度

height 和 width 属性用来定义iframe标签的高度与宽度。

属性默认以像素为单位, 但是你可以指定其按比例显示 (如：“80%”)。

实例👍

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>尝试一下</title> 
</head> 
<body><iframe src="demo_iframe.htm" width="200" height="200"></iframe><p>一些旧的浏览器不支持 iframe。</p>
<p>如果浏览器不支持 iframes 则不会显示。</p></body>
</html>

iframe - 移除边框

frameborder 属性用于定义iframe表示是否显示边框。

设置属性值为 “0” 移除iframe的边框:

实例👍

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

使用 iframe 来显示目标链接页面

iframe 可以显示一个目标链接的页面

目标链接的属性必须使用 iframe 的属性，如下实例:

实例👍

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="https://www.runoob.com" target="iframe_a" rel="noopener">RUNOOB.COM</a></p>

HTML iframe 标签

标签说明
<iframe>定义一个内联的iframe

注意

出于有些网页不希望被嵌套, 响应头中有一选项

X-Frame-Options

他有三个可配置值

DENY：表示该网站页面不允许被嵌套，即便是在自己的域名的页面中也不能进行嵌套。
SAMEORIGIN：表示该页面可以在相同域名页面中被嵌套展示。
ALLOW-FROM uri：表示该页面可以在指定来源页面中进行嵌套展示。

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)

在这里插入图片描述

尝试一下🔖

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>尝试一下</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>

1600万种不同颜色

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

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

在这里插入图片描述

灰暗色调

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

在这里插入图片描述

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

在这里插入图片描述

HTML 颜色名

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

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

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

按颜色名排序

按十六进制的值排序

单击一个颜色名或者 16 进制值，就可以查看与不同文字颜色搭配的背景颜色。(这里的颜色没办法展示出来，大家可以前往原站自行查看)

颜色名HEXColor
AliceBlue#F0F8FF
AntiqueWhite#FAEBD7
Aqua#00FFFF
Aquamarine#7FFFD4
Azure#F0FFFF
Beige#F5F5DC
Bisque#FFE4C4
Black#000000
BlanchedAlmond#FFEBCD
Blue#0000FF
BlueViolet#8A2BE2
Brown#A52A2A
BurlyWood#DEB887
CadetBlue#5F9EA0
Chartreuse#7FFF00
Chocolate#D2691E
Coral#FF7F50
CornflowerBlue#6495ED
Cornsilk#FFF8DC
Crimson#DC143C
Cyan#00FFFF
DarkBlue#00008B
DarkCyan#008B8B
DarkGoldenRod#B8860B
DarkGray#A9A9A9
DarkGreen#006400
DarkKhaki#BDB76B
DarkMagenta#8B008B
DarkOliveGreen#556B2F
DarkOrange#FF8C00
DarkOrchid#9932CC
DarkRed#8B0000
DarkSalmon#E9967A
DarkSeaGreen#8FBC8F
DarkSlateBlue#483D8B
DarkSlateGray#2F4F4F
DarkTurquoise#00CED1
DarkViolet#9400D3
DeepPink#FF1493
DeepSkyBlue#00BFFF
DimGray#696969
DodgerBlue#1E90FF
FireBrick#B22222
FloralWhite#FFFAF0
ForestGreen#228B22
Fuchsia#FF00FF
Gainsboro#DCDCDC
GhostWhite#F8F8FF
Gold#FFD700
GoldenRod#DAA520
Gray#808080
Green#008000
GreenYellow#ADFF2F
HoneyDew#F0FFF0
HotPink#FF69B4
IndianRed #CD5C5C
Indigo #4B0082
Ivory#FFFFF0
Khaki#F0E68C
Lavender#E6E6FA
LavenderBlush#FFF0F5
LawnGreen#7CFC00
LemonChiffon#FFFACD
LightBlue#ADD8E6
LightCoral#F08080
LightCyan#E0FFFF
LightGoldenRodYellow#FAFAD2
LightGray#D3D3D3
LightGreen#90EE90
LightPink#FFB6C1
LightSalmon#FFA07A
LightSeaGreen#20B2AA
LightSkyBlue#87CEFA
LightSlateGray#778899
LightSteelBlue#B0C4DE
LightYellow#FFFFE0
Lime#00FF00
LimeGreen#32CD32
Linen#FAF0E6
Magenta#FF00FF
Maroon#800000
MediumAquaMarine#66CDAA
MediumBlue#0000CD
MediumOrchid#BA55D3
MediumPurple#9370DB
MediumSeaGreen#3CB371
MediumSlateBlue#7B68EE
MediumSpringGreen#00FA9A
MediumTurquoise#48D1CC
MediumVioletRed#C71585
MidnightBlue#191970
MintCream#F5FFFA
MistyRose#FFE4E1
Moccasin#FFE4B5
NavajoWhite#FFDEAD
Navy#000080
OldLace#FDF5E6
Olive#808000
OliveDrab#6B8E23
Orange#FFA500
OrangeRed#FF4500
Orchid#DA70D6
PaleGoldenRod#EEE8AA
PaleGreen#98FB98
PaleTurquoise#AFEEEE
PaleVioletRed#DB7093
PapayaWhip#FFEFD5
PeachPuff#FFDAB9
Peru#CD853F
Pink#FFC0CB
Plum#DDA0DD
PowderBlue#B0E0E6
Purple#800080
Red#FF0000
RosyBrown#BC8F8F
RoyalBlue#4169E1
SaddleBrown#8B4513
Salmon#FA8072
SandyBrown#F4A460
SeaGreen#2E8B57
SeaShell#FFF5EE
Sienna#A0522D
Silver#C0C0C0
SkyBlue#87CEEB
SlateBlue#6A5ACD
SlateGray#708090
Snow#FFFAFA
SpringGreen#00FF7F
SteelBlue#4682B4
Tan#D2B48C
Teal#008080
Thistle#D8BFD8
Tomato#FF6347
Turquoise#40E0D0
Violet#EE82EE
Wheat#F5DEB3
White#FFFFFF
WhiteSmoke#F5F5F5
Yellow#FFFF00
YellowGreen#9ACD32

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

HTML 颜色值

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

颜色值

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

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

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

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

在这里插入图片描述

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</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>

通过十六进制（Hex）的颜色值排序

查看以颜色名称排序的颜色列表

颜色名HEXColor
Black#000000
Navy#000080
DarkBlue#00008B
MediumBlue#0000CD
Blue#0000FF
DarkGreen#006400
Green#008000
Teal#008080
DarkCyan#008B8B
DeepSkyBlue#00BFFF
DarkTurquoise#00CED1
MediumSpringGreen#00FA9A
Lime#00FF00
SpringGreen#00FF7F
Aqua#00FFFF
Cyan#00FFFF
MidnightBlue#191970
DodgerBlue#1E90FF
LightSeaGreen#20B2AA
ForestGreen#228B22
SeaGreen#2E8B57
DarkSlateGray#2F4F4F
LimeGreen#32CD32
MediumSeaGreen#3CB371
Turquoise#40E0D0
RoyalBlue#4169E1
SteelBlue#4682B4
DarkSlateBlue#483D8B
MediumTurquoise#48D1CC
Indigo #4B0082
DarkOliveGreen#556B2F
CadetBlue#5F9EA0
CornflowerBlue#6495ED
MediumAquaMarine#66CDAA
DimGray#696969
SlateBlue#6A5ACD
OliveDrab#6B8E23
SlateGray#708090
LightSlateGray#778899
MediumSlateBlue#7B68EE
LawnGreen#7CFC00
Chartreuse#7FFF00
Aquamarine#7FFFD4
Maroon#800000
Purple#800080
Olive#808000
Gray#808080
SkyBlue#87CEEB
LightSkyBlue#87CEFA
BlueViolet#8A2BE2
DarkRed#8B0000
DarkMagenta#8B008B
SaddleBrown#8B4513
DarkSeaGreen#8FBC8F
LightGreen#90EE90
MediumPurple#9370DB
DarkViolet#9400D3
PaleGreen#98FB98
DarkOrchid#9932CC
YellowGreen#9ACD32
Sienna#A0522D
Brown#A52A2A
DarkGray#A9A9A9
LightBlue#ADD8E6
GreenYellow#ADFF2F
PaleTurquoise#AFEEEE
LightSteelBlue#B0C4DE
PowderBlue#B0E0E6
FireBrick#B22222
DarkGoldenRod#B8860B
MediumOrchid#BA55D3
RosyBrown#BC8F8F
DarkKhaki#BDB76B
Silver#C0C0C0
MediumVioletRed#C71585
IndianRed #CD5C5C
Peru#CD853F
Chocolate#D2691E
Tan#D2B48C
LightGray#D3D3D3
Thistle#D8BFD8
Orchid#DA70D6
GoldenRod#DAA520
PaleVioletRed#DB7093
Crimson#DC143C
Gainsboro#DCDCDC
Plum#DDA0DD
BurlyWood#DEB887
LightCyan#E0FFFF
Lavender#E6E6FA
DarkSalmon#E9967A
Violet#EE82EE
PaleGoldenRod#EEE8AA
LightCoral#F08080
Khaki#F0E68C
AliceBlue#F0F8FF
HoneyDew#F0FFF0
Azure#F0FFFF
SandyBrown#F4A460
Wheat#F5DEB3
Beige#F5F5DC
WhiteSmoke#F5F5F5
MintCream#F5FFFA
GhostWhite#F8F8FF
Salmon#FA8072
AntiqueWhite#FAEBD7
Linen#FAF0E6
LightGoldenRodYellow#FAFAD2
OldLace#FDF5E6
Red#FF0000
Fuchsia#FF00FF
Magenta#FF00FF
DeepPink#FF1493
OrangeRed#FF4500
Tomato#FF6347
HotPink#FF69B4
Coral#FF7F50
DarkOrange#FF8C00
LightSalmon#FFA07A
Orange#FFA500
LightPink#FFB6C1
Pink#FFC0CB
Gold#FFD700
PeachPuff#FFDAB9
NavajoWhite#FFDEAD
Moccasin#FFE4B5
Bisque#FFE4C4
MistyRose#FFE4E1
BlanchedAlmond#FFEBCD
PapayaWhip#FFEFD5
LavenderBlush#FFF0F5
SeaShell#FFF5EE
Cornsilk#FFF8DC
LemonChiffon#FFFACD
FloralWhite#FFFAF0
Snow#FFFAFA
Yellow#FFFF00
LightYellow#FFFFE0
Ivory#FFFFF0
White#FFFFFF

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/652406.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【Git配置代理】Failed to connect to github.com port 443 问题解决方法

【Git配置代理】Failed to connect to github.com port 443 问题解决方法

前言&#xff1a; 在学习代码审计时&#xff0c;有时会需要使用git去拉取代码&#xff0c;然后就出现了如下错误 看过网上很多解决方法&#xff0c;觉得问题的关键还是因为命令行在拉取/推送代码时并没有使用VPN进行代理。 解决办法 &#xff1a; 配置http代理&#xff1a;…
阅读更多...
【Linux】第三十七站：信号保存

【Linux】第三十七站：信号保存

文章目录 一、信号发送二、信号保存1.为什么要进行信号保存&#xff1f; 三、阻塞信号1.信号的一些相关概念2.在内核中的表示3.sigset_t4.信号集操作函数5.sigprocmask6.sigpending7. 总结 一、信号发送 如下所示&#xff0c;对于普通信号&#xff0c;它的编号是从1~31。这个是…
阅读更多...
指针的深入了解2

指针的深入了解2

1.const修饰指针 在这之前我们还学过static修饰变量&#xff0c;那我们用const来修饰一下变量会有什么样的效果呢&#xff1f; 我们来看看&#xff1a; 我们可以看到编译器报错告诉我们a变成了一个不可修改的值&#xff0c;我们在变量前加上了const进行限制&#xff0c;但是我…
阅读更多...
使用py-spy对python程序进行性能诊断学习

使用py-spy对python程序进行性能诊断学习

py-spy简介 py-spy是一个用Rust编写的轻量级Python分析工具&#xff0c;它能够监视正在运行的Python程序&#xff0c;而不需要修改代码或者重新启动程序。Py-spy可以在不影响程序运行的情况下&#xff0c;采集程序运行时的信息&#xff0c;生成火焰图&#xff08;flame graph&…
阅读更多...
linux 基于科大讯飞的文字转语音使用

linux 基于科大讯飞的文字转语音使用

官方文档地址&#xff1a;离线语音合成 Linux SDK 文档 | 讯飞开放平台文档中心 一、SDK下载 1、点击上面官方文档地址的链接&#xff0c;可以跳转到以下界面。 2、点击“普通版”&#xff0c;跳转到以下界面。 3、点击“下载”跳转到以下界面 4、最后&#xff0c;点击“SDK下…
阅读更多...
Qt6入门教程 12：QAbstractButton

Qt6入门教程 12：QAbstractButton

目录 一.状态 二.信号 三.使用 1.自定义按钮 2.多选 3.互斥 QAbstractButton类实现了一个抽象按钮&#xff0c;并且让它的子类来指定如何处理用户的动作&#xff0c;并指定如何绘制按钮。QAbstractButton类是所有按钮控件的基类。 QAbstractButton提供…
阅读更多...
【阿里云服务器数据迁移】 同一个账号 不同区域服务器

【阿里云服务器数据迁移】 同一个账号 不同区域服务器

前言 假如说一台云服务器要过期了,现在新买了一台,有的人会烦恼又要将重新在新的服务器上装环境,部署上线旧服务器上的网站项目, 但是不必烦恼,本文将介绍如何快速将就旧的服务器上的数据迁移到新的服务器上. 包括所有的环境和网站项目噢 ! 步骤 (1) 创建旧服务器自定义镜像…
阅读更多...
Linux命令 - 统计log日志某接口用户访问频次并排序

Linux命令 - 统计log日志某接口用户访问频次并排序

​ 背景 某天发现内部人员使用的app服务器访问突增&#xff0c;但不影响服务正常运行&#xff0c;想通过log统计接口的人员访问频次。 从监控平台可以看到访问激增的接口&#xff0c;因Nginx不缓存用户信息只有访问IP&#xff0c;日志清洗的Hive表只能访问前一天&#xff0c;…
阅读更多...
行测-资料：2. 一般增长率、增长量

行测-资料：2. 一般增长率、增长量

1、一般增长率 1.1 百分数和百分点 50%&#xff0c;20% 1.2 增长率和倍数 1.5&#xff1b;50 1.3 成数和翻番 1.4 增幅&#xff0c;降幅&#xff0c;变化幅度 A&#xff0c;A&#xff0c;D B&#xff0c;高于全国增速 2.3 个百分点&#xff0c;21.8 - 2.3 19.5。 5%&#xff0…
阅读更多...
打开 IOS开发者模式

打开 IOS开发者模式

前言 需要 1、辅助设备&#xff1a;苹果电脑&#xff1b; 2、辅助应用&#xff1a;Xcode&#xff1b; 3、准备工作&#xff1a;苹果手机 使用数据线连接 苹果电脑&#xff1b; 当前系统版本 IOS 17.3 通过Xcode激活 两指同时点击 Xcode 显示选择&#xff0c;Open Develop…
阅读更多...
重生奇迹MU平民玩家推荐的职业

重生奇迹MU平民玩家推荐的职业

女魔法师 女魔法师是一个非常适合平民玩家的职业选择。她拥有着强大的魔法攻击能力&#xff0c;可以轻松地击败敌人。而且女魔法师的装备价格相对较低&#xff0c;适合玩家们的经济实力。 精灵射手 精灵射手是一个非常灵活的职业选择。他们可以远程攻击&#xff0c;可以在战…
阅读更多...
使用PCL进行法向量可视化

使用PCL进行法向量可视化

使用PCL进行法向量可视化 文章目录 1、使用PCL进行法向量可视化2、计算所有点的法线并显示3、计算一个子集的法线 1、使用PCL进行法向量可视化 #include <iostream> #include <pcl/io/pcd_io.h> #include <pcl/visualization/pcl_visualizer.h> #include &l…
阅读更多...
element plus使用问题

element plus使用问题

文章目录 element plusvue.config.js注意1、有时候会报错 not a function2、使用 ElMessage 报错3、 element plus 版本过高4、警告Feature flag VUE_PROD_HYDRATION_MISMATCH_DETAILS is not explicitly defined.5、报错 ResizeObserver loop completed with undelivered noti…
阅读更多...
Redis高级应用

Redis高级应用

文章目录 1.5.1 布隆过滤器BloomFilter1.5.1.1 原理1.5.1.2 使用场景 1.5.2 Redis分布式锁1.5.2.1 使用案例分析1.5.2.1.1 单机版没加锁1.5.2.1.2 单节点Redis实现分布式锁1.5.2.1.3 集群下的分布式及CAP1.5.2.1.4 Redisson可靠分布式锁1.5.2.1.5 Redis分布式锁-Redlock算法1.5…
阅读更多...
Linux之进程间通信（system V 共享内存）

Linux之进程间通信（system V 共享内存）

目录 一、共享内存 1、基本原理 2、共享内存的创建 3、共享内存的释放 4、共享内存的关联 5、共享内存的去关联 6、查看IPC资源 二、完整通信代码 三、共享内存的特点 四、信号量 1、相关概念 2、信号量概念 进程间通信的本质就是让不同的进程看到同一个资源。而前…
阅读更多...
微信小程序（二十）Vant组件库的配置

微信小程序（二十）Vant组件库的配置

教程很详细&#xff0c;直接上过程 上一篇 官方文档也有&#xff0c;但是因为版本的更新&#xff0c;官方文档并没有跟着改变&#xff0c;这里我写一份最新版能用的教程 &#xff08;口头禅还是不能少的&#x1f923;&#x1f923;&#x1f923;&#xff09; 灵魂拷问&#xf…
阅读更多...
Android Studio 提示Use app:drawableStartCompat instead of android:drawableStart

Android Studio 提示Use app:drawableStartCompat instead of android:drawableStart

每次提交代码时&#xff0c;AS这个老妈子总爱唠叨一堆warning&#xff0c;这些Warning都在讲什么&#xff1f; 1.Use app:drawableStartCompat instead of android:drawableStart 在Android开发中&#xff0c;android:drawableStart和app:drawableStartCompat是两个用于设置…
阅读更多...
基于YOLOv8的摄像头吸烟行为检测系统（Python源码+Pyqt6界面+数据集）

基于YOLOv8的摄像头吸烟行为检测系统（Python源码+Pyqt6界面+数据集）

&#x1f4a1;&#x1f4a1;&#x1f4a1;本文主要内容:详细介绍了摄像头下吸烟行为检测系统&#xff0c;在介绍算法原理的同时&#xff0c;给出Pytorch的源码、训练数据集以及PyQt6的UI界面。在界面中可以选择各种图片、视频进行检测识别&#xff0c;可进行置信度、Iou阈值设定…
阅读更多...
智能分析网关V4智慧冶金工厂视频智能监管方案

智能分析网关V4智慧冶金工厂视频智能监管方案

一、背景与需求 随着工业4.0的推进&#xff0c;冶金行业正面临着转型升级的压力。为了提高生产效率、降低能耗、保障安全&#xff0c;冶金智能工厂视频监管方案应运而生。该方案通过高清摄像头、智能分析技术、大数据处理等手段&#xff0c;对工厂进行全方位、实时监控&#xf…
阅读更多...
详细解读vcruntime140_1.dll修复的手段，如何快速解决vcruntime140_1.dll丢失问题

详细解读vcruntime140_1.dll修复的手段，如何快速解决vcruntime140_1.dll丢失问题

当出现“无法找到vcruntime140_1.dll”或程序“未能正常启动”时&#xff0c;这通常指示系统中缺失了一个关键文件&#xff1a;vcruntime140_1.dll。作为Visual C Redistributable组件的一部分&#xff0c;这个小文件在很多用Visual Studio编译的C程序运行时发挥着重要作用。解…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023