html5全解析

htm是软件开发中非常基础的知识,也是很重要的知识,在web中是很重要的知识点,在此梳理一下主要内容:

1、HTML是什么?

全称为HyperText Markup Language,超文本标记语言,非编程语言。

XHTML:功能和HTML差不多,但书写要求比HTML严格。

dhtml:动态页面:js+csss+html=dhtml

2、HTML的基本架构?

以下 HTML Source Code 便是一份 HTML 文件的基本架构 :
<HTML>

<HEAD>

<TITLE> 网页的标题 </TITLE>

</HEAD>

<BODY>

网页的内容,很多标记都作用于此

</BODY>

</HTML>

特点解说:

  • 整份文件处于标记<HTML>与</HTML>之间。

    <HTML>用以声明这是 HTML 文件,让浏览器认出并正确处理此 HTML 文件。

  • 文件分两部分,由<HEAD>至</HEAD>称为开头,<BODY>至</BODY>称本文。

    基本上两者各有适用的标记,如<TITLE>只可出现于开头部分。

  • 开头部分用以存载重要资讯,而只有本文部分会被显示。

    所以大部分标记会运用于本文部分。

  • <TITLE>所标示的是文件的标题。

    会出现于浏览器顶部及为别人 Bookmark 时的名称,所以每页有不同而明确的标题 是需要的。

上述标记中只有<BODY>具参数设定。

■ <BODY> 之参数设定:

例子:

<BODY text="#000000" link="#0000FF" alink="#FF0000" vlink="#0000FF" background="bg1.gif" bgcolor="#FFFFFF" leftmargin=2 topmargin=2 bgproperties="fixed">

  • text="#000000"

    用以设定文字颜色。 #000000 代表黑色,亦可以采用颜色的名称,即 text="black" 。

  • link="#0000FF"

    设定一般文字连结颜色。

  • alink="#FF0000"

    设定刚按下时文字连结颜色。

  • vlink="#0000FF"

    设定连结后的颜色。(被按过)。

  • background="bg1.gif"

    设定背景墙纸。GIF 或 JPEG 皆可,可以是绝对途径或相对途径。

  • bgcolor="#FFFFFF"

    设定背景颜色。当己设定背景墙纸时会失去作用,除非墙纸有透明部分。

  • leftmargin=2

    设定整份文件显示画面的左方边沿空间,单位为像素。 『只适用于IE』

  • topmargin=2

    设定整份文件显示画面的上方边沿空间。 『只适用于IE』

  • bgproperties="fixed"

    固定背景墙纸,当卷动文字时墙纸不会跟著卷动。 『只适用于IE』

标记及参数之字母大小都可以。

3、编写规范

a、写法

· 任何标记皆由"<"及">"所围住,如 <p>

· 标记名与小于号之间不能留有空白字符。

· 某些标记 要加上参数,某些则不必。如 <font size="+2">Hello</font>

· 参数只可加于起始标记中。

· 在起始标记之标记名前加上符号"/"便是其终结标记,如 </font>

· 标记字母大小写皆可。建议全部小写

b、HTML标记的分类

b.1围堵标记:<p>aaaa</p>

b.1空白标记:aaaa<br/>

4、常用的HTML标记

排版标记: 

<!--注解--> ;<!--由这处开始是产品订购表格-->

<P> ;段落标记:<p align="center">

<BR> ;换行

<HR> ; 水平线 <HR align="LEFT" size="2" width="70%" color="#0000FF" noshade>

<CENTER> ;居中标记

<PRE> ;预设格式标记

<DIV> ;区隔标记。作用:设定字、画、表格等的摆放位置。

<NOBR> ;<NOBR>称为不折行标记。作用:令某些文字不因太长而绕行,一 显示于同一行或下一 行。它对住址、数学算式、一行数字、程式码等尤为有用。

<WBR> ; <WBR>称为建议折行标记。作用:预设折行部位。

字体标记: 

<h1>..<h6>h1最大字体

<b></b> <storong></storong> :加粗

<i></i> :斜体 <em></em>:定义着重文字

<u></u>:下划线 <s></s>:中划线、删除线

<sup>:上标 <sub>:下标

<font> :字体大小 <font size="+2" color="#008000">Creation of Webpage</font>

图像标记:

<img src="logo.gif" width=100 height=100 hspace=5 vspace=5 top" alt="Logo of PenPals Garden" lowsrc="pre_logo.gif">

清单标记:

<ol> <ul> <dl><li><dt><dd>

无序清单:ul <UL type="square">

有序清单:ol <ol type="i" start="4"></ol>

自定义清单:dl dt dd

表格标记:

<TABLE> <TR> <TD> :

▲Top

这三个标记是定义表格的最重要的标记,可以说只学这三个己足够。

<TABLE>是一个容器标记,意思是说它用以声明这是表格而且其他表格标记只能在他的 范围内才适用,属容器标记的还有其他。

<TR>用以标示表格列(row)

<TD>用以标示储存格(cell)

<TABLE> 的参数设定(常用):

例如: <table width="400" cellspacing="2" cellpadding="2" align="CENTER" valign="TOP" background="myweb.gif" bgcolor="#0000FF" bordercolor="#FF00FF" bordercolorlight="#00FF00" bordercolordark="#00FFFF" cols="2">

  • width="400"

    表格宽度,接受绝对值(如 80)及相对值(如 80%)。

  • 表格边框厚度,不同浏览器有不同的内定值,故请指明。

  • cellspacing="2"

    表格格线厚度,请看例子三,那是加厚到 5 的格线。

  • cellpadding="2"

    文字与格线的距离,请看例子四,那是加至 10 的 padding。

  • align="CENTER"

    表格的摆放位置(水平),可选值为: left, right, center,请看例子五或六,那表格 是放于中间的,为怕一些浏览器不支援,故特加上居中标记<CENTER>,只是多 层保证而己,当然只用<CENTER>亦可。

  • valign="TOP".

    表格内字画等的摆放贴 位置(垂直),可选值为: top, middle, bottom。

  • background="myweb.gif"

    表格 纸,与 bgcolor 不要同用。

  • bgcolor="#0000FF"

    表格底色,与 background 不要同用,请看例子六。

  • bordercolor="#FF00FF"

    表格边框颜色,NC 与 IE 有不同的效果,请看例子六。

  • bordercolorlight="#00FF00"

    表格边框向光部分的颜色,请看例子二。『只适用于 IE』

  • bordercolordark="#00FFFF"

    表格边框背光部分的颜色,请看例子二,使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。『只适用于 IE』

  • cols="2"

    表格栏位数目,只是让浏览器在下载表格是先画出整个表格而己。

<TR> 的参数设定(常用):

例如:<tr align="RIGHT" valign="MIDDLE" bgcolor="#0000FF" bordercolor="#FF00FF" bordercolorlight="#808080" bordercolordark="#FF0000">

  • align="RIGHT"

    该一列内字画等的摆放贴 位置(水平),可选值为: left, center, right。

  • valign="MIDDLE"

    该一列内字画等的摆放贴 位置(垂直),可选值为: top, middle, bottom。

  • bgcolor="#0000FF"

    该一列底色,请看例子五。

  • bordercolor="#FF00FF"

    该一列边框颜色,请看例子三。『只适用于 IE』

  • bordercolorlight="#808080"

    该一列边框向光部分的颜色,请看例子三。『只适用于 IE』

  • bordercolordark="#FF0000"

    该一列边框背光部分的颜色,请看例子三,使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。『只适用于 IE』

<TD> 的参数设定(常用):

例如:<td width="48%" height="400" colspan="5" rowspan="4" align="RIGHT" valign="BOTTOM" bgcolor="#FF00FF" bordercolor="#808080" bordercolorlight="#FF0000" bordercolordark="#00FF00" background="myweb.gif">

  • width="48%"

    该一储存格宽度,接受绝对值(如 80)及相对值(如 80%)。

  • height="400"

    该一储存格高度。

  • colspan="5"

    该一储存格向右打通的栏数。请看例子六

  • rowspan="4"

    该一储存格向下打通的列数。请看例子六

  • align="RIGHT"

    该一储存格内字画等的摆放贴 位置(水平),可选值为: left, center, right。

  • valign="BOTTOM"

    该一储存格内字画等的摆放贴 位置(垂直),可选值为: top, middle, bottom。

  • bgcolor="#FF00FF"

    该一储存格底色,请看例子四。

  • bordercolor="#808080"

    该一储存格边框颜色,请看例子三。『只适用于 IE』

  • bordercolorlight="#FF0000"

    该一储存格边框向光部分的颜色,请看例子三。『只适用于 IE』

  • bordercolordark="#00FF00"

    该一储存格边框背光部分的颜色,请看例子三,使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。『只适用于 IE』

  • background="myweb.gif"

    该一储存格 纸,与 bgcolor 任用其一。

例子一:

原始码<table width="60%" >

<tr><td>只有一个储存格(cell)的表格</td></tr>

</table>

显示结果
只有一个储存格(cell)的表格

例子二:

原始码<table width="60%" bordercolorlight="#FF00FF" bordercolordark="#FF0000">

<tr><td>第一列第一栏</td><td>第一列第二栏</td></tr>

</table>

显示结果
第一列第一栏第一列第二栏

例子三:

原始码<table width="60%" cellspacing="5">

<tr bordercolor="#0000FF">

<td>第一列第一栏</td>
<td>第一列第二栏</td>

</tr>

<tr bordercolorlight="#FF00FF" bordercolordark="#00FF00">

<td>第二列第一栏</td>
<td>第二列第二栏</td>

</tr>

</table>

显示结果
第一列第一栏第一列第二栏
第二列第一栏第二列第二栏

例子四:

原始码<table width="60%" cellpadding="10">

<tr>

<td bgcolor="#FFCCE6">第一列第一栏</td>
<td bgcolor="#FFFFC6">第一列第二栏</td>

</tr>

<tr>

<td bgcolor="#FFD9FF">第二列第一栏</td>
<td bgcolor="#DAB4B4">第二列第二栏</td>

</tr>

</table>

显示结果
第一列第一栏第一列第二栏
第二列第一栏第二列第二栏

例子五:

原始码<center>

<table width="60%" cellspacing="0" cellpadding="2" align="CENTER">

<tr>

<td bgcolor="#FFD2E9">第一列第一栏</td>
<td bgcolor="#FFDAB5">第一列第二栏</td>
<td bgcolor="#FFFFB5">第一列第三栏</td>

</tr>

<tr bgcolor="#C0C0C0">

<td>第二列第一栏</td>
<td>第二列第二栏</td>
<td>第二列第三栏</td>

</tr>

</table>

</center>

显示结果
第一列第一栏第一列第二栏第一列第三栏
第二列第一栏第二列第二栏第二列第三栏

例子六

原始码<center>

<table width="350" cellspacing="0" cellpadding="2" align="CENTER" bgcolor="#FFC4E1" bordercolor="#0000FF">

<tr>

<td>第一列第一栏</td>
<td colspan="2">第一列 之 第二栏及第三栏</td>

</tr>

<tr>

<td rowspan="2">第二列及第三列 之 第一栏</td>
<td>第二列第二栏</td>
<td>第二列第三栏</td>

</tr>

<tr>

<td>第三列第二栏</td>
<td>第三列第三栏</td>

</tr>

</table>

</center>

显示结果
第一列第一栏第一列 之 第二栏及第三栏
第二列及第三列 之 第一栏第二列第二栏第二列第三栏
第三列第二栏第三列第三栏

<TH> :

▲Top

<TH>与<TD>同样是标示一个储存格,唯一不同的是<TH>所标示的储存格中的文字是以粗 体出现,通常用于表格第一列以标示栏目。它的用法是取代<TD>的位置便可以,其参数 设定请参考<TD>。

当然若为<TD>所标示的储存格中的文字加上粗体标记<B>便等如<TH>的效果。

例子:

原始码<center>

<table width="350" cellspacing="0" cellpadding="2" align="CENTER">

<tr align="CENTER">

<th>Month</th><th>% of IE visitor</th><th>% of NC visitor</th>

</tr>

<tr align="CENTER">

<td>August</td><td>61%</td><td>39%</td>

</tr>

<tr align="CENTER">

<td>July</td><td>54%</td><td>46%</td>

</tr>

<tr align="CENTER">

<td>June</td><td>52%</td><td>48%</td>

</tr>

</table>

</center>

显示结果
Month% of IE visitor% of NC visitor
August61%39%
July54%46%
June52%48%

<CAPTION> :

▲Top

<CAPTION> 的作用是为表格标示一个标题列,有如在表格上方加上一没格线的打通列。 当然亦可置于下方,通常用以存放该表格的标题。

<CAPTION> 的参数设定(常用):

例如:<caption align="TOP" valign="TOP"></caption>

  • align="TOP"

    该表格标题列相对于表格的摆放贴 位置(水平),可选值为: left, center, right, top, middle, bottom,若 align="bottom" 的话标题列便会出现对表格的下方,不管你 的原始码中把 <caption> 放在 <table> 中的头部或尾部。

  • valign="TOP"

    该表格标题列相对于表格的摆放位置(上下),可选值为: top, bottom。和 align="TOP" 或 align="BOTTOM" 是一样的,虽然功能重复了,但如果你要标题列 置于下方及向右或向左贴 ,那末两个参数便可一 用了。当只 一个参数时, 请首选 align,因为 valign 是由 HTML 3.0 才开始的参数。

例子:

原始码<center>

<table width="350" cellspacing="0" cellpadding="2" align="CENTER">

<caption>网页速成 八月份访客浏览器使用分析</caption>

<tr align="CENTER">

<th>Month</th>
<th>% of IE visitor</th>
<th>% of NC visitor</th>

</tr>

<tr align="CENTER">

<td>August</td>
<td>61%</td>
<td>39%</td>

</tr>

</table>

</center>

显示结果
网页速成 八月份访客浏览器使用分析
Month% of IE visitor% of NC visitor
August61%39%

链接标记:

<a href="index.html" name="hello" target="_top"> target的4种属性: _self;_balank;_parent;_top

框架标记:

<frameset cols="50%,*">

<frame name="hello" src="up2u.html">
<frame name="hi" src="me2.html">

</frameset>

<iframe> 的参数设定如下:

例子: <iframe src="iframe.html" name="test" align="MIDDLE" width="300" height="100" marginwidth="1" marginheight="1" frame scrolling="Yes">

多媒体标记:

<BGSOUND>:

<BGSOUND> 是用以插入背景音乐,但只适用於 IE,其参数设定不多。如下

<BGSOUND src="your.mid" autostart=true loop=infinite>

  • src="your.mid"

    设定 midi 档案及路径,可以是相对或绝对。

  • autostart=true

    是否在音乐档传完之後,就自动播放音乐。true 是,false 否 (内定值)。

  • loop=infinite

    是否自动反覆播放。LOOP=2 表示重复两次,Infinite 表示重复多次。

<EMBED>:

<EMBED> 是用以插入各种多媒体,格式可以是 Midi、Wav、AIFF、AU 等等,Netscape 及 新版的 IE 都支援。其参数设定狻多。如下

<EMBED src="your.mid" autostart="true" loop="true" hidden="true">

  • src="your.mid"

    设定 midi 档案及路径,可以是相对或绝对。

  • autostart=true

    是否在音乐档传完之後,就自动播放音乐。true 是,false 否 (内定值)。

  • loop="true"

    是否自动反覆播放。LOOP=2 表示重复两次,true 是, false 否。

  • HIDDEN="true"

    是否完全隐藏控制画面,true 为是,no 为否 (内定)。

  • STARTTIME="分:秒"

    设定歌曲开始播放的时间。如 STARTTIME="00:30" 表示从第30秒处开始播放。

  • VOLUME="0-100"

    设定量的大小,数值是0到100之间。内定则为使用者系统本身之设定。

  • WIDTH="整数" 和 HIGH="整数"

    设定控制画面的宽度和高度。(若 HIDDEN="no")

  • ALIGN="center"

    设定控制画面和旁边文字的对 方式,其值可以是 top、bottom、center、baseline、 left、right、texttop、middle、absmiddle、absbottom。

  • CONTROLS="smallconsole"

    设定控制画面的外貌。预设值是 console。

    console 一般正常的面板   

    smallconsole 较小的面板   

    playbutton 只显示播放按钮   

    pausecutton 只显示暂停按钮   

    stopbutton 只显示停止按钮   

    volumelever 只显示音量调整钮

其他标记:

<MARQUEE>:

<MARQUEE> 只适用於 IE ,译为「跑马灯」如 Status Bar 的那种,意指走动或卷动的 文字,其参数设定狻多。我先举些例子,然後再列出各参数。

例子一:

原始码<marquee width=150>I\'m a small MARQUEE</marquee>
显示结果

I\'m a small MARQUEE

例子二:

原始码<marquee behavior=slide>This is a slide effect</marquee>
显示结果

This is a slide effect

例子三:

原始码<marquee behavior=alternate>撞来撞去,啊!我昏啦</marquee>
显示结果

撞来撞去,啊!我昏啦

例子四:

原始码<marquee scrolldelay=5 scrollamount=50>哗!!太快了,我又昏啦</marquee>
显示结果

哗!!太快了,我又昏啦

<marquee behavior="SCROLL" direction="LEFT" bgcolor="#0000FF" height="30" width="150" hspace="0" vspace="0" loop="INFINITE" scrollamount="30" scrolldelay="500">Hello</marquee>

  • behavior="SCROLL"

    决定文字的卷动方式,可选值为:

    SCROLL 一般卷动,是内定值。

    SLIDE 如幻灯片,一格格的,效果是文字一接触左边便全部消失。

    ALTERNATE 文字向左右两边撞来撞去。

  • direction="LEFT"

    设定文字的卷动方向,LEFT 表示向左,是内定值,RIGHT 表示向右。

  • bgcolor="#0000FF"

    设定文字卷动范围的背景颜色。

  • height="30" width="150"

    >设定文字卷动范围,可采用相对或绝对,如 30% 或 30 等,单位为像素。

  • hspace="0" vspace="0"

    设定文字的水平及垂直空白位置。

  • loop="INFINITE"

    设定文字卷动次数,其值可以是正整数或 INFINITE,INFINITE 是内定值,表示无 限次。

  • scrollamount="30"

    每「格」文字之间的间隔,单位是像素。

  • scrolldelay="500"

    文字卷动的停顿时间,单位是毫秒。

■ <BLINK> :

▲Top

<BLINK> 是令文字闪烁,只适用於 NC,用法直接,没有参数。看看例子便知:

例子:

原始码<blink>我是天上星,闪又闪</blink>
显示结果

我是天上星,闪又闪

■ <ISINDEX> :

▲Top

<ISINDEX> 可让某些 Web Server 找寻网页内的关键字,假如你的 Web Server 提供这样的 找寻功能,使用者的浏览器也支援这些找寻功能,那堋,载入网页时就会看到一个简单的 找寻方块。其用法直接,没有参数,本来是要放於 <HEAD> 标记内的,但把它放在 <BODY> 标记内亦不见有问题,请记住,3W 以反对此标记。

例子:

原始码<isindex>
显示结果

可以搜索该索引。请键入要搜索的关键字:

■ <META> :

▲Top

<META> 是放於 <HEAD> 与 </HEAD>之间的标记,功用与变化等对,所以我公式化地介 绍。
  • <meta name="Description" content="This is Chris\'s Home Page">

    该网页的描述,作用於寻找引擎的登录

  • <meta name="Keywords" content="Chris, Web, Music, photo">

    该网页的关键字,作用於寻找引擎的登录

  • <meta http-equiv="Expires" content="Tue, 09 Dec 1997 00:00:00 GMT">

    <meta http-equiv="Pragma" content="no-cache">

    以上行功能相同,都是要浏览器重新载入该页,不要使用快取档案,当然可以修 改该 Expire 时间。

  • <meta http-equiv="Content-Type" content="text/html; charset=big5">

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

    设定这是 HTML 文件及其编码语系,中文网页请使用 big5 那行,或者不设编码亦 可,纯英文网页建议使用 iso-8859-1。

  • <meta name="GENERATOR" content="Mozilla/4.04 [en] (Win95; I) [Netscape]">

    <meta name="GENERATOR" content="Microsoft FrontPage 3.0">

    这只表示该网页由甚堋编辑器写成。

  • <meta http-equiv="refresh" content="10; url=http://www.hkiwc.com">

    这一行较为实用,能於预定秒数内自动转到指定的网址。原始码中 10 表示 10秒。

■ <LINK> :

▲Top

<LINK> 用来将目前文件与其它 URL 作连结,但不会有连结按钮,用於 <HEAD> 标记间, 格式如下:

<link href="URL" rel="relationship">

<link href="URL" rev="relationship">

其用法我们会於 Style Sheet 一节详细介绍。

特殊字符 

只要你认识了 HTML 标记,你便会知道特殊字符的用处。
HTML 原始码显示结果描述
&lt;<小於号或显示标记
&gt;>大於号或显示标记
&amp;&可用於显示其它特殊字符
&quot;"引号
&reg;?己注册
&copy;?版权
&trade;?商标
&ensp;半方大的空白
&emsp;全方大的空白
&nbsp;不断行的空白

5、调色原理

  • 以命名方式定义常用的颜色,如 RED。
  • 以 RGB 值表示,如 #FF0000 表示 red。

命名方式涵括的色种不多亦不甚方便,较少采用,以下介绍 RGB 值的原理:

众所皆知颜色是由 "red" "green" "blue" 三原色组合而成的,在 HTML 中对於彩度的定义是 采十六进位的,对於三原色 HTML 分别给予两个十六进位去定义,也就是每个原色可有 256 种彩度,故此三原色可混合成一千六佰多万的颜色。

例如

白色的组成是 red=ff, green=ff, blue=ff, RGB 值即为 ffffff

红色的组成是 red=ff, green=00, blue=00, RGB 值即为 ff0000

绿色的组成是 red=00, green=ff, blue=00, RGB 值即为 00ff00

蓝色的组成是 red=00, green=00, blue=ff, RGB 值即为 0000ff

黑色的组成是 red=00, green=00, blue=00, RGB 值即为 000000

於应用时常在每个 RGB 值之前加上符号 # 以示分别,但不加亦可。

■ HTML 基本架构:

选按不同颜色按键以测试前景颜色效果 (只适合 Internet Explorer)
选按不同颜色按键以测试背景颜色效果
或输入一个 RGB 颜色码或名称

■ 16 常用颜色表:

ColorValueNameColorValueName
#00FFFFaqua#808080gray
#000080navy#C0C0C0silver
#000000black#008000green
#808000olive#008080teal
#0000FFblue#00FF00lime
#800080purple#FFFF00yellow
#FF00FFfuchsia#800000maroon
#FF0000red#FFFFFFwhite

■ 其它常用颜色表:

ColorValueNameColorValueName
#F0F8FFaliceblue#A00000antiquewith
#7FFFD4aquamarine#F0FFFFazure
#F5F5DCbeige#FFE4C4bisque
#000000black#FFEBCDblanchedalmond
#0000FFblue#8A2BE2blueviolet
#A52A2Abrown#DEB887burlywood
#5F9EA0cadetblue#7FFF00chartreuse
#D2691Echocolate#FF7F50coral
#C0F000cornfloewrblue#FFF8DCcornsilk
#00FFFFcyan#00008Bdarkblue
#008B8Bdarkcyan#B8860Bdarkgoldenrod
#A9A9A9darkgray#006400darkgreen
#DA0000darkhaki#8B008Bdarkmagenta
#556B2Fdarkolivegreen#DA000Edarkorenge
#9932CCdarkorchid#8B0000darkred
#E9967Adarksalmon#8FBC8Fdarkseagreen
#483D8Bdarkslateblue#2F4F4Fdarkslategray
#00CED1darkturquoise#9400D3darkviolet
#FF1493deeppink#00BFFFdeepskyblue
#696969dimgray#1E90FFdodgerblue
#B22222firebrick#FFFAF0floralwhite
#228B22forestgreen#DCDCDCgainsboro
#00000Egostwhite#FFD700gold
#00E00Dgolenrod#808080gray
#008000green#ADFF2Fgreenyellow
#F0FFF0honeydew#FF69B4hotpink
#CD5C5Cindianred#FFFFF0ivory
#F0E68Ckhaki#E6E6FAlavender
#FFF0F5lavenderblush#7CFC00lawngreen
#FFFACDlemonchiffon#ADD8E6lightblue
#F08080lightcoral#E0FFFFlightcyan
#0000E0lightgodenrod#0000E0lightgodenrodyellow
#0000A0lightgray#90EE90lightgreen
#FFB6C1lightpink#FFA07Alightsalmon
#20B2AAlightseagreen#87CEFAlightskyblue
#0000EBlightslateblue#778899lightslategray
#B0C4DElightsteelblue#FFFFE0lightyellow
#32CD32limegreen#FAF0E6linen
#FF00FFmagenta#800000maroon
#66CDAAmediumaquamarine#0000CDmediumblue
#BA55D3mediumorchid#ED0000mediumpurpul
#3CB371mediumseagreen#7B68EEmediumslateblue
#00FA9Amediumspringgreen#48D1CCmediumturquoise
#C71585mediumvioletred#191970midnightblue
#F5FFFAmintcream#FFE4E1mistyrose
#FFE4B5moccasin#FFDEADnavajowhite
#000080navy#A0B0E0navyblue
#FDF5E6oldlace#6B8E23olivedrab
#FFA500orange#0E0EEDorengered
#DA70D6orchid#A00D00palegodenrod
#98FB98palegreen#AFEEEEpaleturquoise
#DB7093palevioletred#FFEFD5papayawhip
#FFDAB9peachpuff#CD853Fperu
#FFC0CBpink#DDA0DDplum
#B0E0E6powderblue#800080purple
#FF0000red#BC8F8Frosybrown
#4169E1royalblue#8B4513saddlebrown
#FA8072salmon#F4A460sandybrown
#2E8B57seagreen#FFF5EEseashell
#A0522Dsienna#87CEEBskyblue
#6A5ACDslateblue#708090slategray
#FFFAFAsnow#00FF7Fspringgreen
#4682B4steelblue#D2B48Ctan
#D8BFD8thistle#FF6347tomato
#40E0D0turquoise#EE82EEviolet
#00E0EDvioletred#F5DEB3wheat
#000E00hite#F5F5F5whitesmoke
#FFFF00yellow#9ACD32yellowgreen