【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)
黑色	#000000	rgb(0,0,0)
红色	#FF0000	rgb(255,0,0)
绿色	#00FF00	rgb(0,255,0)
蓝色	#0000FF	rgb(0,0,255)
黄色	#FFFF00	rgb(255,255,0)
蓝色	#00FFFF	rgb(0,255,255)
紫色	#FF00FF	rgb(255,0,255)
灰色	#C0C0C0	rgb(192,192,192)
白色	#FFFFFF	rgb(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 色调色板时，所有的计算机能够正确地显示所有的颜色。

000000	000033	000066	000099	0000CC	0000FF
003300	003333	003366	003399	0033CC	0033FF
006600	006633	006666	006699	0066CC	0066FF
009900	009933	009966	009999	0099CC	0099FF
00CC00	00CC33	00CC66	00CC99	00CCCC	00CCFF
00FF00	00FF33	00FF66	00FF99	00FFCC	00FFFF
330000	330033	330066	330099	3300CC	3300FF
333300	333333	333366	333399	3333CC	3333FF
336600	336633	336666	336699	3366CC	3366FF
339900	339933	339966	339999	3399CC	3399FF
33CC00	33CC33	33CC66	33CC99	33CCCC	33CCFF
33FF00	33FF33	33FF66	33FF99	33FFCC	33FFFF
660000	660033	660066	660099	6600CC	6600FF
663300	663333	663366	663399	6633CC	6633FF
666600	666633	666666	666699	6666CC	6666FF
669900	669933	669966	669999	6699CC	6699FF
66CC00	66CC33	66CC66	66CC99	66CCCC	66CCFF
66FF00	66FF33	66FF66	66FF99	66FFCC	66FFFF
990000	990033	990066	990099	9900CC	9900FF
993300	993333	993366	993399	9933CC	9933FF
996600	996633	996666	996699	9966CC	9966FF
999900	999933	999966	999999	9999CC	9999FF
99CC00	99CC33	99CC66	99CC99	99CCCC	99CCFF
99FF00	99FF33	99FF66	99FF99	99FFCC	99FFFF
CC0000	CC0033	CC0066	CC0099	CC00CC	CC00FF
CC3300	CC3333	CC3366	CC3399	CC33CC	CC33FF
CC6600	CC6633	CC6666	CC6699	CC66CC	CC66FF
CC9900	CC9933	CC9966	CC9999	CC99CC	CC99FF
CCCC00	CCCC33	CCCC66	CCCC99	CCCCCC	CCCCFF
CCFF00	CCFF33	CCFF66	CCFF99	CCFFCC	CCFFFF
FF0000	FF0033	FF0066	FF0099	FF00CC	FF00FF
FF3300	FF3333	FF3366	FF3399	FF33CC	FF33FF
FF6600	FF6633	FF6666	FF6699	FF66CC	FF66FF
FF9900	FF9933	FF9966	FF9999	FF99CC	FF99FF
FFCC00	FFCC33	FFCC66	FFCC99	FFCCCC	FFCCFF
FFFF00	FFFF33	FFFF66	FFFF99	FFFFCC	FFFFFF

在这里插入图片描述

HTML 颜色名

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

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

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

按颜色名排序

按十六进制的值排序

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

颜色名	HEX	Color
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）的颜色值排序

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

颜色名	HEX	Color
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

在这里插入图片描述

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

书接上回

HTML<div>和<span>

HTML 区块元素

HTML 内联元素

HTML <div> 元素

HTML <span> 元素

HTML 分组标签

HTML 布局

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

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

网站布局

Tips💡

HTML 布局 - 使用<div> 元素

HTML 布局 - 使用表格

Tips💡

HTML 布局 - 有用的提示

HTML 布局标签

HTML 表单和输入

尝试一下🎉

小试牛刀-实例👍

HTML 表单

HTML 表单 - 输入元素

文本域（Text Fields）

实例👍

密码字段

实例👍

单选按钮（Radio Buttons）

实例👍

复选框（Checkboxes）

实例👍

提交按钮(Submit)

实例👍

实例👍

HTML 表单标签

HTML 框架

iframe - 设置高度与宽度

实例👍

iframe - 移除边框

实例👍

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

实例👍

HTML iframe 标签

HTML 颜色

颜色值

颜色值

尝试一下🔖

1600万种不同颜色

灰暗色调

Web安全色?

HTML 颜色名

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

按颜色名排序

HTML 颜色值

颜色值

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

HTML`<div>`和`<span>`

HTML `<div>` 元素

HTML `<span>` 元素

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

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

HTML 布局 - 使用`<div>` 元素