目录
第一章 HTML引入
一, web标准介绍
web标准:
- w3c：万维网联盟组织，制定web标准的机构（组织）
- web标准：制作网页遵循的规范
- web标准规范的分类：结构标准、表现标准、行为标准
- 结构：html ;表现：css;行为：Javascript
总结说明：
- 结构标准：相当于人的骨架。html就是用来制作网页的
- 表现标准： 相当于人的衣服。css就是对网页进行美化的
- 行为标准： 相当于人的动作。JS就是让网页动起来，具有生命力的
二, 浏览器介绍
| 浏览 | 内核 |
|---|---|
| chrome | blink |
| 火狐 | gecko |
| Safari | webkit |
| IE | trident |
- 浏览器内核也就是浏览器所采用的渲染引擎,渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息
- 渲染引擎是浏览器兼容性问题出现的根本原因
三, html介绍
- html全称HyperText Markup Language，翻译为超文本标记语言，它不是一种编程语言，是一种描述性的标记语言，用于描述超文本内容的显示方式。比如字体、颜色、大小等。
- 超文本：音频，视频，图片称为超文本。
- 标记 ： <英文单词或者字母> 称为标记，一个HTML页面都是由各种标记组成。
- 作用：HTML是负责描述文档语义的语言。
- 注意：HTML语言不是一个编程语言(有编译过程)，而是一个标记语言(没有编译过程)，HTML页面直接由浏览器解析执行。
- HTML只是负责描述文档语义的语言,在html中，除了语义，其他什么都没有。html是一个纯本文文件（就是用txt文件改名而成），用一些标签来描述文字的语义，这些标签在浏览器里面是看不到的，所以称为“超文本”，所以就是“超文本标记语言”了。
第二章 HTML规范
一, html的网络术语
- 网页 ：由各种标记组成的一个页面就叫网页
- 主页(首页) : 一个网站的起始页面或者导航页面
- 标记：
<p>称为开始标记 ，</p>称为结束标记，也叫标签。每个标签都规定好了特殊的含义 - 元素：
<p>内容</p>称为元素 - 属性：给每一个标签所做的辅助信息
二, html的规范
- html是一个弱势语言
- 区分大小写
- 页面的后缀名是html或者htm(有一些系统不支持后缀名长度超过3个字符，比如dos系统)
- html的结构:
- 声明部分：主要作用是用来告诉浏览器这个页面使用的是哪个标准(html5)
- head部分：将页面的一些额外信息告诉服务器。不会显示在页面上。
- body部分：我们所写的需要显示出来的代码必须放在此标签內。
三, 编写html的规范
- 所有标记元素都要正确的嵌套，不能交叉嵌套。正确写法举例：
<h1><font></font></h1> - 所有的标记都必须小写
- 所有的标记都必须关闭
- 双边标记：
<span></span> - 单边标记：
<br>转成<br /><hr>转成<hr />，还有<img src=“URL” />
- 双边标记：
- 所有的属性值必须加引号。
<h1 id="head"></h1> - 所有的属性必须有值。
<input type="radio" checked="checked" />
四, html的基本语法特征
HTML对换行不敏感，对tab不敏感
HTML只在乎标签的嵌套结构，嵌套的关系。谁嵌套了谁，谁被谁嵌套了，和换行、tab无关。换不换行、tab不tab，都不影响页面的结构。也就是说，HTML不是依靠缩进来表示嵌套的，就是看标签的包裹关系。但是，有良好的缩进，代码更易读。
空白折叠现象
HTML中所有的文字之间，如果有空格、换行、tab都将被折叠为一个空格显示。
标签要严格封闭
<html></html><meta/>
第三章 HTML结构
使用pycharm新建html文件,输入'!'或'html:5'按tab键后,自动生成的代码如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>一, 文档声明头
任何一个标准的HTML页面，第一行一定是一个以<!DOCTYPE html>开头的这一行，就是文档声明头，DocType Declaration，简称DTD。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
常见声明格式:
HTML5:
<!DOCTYPE html>HTML 4.01 Strict
该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">HTML 4.01 Transitional
该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
二, 头标签(head)
head标签都放在头部分之间。这里面包含了：<title>、<meta>、<link>，<style>
<title>：指定整个网页的标题，在浏览器最上方显示<meta>：提供有关页面的基本信息<link>：定义文档与外部资源的关系
<style>：定义内部样式表与网页的关系
一, meta标签
元素可提供有关页面的元信息（mata-information）,针对搜索引擎和更新频度的描述和关键词。标签位于文档的头部，不包含任何内容。提供的信息是用户不可见的。 meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。
http-equiv属性
它用来向浏览器传达一些有用的信息，帮助浏览器正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
<!--重定向 2秒后跳转到对应的网址，注意分号--> <meta http-equiv="refresh" content="2;URL=http://www.luffycity.com"> <!--指定文档的内容类型和编码类型 --> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <!--告诉IE浏览器以最高级模式渲染当前网页--> <meta http-equiv="x-ua-compatible" content="IE=edge">name属性
主要用于页面的关键字和描述，是写给搜索引擎看的，关键字可以有多个用 ‘,’号隔开，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
<meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信" />这些关键词，就是告诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率。让别人能够找到你，搜索到。
<meta name="Description" content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。" />只要设置Description页面描述，那么百度搜索结果，就能够显示这些语句，这个技术叫做SEO（search engine optimization，搜索引擎优化）。
<meta name=viewport content="width=device-width, initial-scale=1">上面这个标签，是让我们网页支持移动端，移动设备优先
二, title标签
主要用来告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出当前网页的主题。
<title>怀心抱素的个人空间</title>第四章 HTML标签
html标签又叫做html元素，它分为块级元素和内联元素（也可以叫做行内元素），都是html规范中的概念。
一, 块级元素
块级元素是指本身属性为display:block;的元素。因为它自身的特点，我们通常使用块级元素来进行大布局（大结构）的搭建。
独占一行，每一个块级元素都会从新的一行重新开始，从上到下排布
可以直接控制宽度、高度以及盒子模型的相关css属性
在不设置宽度的情况下，块级元素的宽度是它父级元素内容的宽度
在不设置高度的情况下，块级元素的高度是它本身内容的高度| 标签类型 | ||||||
|---|---|---|---|---|---|---|
| 标题 | h1 | h2 | h3 | h4 | h5 | h6 |
| 列表 | ol | ul | li | dl | dt | dd |
| 排版标签 | p | div | hr | center | pre | |
| 表格 | table | |||||
| 表单 | form |
一, h1-h6
标题使用<h1>至<h6>标签进行定义。<h1>定义最大的标题，<h6>定义最小的标题。具有align属性，属性值可以是：left、center、right。
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>二, 列表
列表又分为三种，有序列表ol，无序列表ul和定义列表dl。其中ol和ul必须结合li标签使用，而dl则必须结合dt,dd使用。
| ol | order list | 有序列表 | li list item | 列表项 | ||
| ul | unoedered list | 无序列表 | li list item | 列表项 | ||
| dl | definiton list | 定义列表 | <dt>：definition title |
列表的标题，这个标签是必须的 | <dd>：definition description |
列表的列表项，如果不需要它，可以不加 |
需要注意的是：
- li不能单独存在，必须包裹在ul或者ol里面；反过来说，ul的“儿子”不能是别的东西，只能有li。
- 再次强调，ul或者ol的作用，并不是给文字增加小圆点的，而是增加列表是否有序的“语义”的，因此不能省略。
一, ol列表（ordered list，即有序列表）
代码示例:
<body>
<ol>
<li>我是有序列表</li>
<li>我是有序列表</li>
<li>我是有序列表</li>
</ol>
</body>属性:
type="属性值"。属性值可以是：1(阿拉伯数字，默认)、a、A、i、I。结合start属性表示从几开始
属性type:1(默认)\a(小写字母)\A(大写字母)\I(罗马数字) 属性start:开始位置 <!--默认显示1,2,3序号,可以指定开始的值--> <ol> <li>长头发</li> <li>旧家电</li> <li>破剪刀</li> </ol> <!--设置根据a,b,c显示,可以指定开始的值--> <ol type="a" start="2"> <li>长头发</li> <li>旧家电</li> <li>破剪刀</li> </ol> <!--设置根据A,B,C显示,可以指定开始的值--> <ol type="A" start="26"> <li>长头发</li> <li>旧家电</li> <li>破剪刀</li> </ol> <!--设置根据罗马数字,可以指定开始的值--> <ol type="I"> <li>长头发</li> <li>旧家电</li> <li>破剪刀</li> </ol>有序列表也可以进行嵌套
<body> <ol type="a"> <li>我是有序列表</li> <ol type="1"> <li>我是子列表</li> <li>我是子列表</li> <li>我是子列表</li> </ol> <li>我是有序列表</li> </ol> </body>
二, ul列表（unordered list，即无序列表）
代码示例:
<body>
<ul>
<li>我是无序列表</li>
<li>我是无序列表</li>
<li>我是无序列表</li>
</ul>
</body>属性:
type="属性值"。属性值可以选： disc(实心原点，默认)，square(实心方点)，circle(空心圆),none(不显示样式)
<!--设置不显示任何样式--> <ul type="none"> <li>手机</li> <li>电脑</li> <li>其他电器</li> </ul> <!--设置显示实心方块--> <ul type="square"> <li>旧电脑</li> <li>旧家具</li> <li>旧手机</li> </ul> <!--设置显示空心圆--> <ul type="circle"> <li>旧电脑</li> <li>旧家具</li> <li>旧手机</li> </ul> <!--默认显示实心圆 disc--> <ul> <li>旧电脑</li> <li>旧家具</li> <li>旧手机</li> </ul>三, dl列表（definition list，即定义列表）
实例代码:
<body> <dL> <dt>第一个标题</dt> <dd>第一个内容</dd> <dd>第二个内容</dd> <dd>第三个内容</dd> <dt>第二个标题</dt> <dd>第一个内容</dd> <dd>第二个内容</dd> <dd>第三个内容</dd> </dL> </body>定义列表表达的语义是两层：
<dt>是一个列表，列出了几个<dd>项目- 每一个词儿都有自己的描述项
- dd是描述dt的
- 定义列表用法非常灵活，可以一个dt配很多dd
- dt、dd都是容器级标签，想放什么都可以
用什么标签，不是根据样子来决定，而是语义（语义本质上是结构）
三, 排版标签
一, p
段落标签<p>
段落：是英文paragraph的缩写
属性:
align='属性值'：对齐方式。属性值包括：left、center、right
<body> <p>这是一个段落</p> <p align="left">这是左对齐的段落</p> <p align="right">这是右对齐的段落</p> <p align="center">这是居中的段落</p> </body>
p标签是一个文本级标签，p里面只能放文字、图片、表单元素,内部不能再嵌套块级标签
二, div
div和span是非常重要的标签，div的语义是division“分割”
div：把标签中的内容作为一个块儿来对待(division)。必须单独占据一行
div标签的属性:
- align="属性值"：设置块儿的位置。属性值可选择：left、right、 center
代码示例:
<body>
<div>我是div标签</div>
<div>又是一个div标签</div>
</body>div在浏览器中，除了换行以外，默认是不会增加任何的效果的，但是语义变了，div中的所有元素是一个小区域。div标签是一个容器级标签，里面什么都能放，甚至可以放div自己。
三, hr
水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分
代码示例:
<body>
<div>我是div标签</div>
<hr>
<div>又是一个div标签</div>
</body>四, 内容居中标签(center)
此时center代表是一个标签，而不是一个属性值了。只要是在这个标签里面的内容，都会居于浏览器的中间。
<body>
<!--已废弃-->
<center>
<div>我是div标签</div>
<div>又是一个div标签</div>
</center>
</body>五, 预定义（预格式化）标签：<pre>
含义：将保留其中的所有的空白字符(空格、换行符)，原封不动的输出结果（告诉浏览器不要忽略空格和空行）
说明：真正排网页过程中，<pre>标签几乎用不着。但在PHP中用于打印一个数组时使用。
代码示例:
<body>
<pre>
咏鹅
作者:骆宾王
鹅鹅鹅
曲项向天歌
白毛浮绿水
红掌拨清波
</pre>
</body>四, table表格
表格标签用<table>表示
标准表格:thead tbody的内容
tr表示每一行
th表示thead中的每一个元素
td表示tbody中的每一个元素
<table border="1" cellpadding="10px" cellspacing="5px">
<thead>
<tr>
<th>第一列</th>
<th>第二列</th>
<th>第三列</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">第一个值</td>
<td>qqxing</td>
</tr>
<tr>
<td>第二个值</td>
<td>wahaha</td>
<td rowspan="2">ab钙</td>
</tr>
<tr>
<td>第二个值</td>
<td>wahaha</td>
</tr>
</tbody>
</table>不写thead只写tbody 就没有表头样式
<table border="1" cellpadding="10px" cellspacing="5px">
<tbody>
<tr>
<td colspan="2">第一个值</td>
<td>qqxing</td>
</tr>
<tr>
<td>第二个值</td>
<td>wahaha</td>
<td rowspan="2">ab钙</td>
</tr>
<tr>
<td>第二个值</td>
<td>wahaha</td>
</tr>
</tbody>
</table><table>的属性:
border：边框。像素为单位。style="border-collapse:collapse;"：单元格的线和表格的边框线合并width：宽度。像素为单位。height：高度。像素为单位。bordercolor：表格的边框颜色。align：表格的水平对齐方式。属性值可以填：left right center。
注意：这里不是设置表格里内容的对齐方式，如果想设置内容的对齐方式，要对单元格标签<td>进行设置）cellpadding：单元格内容到边的距离，像素为单位。默认情况下，文字是紧挨着左边那条线的，即默认情况下的值为0。
注意不是单元格内容到四条边的距离，而是到一条边的距离，默认是与左边那条线的距离。如果设置属性dir="rtl"，那就指的是内容到右边那条线的距离。cellspacing：单元格和单元格之间的距离（外边距），像素为单位。默认情况下的值为0bgcolor="#99cc66"：表格的背景颜色background="路径src/..."：背景图片。
背景图片的优先级大于背景颜色。
<tr>: 行
- 一个表格就是一行一行组成的
属性:
dir：公有属性，设置这一行单元格内容的排列方式。可以取值：ltr：从左到右（left to right，默认），rtl：从右到左（right to left）bgcolor：设置这一行的单元格的背景色
注：没有background属性，即：无法设置这一行的背景图片，如果非要设置，可以用css实现height：一行的高度align="center"：一行的内容水平居中显示，取值：left、center、rightvalign="center"：一行的内容垂直居中，取值：top、middle、bottom
<td>:单元格
属性:
align：内容的横向对齐方式。属性值可以填：left right centervalign：内容的纵向对齐方式。属性值可以填：top middle bottomwidth：绝对值或者相对值(%)height：单元格的高度bgcolor：设置这个单元格的背景色background：设置这个单元格的背景图片
单元格的合并:
如果要将两个单元格合并，那肯定就要删掉一个单元格。
单元格的属性：
colspan：横向合并。例如colspan="2"表示当前单元格在水平方向上要占据两个单元格的位置rowspan：纵向合并。例如rowspan="2"表示当前单元格在垂直方向上要占据两个单元格的位置
<th>: <thead>标题单元格 属性同<td>标签
<caption>：表格的标题。使用时和tr标签并列
二, 内联标签(行内元素)
内联标签是指本身属性为display:inline;的元素。因为它自身的特点，我们通常使用内联标签来进行文字、小图标（小结构）的搭建
内联标签的特性:
和其他内联元素从左到右在一行显示
不能直接控制宽度、高度以及盒子模型的相关css属性，但是直接设置内外边距的左右值是可以的
内联元素的宽高是由本身内容的大小决定（文字、图片等）
内联元素只能容纳文本或者其他内联元素（此处请注意，不要在内联元素中嵌套块级元素）| 字体 | 粗体 | 斜体 | 上下标 | 划线 |
| 字体 | b | em | sup | del |
| 字体 | strong | i | sub | u |
| 排版 | span | br | ||
| 超链接 | a | |||
| 图片 | img |
一, 字体标签
粗体标签<b>或<strong>(已废弃)
代码示例:
<body>
乳娃娃
<b>乳娃娃</b>
<strong>乳娃娃</strong>
</body>斜体标记 <i>或<em>（已废弃）
代码示例:
<body>
哇哈哈
<i>哇哈哈</i>
<em>哇哈哈</em>
</body>上标<sup>下标<sub>
代码示例:
<body>
5<sup>2</sup>
8<sub>2</sub>
</body>下划线标记<u>中划线标记<s>（已废弃）和<del>
代码示例:
<body>
<u>哇哈哈</u>
<s>哇哈哈</s>
<del>哇哈哈</del>
</body>二, 排版标签
一, span
div和span是非常重要的标签，div的语义是division“分割”;span的语义就是span“范围、跨度”。这两个东西，都是最最重要的“盒子”。
<span>和<div>唯一的区别在于：<span>是不换行的，而<div>是换行的。
代码示例:
<body>
<div>导航栏</div>
<div>横幅</div>
<span>这里是span</span>
</body>span也是表达“小区域、小跨度”的标签，但是是一个文本级的标签。就是说，span里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、dl、ol、div。
代码示例:
<body>
商品简介:
<span>
<a href="">详细信息</a>
<a href="">生产日期</a>
</span>
</body>二, 换行标签<br>
打算结束一行，而又不想开始一个新段落时，<br>标签就派上用场了。无论将它置于何处，<br>标签都会产生一个强制的换行
代码示例:
<body>
<span>br标签老厉害了</br>能让我们换行</span>
</body><p>标签和<br>标签的区别：<p>标签会在段落的前后自动插入一个空行，而<br>标签没有空行；而且<br>标签没有属性
三, 超链接<a>
超链接有三种形式:
外部链接：链接到外部文件。举例：
<body> <a href="https://www.baidu.com">百度一下</a> </body>a是英语
anchor“锚”的意思，就好像这个页面往另一个页面扔出了一个锚。是一个文本级的标签。href是英语
hypertext reference超文本地址的缩写。锚链接:
指给超链接起一个名字，作用是在本页面或者其他页面的的不同位置进行跳转。比如说，在网页底部有一个向上箭头，点击箭头后回到顶部，这个就是利用到了锚链接。首先要创建一个锚点，也就是说，使用
name属性或者id属性给那个特定的位置起个名字代码示例:
<body> <h1>我是一个h1</h1> <h2>我是一个h2</h2> <h3>我是一个h3</h3> <h4>我是一个h4</h4> <h5>我是一个h5</h5> <h6>我是一个h6</h6> <h1>我是一个h1</h1> <h2>我是一个h2</h2> <h3>我是一个h3</h3> <h4>我是一个h4</h4> <h5>我是一个h5</h5> <h6>我是一个h6</h6> <h1>我是一个h1</h1> <h2>我是一个h2</h2> <h3>我是一个h3</h3> <a name="xx">a标记的位置</a> <h4>我是一个h4</h4> <h5>我是一个h5</h5> <h6>我是一个h6</h6> <h1>我是一个h1</h1> <h2>我是一个h2</h2> <h3>我是一个h3</h3> <h4>我是一个h4</h4> <h5>我是一个h5</h5> <h6>我是一个h6</h6> <h1>我是一个h1</h1> <h2 id="xxx">我是一个h2</h2> <h3>我是一个h3</h3> <h4>我是一个h4</h4> <h5>我是一个h5</h5> <h6>我是一个h6</h6> <!--注意:如果href这里只写#表示跳转到网页的最上面--> <a href="#">回到顶部</a> <a href="#xx">回到a标识的位置</a> <a href="#xxx">回到h2位置</a> </body>邮件链接:
代码示例:
<body> <a href="[email protected]">联系我</a> </body>特殊的链接:
返回页面顶部的位置:
<a href="#">跳转到顶部</a>超链接的属性:
href：目标urltitle：鼠标悬停显示的文本name：主要用于设置一个锚点的名称target：告诉浏览器用什么方式来打开目标页面。target属性有以下几个值：_self：在同一个网页中显示（默认值）_blank：在新的窗口中打开_parent：在父窗口中显示_top：在顶级窗口中显示
三, 图片标签<img>
img: 代表的就是一张图片。是单边标记
img是自封闭标签，也称为单标签
能插入的图片类型：
- 能够插入的图片类型是：jpg(jpeg)、gif、png、bmp
- 不能往网页中插入的图片格式是：psd、ai
src属性: 图片的相对路径和绝对路径
相对路径
相对当前页面所在的路径。两个标记
.和..分表代表当前目录和父路径<!-- 当前目录中的图片 --> <img src="2.jpg"> <img src=".\2.jpg"> <!-- 上一级目录中的图片 --> <img src="..\2.jpg">绝对路径
以盘符开始的绝对路径
<img src="C:\Users\aaa\Desktop\html-01\images\1.jpg">网络路径
<img src="http://www.baidu.com/2016040102.jpg">
img标签常用的其他属性:
- width：宽度,单位px
- height：高度,单位px
- title：提示性文本。公有属性。也就是鼠标悬停时出现的文本
- align：指图片的水平对齐方式，属性值可以是：left、center、right
- alt：当图片显示不出来的时候，代替图片显示的内容。alt是英语 alternate “替代”的意思。（有的浏览器不支持）
注意事项:
- 如果要想保证图片等比例缩放，只设置width和height中其中一个
- 如果想实现图文混排的效果，使用align属性，取值为left或right
第五章 补充
一, 文本级和容器级
除此之外，从HTML的角度来讲，标签还可以分为文本级和容器级：
- 文本级标签：p、span、a、b、i、u、em
- 容器级标签：div、h系列、li、dt、dd
- 文本级标签的意思是标签中只可以放文本，不可以放其他内容。除了p之外，所有的文本级标签，都是行内元素。p是个文本级，但是是个块级元素
二, html中的特殊字符
| 代码 | 特殊字符 |
|---|---|
|
空格 （non-breaking spacing，不断打空格） |
< |
小于号（less than） |
> |
大于号（greater than） |
& |
符号& |
" |
双引号 |
' |
单引号 |
© |
版权© |
™ |
商标™ |
三, html颜色表示
颜色表示:
- 纯单词表示：red、green、blue、orange、gray等
- 10进制表示：rgb(255,0,0)
- 16进制表示：#FF0000、#0000FF、#00FF00等
RGB色彩模式:
- 自然界中所有的颜色都可以用红、绿、蓝(RGB)这三种颜色波长的不同强度组合而得，这就是人们常说的三原色原理。
- RGB三原色也叫加色模式，这是因为当我们把不同光的波长加到一起的时候，可以得到不同的混合色。例：红+绿=黄色，红+蓝＝紫色，绿+蓝=青
- 在数字视频中，对RGB三基色各进行8位编码就构成了大约1678万种颜色，这就是我们常说的真彩色。所有显示设备都采用的是RGB色彩模式。
- RGB各有256级(0-255)亮度，256级的RGB色彩总共能组合出约1678万种色彩，即256×256×256=16777216。