首页 > 代码库 > HTML学习笔记
HTML学习笔记
HTML学习笔记
基本实例：
<html><body><h1>My First Heading</h1><p>My first paragraph.</p></body></html>
例子解释：
<html> 与 </html> 之间的文本描述网页
<body> 与 </body> 之间的文本是可见的页面内容
<h1> 与 </h1> 之间的文本被显示为标题
<p> 与 </p> 之间的文本被显示为段落
一、基本的 HTML 标签
.HTML 文档和 HTML 元素是通过 HTML 标签进行标记的
.HTML 标签由开始标签和结束标签组成
.开始标签是被括号包围的元素名
.结束标签是被括号包围的斜杠和元素名
.某些 HTML 元素没有结束标签，比如 <br />
.HTML 标签（还有属性）对大小写不敏感：<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。W3CSchool 使用的是小写，因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML版本中强制使用小写。
1.HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。
<h1>This is a heading</h1>
2.HTML 段落是通过 <p> 标签进行定义的。
<p>This is a paragraph.</p>
3.HTML 链接是通过 <a> 标签进行定义的，在 href 属性中指定链接的地址。
<a href="http://www.W3CSchool.cn">This is a link</a>
4.HTML 图像是通过 <img> 标签进行定义的。
<img src="http://www.mamicode.com/W3CSchool.jpg" width="104" height="142" />
二、HTML元素
HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
?HTML 元素以开始标签起始
?HTML 元素以结束标签终止
?元素的内容是开始标签与结束标签之间的内容
?某些 HTML 元素具有空内容（empty content）
?空元素在开始标签中进行关闭（以开始标签的结束而结束）
?大多数 HTML 元素可拥有属性
1.大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）,HTML 文档由嵌套的 HTML 元素构成。
包含三个 HTML 元素的例子：
<html><body><p>This is my first paragraph.</p></body></html>
2.没有内容的 HTML 内容被称为空元素。空元素是在开始标签中关闭的。
<br/> 就是没有关闭标签的空元素（<br /> 标签定义换行）。
在 XHTML、XML 以及未来版本的 HTML 中，所有元素必须被关闭。
在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。
即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。
三、HTML 属性
HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息，属性总是以名称/值对的形式出现，比如：name="value"，属性总是在 HTML 元素的开始标签中规定。
属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题，在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：name=‘Bill "HelloWorld" Gates‘。
属性例子1:链接的地址在 href 属性中指定(标签为a)：
<a href="http://www.W3CSchool.cn">This is a link</a>
属性例子2:居中排列
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><body><h1 align="center">This is heading 1</h1><p>上面的标题在页面中进行了居中排列。上面的标题在页面中进行了居中排列。上面的标题在页面中进行了居中排列。</p></body></html>
属性例子3:居中排列
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta http-equiv="Content-Language" content="zh-cn" /></head><body bgcolor="yellow"><h2>请看: 改变了颜色的背景。</h2></body></html>
每个 HTML 元素可使用的合法属性的完整列表(完整的 HTML 参考手册)：http://www.w3cschool.cn/index-54.html
适用于HTML 元素的属性(HTML 标准属性参考手册)：http://www.w3cschool.cn/html_ref_standardattributes.html
四、HTML 标题
标题（Heading）是通过 <h1> - <h6> 等标签进行定义的，<h1> 定义最大的标题。<h6> 定义最小的标题。
浏览器会自动地在标题的前后添加空行，默认情况下HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。
请确保将 HTML heading 标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。
搜索引擎使用标题为您的网页的结构和内容编制索引。
因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。
1.水平线：<hr /> 标签在 HTML 页面中创建水平线,hr 元素可用于分隔内容。
<html><body><p>hr 标签定义水平线：</p><hr /><p>这是段落。</p><hr /><p>这是段落。</p><hr /><p>这是段落。</p></body></html>
2.HTML 注释
<!-- This is a comment -->
说明：开始括号之后（左边的括号）需要紧跟一个叹号，结束括号之前（右边的括号）不需要。
五、HTML 段落
段落是通过 <p> 标题定义的。
无法确定 HTML 被显示的确切效果。屏幕的大小，以及对窗口的调整都可能导致不同的结果，对于 HTML，您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。
当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。
HTML 折行
如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br /> 标签
<p>This is<br />a para<br />graph with line breaks</p>
六、HTML 文本格式化
1.文本格式化
<html><body><b>This text is bold</b><br /><strong>This text is strong</strong><br /><big>This text is big</big><br /><em>This text is emphasized</em><br /><i>This text is italic</i><br /><small>This text is small</small><br />This text contains<sub>subscript</sub><br />This text contains<sup>superscript</sup></body></html>
2.预格式文本
<html><body><pre>这是预格式文本。它保留了 空格和换行。</pre><p>pre 标签很适合显示计算机代码：</p><pre>for i = 1 to 10print inext i</pre></body></html>
3.其他格式化：
“计算机输出”标签：不同的“计算机输出”标签的显示效果。
地址：如何在 HTML 文件中写地址。
缩写和首字母缩写：如何实现缩写或首字母缩写。
文字方向：如何改变文字的方向。
块引用：如何实现长短不一的引用语。
删除字效果和插入字效果：如何标记删除文本和插入文本。
4.相关标签
文本格式化标签:
标签 描述
<b> 定义粗体文本。
<big> 定义大号字。
<em> 定义着重文字。
<i> 定义斜体字。
<small> 定义小号字。
<strong> 定义加重语气。
<sub> 定义下标字。
<sup> 定义上标字。
<ins> 定义插入字。
<del> 定义删除字。
<s> 不赞成使用。使用 <del> 代替。
<strike> 不赞成使用。使用 <del> 代替。
<u> 不赞成使用。使用样式（style）代替。
“计算机输出”标签:
标签 描述
<code> 定义计算机代码。
<kbd> 定义键盘码。
<samp> 定义计算机代码样本。
<tt> 定义打字机代码。
<var> 定义变量。
<pre> 定义预格式文本。
<listing> 不赞成使用。使用 <pre> 代替。
<plaintext> 不赞成使用。使用 <pre> 代替。
<xmp> 不赞成使用。使用 <pre> 代替。
引用、引用和术语定义:
标签 描述
<abbr> 定义缩写。
<acronym> 定义首字母缩写。
<address> 定义地址。
<bdo> 定义文字方向。
<blockquote> 定义长的引用。
<q> 定义短的引用语。
<cite> 定义引用、引证。
<dfn> 定义一个定义项目。
七、HTML 样式
style 属性用于改变 HTML 元素的样式。
style 属性的作用：提供了一种改变所有 HTML 元素的样式的通用方法。
样式是 HTML 4 引入的，它是一种新的首选的改变 HTML 元素样式的方式。通过 HTML 样式，能够通过使用 style 属性直接将样式添加到 HTML 元素，或者间接地在独立的样式表中（CSS 文件）进行定义。
1.样式实例 - 字体、颜色和尺寸（style 属性淘汰了旧的 <font> 标签）
font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸：
<html><body><h1 style="font-family:verdana">A heading</h1><p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p></body></html>
2.应该避免使用下面这些标签和属性：（对于以上这些标签和属性：请使用样式代替！）
标签 描述
<center> 定义居中的内容。
<font> 和 <basefont> 定义 HTML 字体。
<s> 和 <strike> 定义删除线文本
<u> 定义下划线文本
属性 描述
align 定义文本的对齐方式
bgcolor 定义背景颜色
color 定义文本颜色
八、HTML 链接
1.锚标签和 Href 属性
HTML 使用 <a> （锚）标签来创建连接另一个文档的链接。
锚可以指向网络上的任何资源：一张 HTML 页面，一幅图像，一个声音或视频文件等等。
创建锚的语法：
<a href="http://www.mamicode.com/url">Text to be displayed</a><a> 用来创建锚。href 属性用于定位需要链接的文档，锚的开始标签和结束标签之间的文字被作为超级链接来显示。
将图像最为链接（不是链接到图像）的实例：
<html>
<body>
<p>
您也可以使用图像来作链接：
<a href="http://www.mamicode.com/lastpage-2.html">
<img border="0" src="http://www.mamicode.com/eg_buttonnext.gif" />
</a>
</p>
</body>
</html>
2.Target 属性
使用 Target 属性，你可以定义被链接的文档在何处显示。
下面的这行会在新窗口打开文档：
<a href="http://www.W3CSchool.cn/" target="_blank">Visit W3CSchool!</a>
3.锚标签和 Name 属性
Name 属性用于创建被命名的锚（named anchors）。当使用命名锚（named anchors）时，我们可以创建直接跳至页面中某个节的链接，这样使用者就无需不停的滚动页面来寻找他们需要的信息。
以下是命名锚的语法：
<a name="label">Text to be displayed</a>name 属性用于创建命名锚。锚的名称可以是任何你喜欢的名字。
下面这行定义了命名锚：
<a name="tips">Useful Tips Section</a>你会注意到，命名锚会以特殊的方式来显示。
将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个节，就像这样：
<a href="http://www.W3CSchool.cn/html/html_links.asp#tips">
Jump to the Useful Tips Section
</a>
4.总是将正斜杠添加到子文件夹。
假如你这样书写链接的话：href="http://www.W3CSchool.cn/html"，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="http://www.W3CSchool.cn/html/"
命名锚经常被用在长的文档中创建目录。可以为每个章节赋予一个命名锚，然后连接到这些锚的链接被置于文档的上部。
假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端。不会有错误发生。
在新的浏览器窗口打开链接的实例：
<html>
<body>
<a href="http://www.mamicode.com/lastpage-2.html" target="_blank">最后一页</a>
<p>
如果把链接的 target 属性设置为 "_blank"，该链接会在新窗口中打开。
</p>
</body>
</html>
创建电子邮件的链接的实例：
<html>
<body>
<p>
这是另一个 mailto 链接：
<a href="mailto:someone@microsoft.com?cc=someoneelse@microsoft.com&bcc=andsomeoneelse2@microsoft.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">发送邮件！</a>
</p>
<p>
<b>注意：</b>应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。
</p>
</body>
</html>
九、HTML 表格
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
实例：
<table border="1"><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr></table>
在浏览器显示如下：
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
1.边框属性
如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。
<table border="1"><tr><td>Row 1, cell 1</td><td>Row 1, cell 2</td></tr></table>
2.表头
表格的表头使用 <th> 标签进行定义。
<table border="1"><tr><th>Heading</th><th>Another Heading</th></tr><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr></table>
浏览器显示如下：
Heading Another Heading
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
3.表格中的空单元格
在大多数浏览器中，没有内容的表格单元显示得不太好。
空的单元格的边框没有被显示出来。（不过 Mozilla Firefox 可以将整个边框显示出来。）为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。
<table border="1"><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td> </td></tr></table>
4.关于表格的更多实例：
没有边框的表格:一个没有边框的表格。
表格中的表头(Heading):如何显示表格表头。
空单元格:如何使用 " " 处理没有内容的单元格。
带有标题的表格:一个带标题 (caption) 的表格。
跨行或跨列的表格单元格:如何定义跨行或跨列的表格单元格。
表格内的标签:如何显示在不同的元素内显示元素。
单元格边距(Cell padding):如何使用 Cell padding 来创建单元格内容与其边框之间的空白。
单元格间距(Cell spacing):如何使用 Cell spacing 增加单元格之间的距离。
向表格添加背景颜色或背景图像:如何向表格添加背景。
向表格单元添加背景颜色或者背景图像:如何向一个或者更多表格单元添加背景。
在表格单元中排列内容:如何使用 "align" 属性排列单元格内容,以便创建一个美观的表格。
框架(frame)属性:如何使用 "frame" 属性来控制围绕表格的边框。
5.表格标签
表格 描述
<table> 定义表格
<caption> 定义表格标题。
<th> 定义表格的表头。
<tr> 定义表格的行。
<td> 定义表格单元。
<thead> 定义表格的页眉。
<tbody> 定义表格的主体。
<tfoot> 定义表格的页脚。
<col> 定义用于表格列的属性。
<colgroup> 定义表格列的组。
十、HTML 列表
1.无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记，无序列表始于 <ul> 标签。每个列表项始于 <li>。
实例：
<ul><li>Coffee</li><li>Milk</li></ul>
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
2.有序列表
同样，有序列表也是一列项目，列表项目使用数字进行标记，有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
实例：
<ol><li>Coffee</li><li>Milk</li></ol>
浏览器显示如下：
1.Coffee
2.Milk
3.定义列表
定义列表
自定义列表不仅仅是一列项目，而是项目及其注释的组合，自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
<dl><dt>Coffee</dt><dd>Black hot drink</dd><dt>Milk</dt><dd>White cold drink</dd></dl>
浏览器显示如下：
Coffee
Black hot drink
Milk
White cold drink
4.其他实例
不同类型的无序列表：
<html><body><h4>Disc 项目符号列表：</h4><ul type="disc"><li>苹果</li><li>香蕉</li><li>柠檬</li><li>桔子</li></ul> <h4>Circle 项目符号列表：</h4><ul type="circle"><li>苹果</li><li>香蕉</li><li>柠檬</li><li>桔子</li></ul> <h4>Square 项目符号列表：</h4><ul type="square"><li>苹果</li><li>香蕉</li><li>柠檬</li><li>桔子</li></ul> </body></html>
不同类型的有序列表：
<html><body><h4>数字列表：</h4><ol><li>苹果</li><li>香蕉</li><li>柠檬</li><li>桔子</li></ol> <h4>字母列表：</h4><ol type="A"><li>苹果</li><li>香蕉</li><li>柠檬</li><li>桔子</li></ol> <h4>小写字母列表：</h4><ol type="a"><li>苹果</li><li>香蕉</li><li>柠檬</li><li>桔子</li></ol> <h4>罗马字母列表：</h4><ol type="I"><li>苹果</li><li>香蕉</li><li>柠檬</li><li>桔子</li></ol> <h4>小写罗马字母列表：</h4><ol type="i"><li>苹果</li><li>香蕉</li><li>柠檬</li><li>桔子</li></ol> </body></html>
更多实例
嵌套列表:如何嵌套列表。
嵌套列表:更复杂的嵌套列表。
定义列表:演示一个定义列表
5.列表标签
标签 描述
<ol> 定义有序列表。
<ul> 定义无序列表。
<li> 定义列表项。
<dl> 定义定义列表。
<dt> 定义定义项目。
<dd> 定义定义的描述。
<dir> 已废弃。使用 <ul> 代替它。
<menu> 已废弃。使用 <ul> 代替它。
十一、表单和输入
1.表单
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。
表单使用表单标签（<form>）定义。
<form>...</form>
2.输入
多数情况下被用到的表单标签是输入标签（<input>）。输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：
文本域（Text Fields）
当用户要在表单中键入字母、数字等内容时，就会用到文本域。
<form>First name: <input type="text" name="firstname" /><br />Last name: <input type="text" name="lastname" /></form>
浏览器显示如下：
First name:
Last name:
注意，表单本身并不可见。同时，在大多数浏览器中，文本域的缺省宽度是20个字符。
单选按钮（Radio Buttons）
当用户从若干给定的的选择中选取其一时，就会用到单选框。
<form><input type="radio" name="sex" value="male" /> Male<br /><input type="radio" name="sex" value="female" /> Female</form>
注意，只能从中选取其一。
复选框（Checkboxes）
当用户需要从若干给定的选择中选取一个或若干选项时，就会用到复选框。
<form><input type="checkbox" name="bike" />I have a bike<br /><input type="checkbox" name="car" />I have a car</form>
3.表单的动作属性（Action）和确认按钮
当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。
<form name="input" action="html_form_action.asp" method="get">Username: <input type="text" name="user" /><input type="submit" value="Submit" /></form>
浏览器显示如下：
Username:
假如您在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 "html_form_action.asp" 的页面。该页面将显示出输入的结果。
4.更多实例
复选框：如何在 HTML 页中创建复选框。用户可以选中或取消选取复选框。
单选按钮：如何在 HTML 中创建单选按钮。
简单的下拉列表：如何在 HTML 页面中创建简单的下拉列表框。下拉列表框是一个可选列表。
另一个下拉列表：如何创建一个简单的带有预选值的下拉列表。（编者注：预选值指预先指定的首选项。）
文本域(Textarea)：如何创建文本域（多行文本输入控件）。用户可在文本域中写入文本。可写入字符的字数不受限制。
创建按钮：如何创建按钮。你可以对按钮上的文字进行自定义。
Fieldset around data：如何在数据周围绘制一个带标题的框。
带有输入框和确认按钮的表单：如何向页面添加表单。此表单包含两个输入框和一个确认按钮。
带有复选框的表单：此表单包含两个复选框和一个确认按钮。
带有单选按钮的表单：此表单包含两个单选框和一个确认按钮。
从表单发送电子邮件：如何从表单发送电子邮件。
5.表单标签
标签 描述
<form> 定义供用户输入的表单
<input> 定义输入域
<textarea> 定义文本域 (一个多行的输入控件)
<label> 定义一个控制的标签
<fieldset> 定义域
<legend> 定义域的标题
<select> 定义一个选择列表
<optgroup> 定义选项组
<option> 定义下拉列表中的选项
<button> 定义一个按钮
<isindex> 已废弃。有<input>代替。
十二、HTML 图像
1.图像标签（<img>）和源属性（Src）
在 HTML 中，图像由 <img> 标签定义。
<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。
要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。
定义图像的语法是：
<img src="http://www.mamicode.com/url" />
URL 指存储图像的位置。如果名为 "boat.gif" 的图像位于 www.W3CSchool.cn 的 images 目录中，那么其 URL 为http://www.W3CSchool.cn/images/boat.gif。
浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。
2.替换文本属性（Alt）
alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。。
<img src="http://www.mamicode.com/boat.gif" alt="Big Boat">在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。
基本的注意事项 - 有用的提示：
假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。
3.更多实例
背景图片:
<html><body background="eg_background.jpg"><h3>图像背景</h3><p>gif 和 jpg 文件均可用作 HTML 背景。</p><p>如果图像小于页面，图像会进行重复。</p></body><!-- awwwb.com --></html>
排列图片:如何在文字中排列图像。
浮动图像:如何使图片浮动至段落的左边或右边。
调整图像尺寸:如何将图片调整到不同的尺寸。
为图片显示替换文本:如何为图片显示替换文本。在浏览器无法载入图像时，替换文本属性告诉读者们失去的信息。为页面上的图像都加上替换文本属性是个好习惯。
制作图像链接:如何将图像作为一个链接使用。
创建图像映射:如何创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接。
把图像转换为图像映射:如何把一幅普通的图像设置为图像映射。
4.图像标签
标签 描述
<img> 定义图像。
<map> 定义图像地图。
<area> 定义图像地图中的可点击区域。
十三、HTML 背景
背景（Backgrounds）
<body> 拥有两个配置背景的标签。背景可以是颜色或者图像。
背景颜色（Bgcolor）
背景颜色属性将背景设置为某种颜色。属性值可以是十六进制数、RGB 值或颜色名。
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">
以上的代码均将背景颜色设置为黑色。
背景（Background）
背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。
<body background="clouds.gif">
<body background="http://www.W3CSchool.cn/clouds.gif">URL可以是相对地址，如第一行代码。也可以使绝对地址，如第二行代码。
提示：如果你打算使用背景图片，你需要紧记一下几点：
背景图像是否增加了页面的加载时间。小贴士：图像文件不应超过 10k。
背景图像是否与页面中的其他图象搭配良好。
背景图像是否与页面中的文字颜色搭配良好。
图像在页面中平铺后，看上去还可以吗？
对文字的注意力被背景图像喧宾夺主了吗？
基本的注意事项 - 有用的提示：
<body> 标签中的背景颜色（bgcolor）、背景（background）和文本（text）属性在最新的 HTML 标准（HTML4 和 XHTML）中已被废弃。W3C 在他们的推荐标准中已删除这些属性。
应该使用层叠样式表（CSS）来定义 HTML 元素的布局和显示属性。
十四、HTML 颜色
颜色由红色、绿色、蓝色混合而成。
1.颜色值
颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。每种颜色的最小值是 0（十六进制：#00）。最大值是 255（十六进制：#FF）。
关闭红色
如果将红色完全关闭,绿色和蓝色的组合有 65536 种（256 x 256）。
打开红色
如果将红色设置为最大值,那么仍然存在 65536 种绿色和蓝色的不同组合。
1600万种不同的颜色
通过计算 256 x 256 x 256，从 0 到 255 的红色、绿色和蓝色的值一共可以组合出 1600 万种不同的颜色。
大多数现代的显示器有能力显示出至少 16384 种不同的颜色。
你可以查看色表，你会看到当绿色和蓝色的值为零时，红色值从 0 到 255 时的具体的颜色。
如需查看基于红色从 0 到 255 变化时的 16384 种不同的颜色。
灰阶
当所有颜色取相等的值时，灰色就可以被显示出来。为了使您更容易地选择合适的灰色，我们为您制作了一幅灰阶色表。
2.颜色名
大多数的浏览器都支持颜色名集合。
提示：仅仅有 16 种颜色名被 W3C 的 HTML4.0 标准所支持。它们是：aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow。如果使用其它颜色的话，就应该使用十六进制的颜色值。
颜色名列表：
单击一个颜色名或者 16 进制值,就可以查看与不同文字颜色搭配的背景颜色。
3.Web安全色
数年以前，当大多数计算机仅支持 256 种颜色的时候，一系列 216 种 Web 安全色作为 Web 标准被建议使用。其中的原因是，微软和 Mac 操作系统使用了 40 种不同的保留的固定系统颜色（双方大约各使用 20 种）。
我们不确定如今这么做的意义有多大，因为越来越多的计算机有能力处理数百万种颜色，不过做选择还是你自己。
216 跨平台色
最初，216 跨平台 web 安全色被用来确保：当计算机使用 256 色调色板时，所有的计算机能够正确地显示所有的颜色。
HTML学习笔记