HTML基础

HTML:是用来描述网页的一种语言。

· HTML 指的是超文本标记语言 (Hyper Text MarkupLanguage)

· HTML 不是一种编程语言,而是一种标记语言 (markup language)

· 标记语言是一套标记标签 (markup tag)

· HTML 使用标记标签来描述网页

 

HTML 标签:HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

· HTML 标签是由尖括号包围的关键词,比如 <html>

· HTML 标签通常是成对出现的,比如 <b> 和 </b>

· 标签对中的第一个标签是开始标签,第二个标签是结束标签 

· 开始和结束标签也被称为开放标签闭合标签 

 

HTML 文档 = 网页

· HTML 文档描述网页 

· HTML 文档包含 HTML 标签和纯文本

· HTML 文档也被称为网页 

Web 浏览器的作用是读取 HTML 文档,并以网页的形式显示出它们。浏览器不会显示 HTML 标签,而是使用标签来解释页面的内容。

 

HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。开始标签常被称为开放标签(opening tag),结束标签常称为闭合标签(closing tag)。

HTML 元素语法

· HTML 元素以开始标签起始

· HTML 元素以结束标签终止

· 元素的内容是开始标签与结束标签之间的内容

· 某些 HTML 元素具有空内容(empty content) 

· 空元素在开始标签中进行关闭(以开始标签的结束而结束)

· 大多数 HTML 元素可拥有属性 

 

嵌套的 HTML 元素

大多数 HTML 元素可以嵌套(可以包含其他 HTML 元素).

HTML 文档由嵌套的 HTML 元素构成.

 

空的 HTML 元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

<br> 就是没有关闭标签的空元素(<br> 标签定义换行)。

在 XHTML、XML 以及未来版本的 HTML 中,所有元素都必须被关闭。

在开始标签中添加斜杠,比如 <br />,是关闭空元素的正确方法,HTML、XHTML 和 XML 都接受这种方式。

即使 <br> 在所有浏览器中都是有效的,但使用 <br /> 其实是更长远的保障。

 

HTML 提示:使用小写标签

HTML 标签对大小写不敏感:<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。

W3School 使用的是小写标签,因为万维网联盟(W3C)在 HTML 4 中推荐使用小写,而在未来 (X)HTML 版本中强制使用小写。

 

HTML 属性

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。

属性总是以名称/值对的形式出现,比如:name="value"。

属性总是在 HTML 元素的开始标签中规定。

 

HTML 提示:使用小写属性

属性和属性值对大小写不敏感。

不过,万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。而新版本的 (X)HTML 要求使用小写属性。

 

始终为属性值加引号

属性值应该始终被包括在引号内。双引号是最常用的,不过使用单引号也没有问题。在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,例如:

name='Bill "HelloWorld" Gates'

 

HTML属性参考手册:W3SChool提供了 完整的HTNL参考手册、HTML标准属性参考手册

下面列出了适用于大多数 HTML 元素的属性:

属性

描述

class

classname

规定元素的类名(classname

id

id

规定元素的唯一 id

style

style_definition

规定元素的行内样式(inline style

title

text

规定元素的额外信息(可在工具提示中显示)

 

 

HTML 注释

可以将注释插入 HTML 代码中,这样可以提高其可读性,使代码更易被人理解。浏览器会忽略注释,也不会显示它们。

实例

<!-- This is a comment -->

注释:开始括号之后(左边的括号)需要紧跟一个叹号,结束括号之前(右边的括号)不需要。提示:合理地使用注释可以对未来的代码编辑工作产生帮助。

 

HTML 输出 - 有用的提示

我们无法确定 HTML 被显示的确切效果。屏幕的大小,以及对窗口的调整都可能导致不同的结果。

对于 HTML,您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。

当显示页面时,浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是,HTML 代码中的所有连续的空行(换行)也被显示为一个空格

 

当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表:

外部样式表:当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。

<head><link rel="stylesheet" type="text/css" href="mystyle.css">

</head>

内部样式表:单个文件需要特别样式时,就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。

<head>

<style type="text/css">

body {background-color: red}

p {margin-left: 20px}

</style>

</head>

内联样式:当特殊的样式需要应用到个别元素时,就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

<p style="color: red; margin-left: 20px">

This is a paragraph

</p>

标签

描述

<style>

定义样式定义。

<link>

定义资源引用。

<div>

定义文档中的节或区域(块级)。

<span>

定义文档中的行内的小块或区域。

<font>

规定文本的字体、字体尺寸、字体颜色。不赞成使用。请使用样式。

<basefont>

定义基准字体。不赞成使用。请使用样式。

<center>

对文本进行水平居中。不赞成使用。请使用样式。

 

 

标签

描述

<html>

定义 HTML 文档。

<body>

定义文档的主体。

<h1> to <h6>

定义 HTML 标题

<hr>

定义水平线。

<!-->

定义注释。

<p>

定义段落。

<br />

插入单个折行(换行)。

<a>

定义锚。

文本格式化标签:

<b>

定义粗体文本。

<big>

定义大号字。

<em>

定义着重文字。

<i>

定义斜体字。

<small>

定义小号字。

<strong>

定义加重语气。

<sub>

定义下标字。

<sup>

定义上标字。

<ins>

定义插入字。

<del>

定义删除字。

<s>

不赞成使用。使用 <del> 代替。

<strike>

不赞成使用。使用 <del> 代替。

<u>

不赞成使用。使用样式(style)代替。

 

“计算机”输出标签:

<b>

定义粗体文本。

<big>

定义大号字。

<em>

定义着重文字。

<i>

定义斜体字。

<small>

定义小号字。

<strong>

定义加重语气。

<sub>

定义下标字。

<sup>

定义上标字。

<ins>

定义插入字。

<del>

定义删除字。

<s>

不赞成使用。使用 <del> 代替。

<strike>

不赞成使用。使用 <del> 代替。

<u>

不赞成使用。使用样式(style)代替。

 

引用、引用和术语定义:

<abbr>

定义缩写。

<acronym>

定义首字母缩写。

<address>

定义地址。

<bdo>

定义文字方向。

<blockquote>

定义长的引用。

<q>

定义短的引用语。

<cite>

定义引用、引证。

<dfn>

定义一个定义项目。

图像标签:

<img>

定义图像。

<map>

定义图像地图。

<area>

定义图像地图中的可点击区域。

表格标签:

<table>

定义表格

<caption>

定义表格标题。

<th>

定义表格的表头。

<tr>

定义表格的行。

<td>

定义表格单元。

<thead>

定义表格的页眉。

<tbody>

定义表格的主体。

<tfoot>

定义表格的页脚。

<col>

定义用于表格列的属性。

<colgroup>

定义表格列的组。

列表标签:

<ol>

定义有序列表。

<ul>

定义无序列表。

<li>

定义列表项。

<dl>

定义定义列表。

<dt>

定义定义项目。

<dd>

定义定义的描述。

<dir>

已废弃。使用 <ul> 代替它。

<menu>

已废弃。使用 <ul> 代替它。

 

HTML分组标签:

<div>

定义文档中的分区或节(division/section)。

<span>

定义 span,用来组合文档中的行内元素。

HTML布局标签:

<div>

定义文档中的分区或节(division/section)。

<span>

定义 span,用来组合文档中的行内元素。

表单标签:

<form>

定义供用户输入的表单

<input>

定义输入域

<textarea>

定义文本域 (一个多行的输入控件)

<label>

定义一个控制的标签

<fieldset>

定义域

<legend>

定义域的标题

<select>

定义一个选择列表

<optgroup>

定义选项组

<option>

定义下拉列表中的选项

<button>

定义一个按钮

HTML iframe 标签:

<iframe>

定义内联的子窗口(框架)



<pre>是预格式文本。它保留了空格和换行。pre 标签很适合显示计算机代码。

 

<blockquote><q>使用 blockquote 元素的话,浏览器会插入换行和外边距,而 q 元素不会有任何特殊的呈现。

 

<h1>-<h6>:HTML标题(Heading)是通过<h1> - <h6>等标签进行定义的。

<h1>定义最大的标题,<h6>定义最小的标题。

注释:浏览器会自动地在标题的前后添加空行。

注释:默认情况下,HTML 会自动地在块级元素前后添加一个额外的空行,比如段落、标题元素前后。

标题很重要

请确保将 HTML heading 标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。

搜索引擎使用标题为您的网页的结构和内容编制索引。

因为用户可以通过标题来快速浏览您的网页,所以用标题来呈现文档结构是很重要的。 应该将 h1 用作主标题(最重要的),其后是 h2(次重要的),再其次是 h3,以此类推。

<hr /> 标签在 HTML 页面中创建水平线。  hr 元素可用于分隔内容。

提示:使用水平线 (<hr> 标签) 来分隔文章中的小节是一个办法(但并不是唯一的办法)。

<p>:HTML段落是通过<p>标签进行定义的。<p>元素定义了 HTML 文档中的一个段落。这个元素拥有一个开始标签<p>,以及一个结束标签<p>。 注释:浏览器会自动地在段落的前后添加空行。(<p> 是块级元素)。  提示:使用空的段落标记 <p></p> 去插入一个空行是个坏习惯。用 <br /> 标签代替它!(但是不要用 <br /> 标签去创建列表。)

<br />:如果希望在不产生一个新段落的情况下进行换行(新行),请使用 <br /> 标签:<br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义,因此它没有结束标签。

 

<a>:HTML 链接是通过 <a> 标签进行定义的。在 href 属性中指定链接的地址。    

      超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。                                                                       

     当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手。我们通过使用 <a> 标签在 HTML 中创建链接。有两种使用 <a> 标签的方式:

1. 通过使用 href 属性 - 创建指向另一个文档的链接

2. 通过使用 name 属性 - 创建文档内的书签

href 属性规定链接的目标。开始标签和结束标签之间的文字被作为超级链接来显示。  

   使用 Target 属性,你可以定义被链接的文档在何处显示。      

   name 属性规定锚(anchor)的名称。可以使用 name 属性创建 HTML 页面中的书签。书签不会以任何特殊方式显示,它对读者是不可见的。

    当使用命名锚(named anchors)时,我们可以创建直接跳至该命名锚(比如页面中某个小节)的链接,这样使用者就无需不停地滚动页面来寻找他们需要的信息了。

   提示:锚的名称可以是任何你喜欢的名字。

   提示:可以使用 id 属性来替代 name 属性,命名锚同样有效。

 

<img>:HTML 图像是通过 <img> 标签进行定义的。图像的名称和尺寸是以属性的形式提供的。插入动画图像的语法与插入普通图像的语法没有区别。

<img> 是空标签,意思是说,它只包含属性,并且没有闭合标签。要在页面上显示图像,你需要使用源属性(src)。

 src 指 "source"。源属性的值是图像的 URL 地址。

   替换文本属性alt :用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。此时,浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯,这样有助于更好的显示信息,并且对于那些使用纯文本浏览器的人来说是非常有用的。   

   图像映射:<img src="../i/eg_planets.jpg" border="0" usemap="#planetmap" alt="Planets" />

<map name="planetmap" id="planetmap">

<area shape="circle" coords="180,139,14" href ="../example/html/venus.html" target ="_blank" alt="Venus" />

<area shape="circle" coords="129,161,10" href ="../example/html/mercur.html" target ="_blank" alt="Mercury" />

<area shape="rect" coords="0,0,110,260" href ="../example/html/sun.html" target ="_blank"

alt="Sun" /> </map>   把图像转换为图像映射:<a href="../example/html/html_ismap.html">

                      <img src="../i/eg_planets.jpg" ismap /> </a>

<body>元素定义了 HTML 文档的主体。这个元素拥有一个开始标签 <body>,以及一个结束标签 </body>。

<html>元素定义了整个 HTML 文档。这个元素拥有一个开始标签 <html>,以及一个结束标签 </html>。

<table> 标签来定义表格。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。表格的表头使用 <th> 标签进行定义。                    在一些浏览器中,没有内容的表格单元显示得不太好。如果某个单元格是空的(没有内容),浏览器可能无法显示出这个单元格的边框。为了避免这种情况,在空单元格中添加一个空格占位符,就可以将边框显示出来。<td> </td>

 

HTML 支持有序、无序和定义列表:

无序列表

无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。

无序列表始于 <ul> 标签。每个列表项始于 <li>

列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

有序列表                             

        同样,有序列表也是一列项目,列表项目使用数字进行标记。

有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

定义列表

自定义列表不仅仅是一列项目,而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

        定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

 

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

 

HTML 块元素

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

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

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

 

HTML 内联元素

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

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

 

HTML <div> 元素

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

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

如果与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性。

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

 

HTML <span> 元素

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

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

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

网站布局

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

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

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

HTML 布局 - 使用 <div> 元素

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

HTML 布局 - 使用表格

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

 

HTML 表单用于搜集不同类型的用户输入。

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

表单元素是允许用户在表单中(比如:文本域、下拉列表、单选框、复选框等等)输入信息的元素。

表单使用表单标签(<form>)定义。

 

输入标签(<input>)。输入类型是由类型属性(type)定义的。大多数经常被用到的输入类型如下:

文本域(Text Fields):当用户要在表单中键入字母、数字等内容时,就会用到文本域。type="text"。文本域的缺省宽度是20个字符。

单选按钮(Radio Buttons):当用户从若干给定的的选择中选取其一时,就会用到单选框。type="radio"

复选框(Checkboxes):当用户需要从若干给定的选择中选取一个或若干选项时,就会用到复选框。type="checkbox"

 

表单的动作属性(Action)和确认按钮:

当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

<form name="input" action="html_form_action.asp" method="get">

Username:

<input type="text" name="user" /><input type="submit" value="Submit" />

</form>

窗体底端

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

 

通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架,并且每个框架都独立于其他的框架。

使用框架的坏处:

· 开发人员必须同时跟踪更多的HTML文档

· 很难打印整张页面

框架结构标签<frameset>

· 框架结构标签(<frameset>)定义如何将窗口分割为框架

· 每个 frameset 定义了一系列行列  cols rows

rows/columns 的值规定了每行或每列占据屏幕的面积

框架标签(Frame):Frame 标签定义了放置在每个框架中的 HTML 文档。

基本的注意事项 - 有用的提示:

假如一个框架有可见边框,用户可以拖动边框来改变它的大小。为了避免这种情况发生,可以在 <frame> 标签中加入:noresize="noresize"。

为不支持框架的浏览器添加 <noframes> 标签。

重要提示:不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用!不过,假如你添加包含一段文本的 <noframes> 标签,就必须将这段文字嵌套于 <body></body> 标签内。

内联框架:<iframe src="../i/eg_landscape.jpg"></iframe>src中的URL 指向隔离页面的位置。

iframe 用于在网页内显示网页。

 

Iframe - 设置高度和宽度:

heightwidth 属性用于规定 iframe 的高度和宽度。

属性值的默认单位是像素,但也可以用百分比来设定(比如 "80%")。

Iframe - 删除边框

frameborder属性规定是否显示 iframe 周围的边框。

设置属性值为 "0" 就可以移除边框:

使用 iframe 作为链接的目标

iframe 可用作链接的目标(target)。

链接的 target 属性必须引用 iframe 的 name 属性:

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>

<p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>

 

背景(Backgrounds)

<body> 拥有两个配置背景的标签。背景可以是颜色或者图像。

背景颜色(Bgcolor)

背景颜色属性将背景设置为某种颜色。属性值可以是十六进制数、RGB 值或颜色名。

背景(Background)

背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口,那么图像将在整个浏览器窗口进行复制。

URL可以是相对地址。也可以使绝对地址。

提示:如果你打算使用背景图片,你需要紧记一下几点:

· 背景图像是否增加了页面的加载时间。小贴士:图像文件不应超过 10k。

· 背景图像是否与页面中的其他图象搭配良好。

· 背景图像是否与页面中的文字颜色搭配良好。

· 图像在页面中平铺后,看上去还可以吗?

· 对文字的注意力被背景图像喧宾夺主了吗?

基本的注意事项 - 有用的提示:

<body> 标签中的背景颜色(bgcolor)、背景(background)和文本(text)属性在最新的 HTML 标准(HTML4 和 XHTML)中已被废弃。W3C 在他们的推荐标准中已删除这些属性。

应该使用层叠样式表(CSS)来定义 HTML 元素的布局和显示属性。

 

颜色由红色、绿色、蓝色混合而成。

颜色值:颜色由一个十六进制符号来定义,这个符号由红色、绿色和蓝色的值组成(RGB)。每种颜色的最小值是0(十六进制:#00)。最大值是255(十六进制:#FF)。

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

Color

Color HEX

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)

颜色名:大多数的浏览器都支持颜色名集合。

提示:仅仅有 16 种颜色名被 W3C 的 HTML4.0 标准所支持。它们是:aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow。

如果需要使用其它的颜色,需要使用十六进制的颜色值。

Color

Color HEX

Color Name

 

#F0F8FF

AliceBlue

 

#FAEBD7

AntiqueWhite

 

#7FFFD4

Aquamarine

 

#000000

Black

 

#0000FF

Blue

 

#8A2BE2

BlueViolet

 

#A52A2A

Brown

Web安全色

216 跨平台色:最初,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

 

如果使用其它颜色的话,就应该使用十六进制的颜色值

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

颜色名

十六进制颜色值

颜色

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

 

Feldspar

#D19275

 

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

 

LightGrey

#D3D3D3

 

LightGreen

#90EE90

 

LightPink

#FFB6C1

 

LightSalmon

#FFA07A

 

LightSeaGreen

#20B2AA

 

LightSkyBlue

#87CEFA

 

LightSlateBlue

#8470FF

 

LightSlateGray

#778899

 

LightSteelBlue

#B0C4DE

 

LightYellow

#FFFFE0

 

Lime

#00FF00

 

LimeGreen

#32CD32

 

Linen

#FAF0E6

 

Magenta

#FF00FF

 

Maroon

#800000

 

MediumAquaMarine

#66CDAA

 

MediumBlue

#0000CD

 

MediumOrchid

#BA55D3

 

MediumPurple

#9370D8

 

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

#D87093

 

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

 

VioletRed

#D02090

 

Wheat

#F5DEB3

 

White

#FFFFFF

 

WhiteSmoke

#F5F5F5

 

Yellow

#FFFF00

 

YellowGreen

#9ACD32

 

 



  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值