在设置颜色时有多种方法：
采用颜色的英文单词 比如 red 指红色
采用#号，后面跟6位的16进制数字，比如：#ff0000 表示红色 每个数字的取值为0~9，a~f（a表示10，f表示15）。当第1~2位、第3~4位、第5~6位的数字分别相同时，可以缩写为3位，如 #ff0000可以缩写为 #f00， #3399ff可以缩写为#39f。对于#3699ff此类不满足条件的颜色值则不能缩写
采用rgb数值表示法，比如 rgb(255, 0, 0)表示红色，三个数字分别表示红、绿、蓝，取值范围为0~255
采用rgba数值表示法，比如rgba(255, 0, 0, 0.5)表示50%透明度的红色，最后一个数字表示透明度，取值为0~1之间的小数，0表示全透明，1表示不透明。
HTML5 简单的颜色选取器
<!DOCTYPE html><html lang="zh">
<head>
<meta charset="gbk" />
<title>Canvas Example 4 (Detecting Colors)</title>
<script>
window.onload = function () {
//获取页面DOM元素
var preview = document.getElementById('preview')
var r = document.getElementById('r')
var g = document.getElementById('g')
var b = document.getElementById('b')
var a = document.getElementById('a')
var mx = document.getElementById('mx')
var my = document.getElementById('my')
var canvas = document.getElementById('myCanvas')
//绑定鼠标移动事件
canvas.addEventListener('mousemove', move, false)
var c = canvas.getContext('2d')
var building = new Image()
building.src = "cinema.png"//加载图片
building.onload=draw
function draw () {
c.drawImage(building, 0, 0, canvas.width, canvas.height)
}
function move (e) {
//在页面显示鼠标相对于窗口的坐标
mx.innerHTML = e.clientX
my.innerHTML = e.clientY
//获取图像数据
var img = c.getImageData(e.clientX, e.clientY, 1, 1)
var idata = img.data
//获取像素值
var red = idata[0]
var green = idata[1]
var blue = idata[2]
var alpha = idata[3]
//在页面显示像素的R，G，B，A值
r.innerHTML = red
g.innerHTML = green
b.innerHTML = blue
a.innerHTML = (alpha > 0) ? alpha : 'Transparent'
preview.style.backgroundColor = 'rgba(' + red + ', ' + green + ', ' + blue + ', ' + alpha + ')'
}
}
</script>
<style type="text/css" media="screen">
body { margin: 0px padding: 0px }
canvas {
border: 1px solid black
float: left
}
ul {
list-style: none
margin: 10px 10px 10px 10px
padding: 0px
float: left
}
ul li { font-weight: bold }
ul li span { font-weight: normal }
ul li #preview { width: 50px height: 50px border: 1px solid black }
</style>
</head>
<body>
<canvas id="myCanvas" width="300" height="300">
Your browser doesn't include support for the canvas tag.
</canvas>
<ul>
<li><div id="preview"></div></li>
<li>Red: <span id="r">NULL</span></li>
<li>Green: <span id="g">NULL</span></li>
<li>Blue: <span id="b">NULL</span></li>
<li>Alpha: <span id="a">NULL</span></li>
<li>Mouse X: <span id="mx">NULL</span></li>
<li>Mouse Y: <span id="my">NULL</span></li>
</ul>
</body>
</html>
1、定义要设置的文字范围，并用span标签包围
2、编写span的class，定义color属性。
html代码如下：
<p>这是一个测试 <span class="redText">颜色</span>的例子</p>
css编写如下：
.redText
{
color: red
}
html5和html的区别
1.HTML和HTML5都是HTML，只不过通常我们说的HTML只的是HTML4.0版本或者之前的版本，而HTML5是w3c发布的最新的HTML版本，也就是说HTML和HTML5是HTML的不同版本。
2.首先介绍一下HTML是什么，HTML的专业定义是超文本标记语言，所谓的超文本就是不只是文本，还有图片、音频、视频等等都是可以的标记的，HTML语言是浏览器执行的，用于告诉浏览器要显示什么和如何显示，通俗的讲就是告诉浏览器以什么样的板式样式来显示我们的超文本内容，我们平时的网页就是HTML结合一些其他的语言制作的。
3.HTML5的设计目的是为了在移动设备上支持多媒体。新的语法特征被引进以支持这一点，如video、audio和canvas 标记。HTML5还引进了新的功能，可以真正改变用户与文档的交互方式。
4.html5除了更加适合开发移动端还有很多新的特性如：
5.语义特性，HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa的，微数据与微格式等方面的支持，构建对程序、对用户都更有价值的数据驱动的Web。
6.本地存储特性，基于HTML5开发的网页APP拥有更短的启动时间，更快的联网速度，这些全得益于HTML5 APP Cache，以及本地存储功能。Indexed DB（html5本地存储最重要的技术之一）和API说明文档。
7.设备兼容特性 ，HTML5为网页应用开发者们提供了更多功能上的优化选择，带来了更多体验功能的优势。HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连，例如视频影音可直接与microphones及摄像头相联。
8.三维、图形及特效特性，基于SVG、Canvas、WebGL及CSS3的3D功能，用户会惊叹于在浏览器中，所呈现的惊人视觉效果。
9.CSS3特性，在不牺牲性能和语义结构的前提下，CSS3中提供了更多的风格和更强的效果。此外，较之以前的Web排版，Web的开放字体格式（WOFF）也提供了更高的灵活性和控制性。等等。
