据称由于 HTML5 没有修改专属的颜色,HTML4 的颜色都可以在 HTML5 中正确显示。
出自 HTML4 规范的可用颜色字符串值列表如下,此表来源是 http://www.lovean.com/view-3-132910-0.html , 我把原表中的“石灰色”修改成了“青柠色”,因为这更符合该颜色的原意(原表中把lime翻译成石灰色不知怎么回事)。另外原表是图片格式的,不方便拷贝,下表是文本格式的,可以直接拷贝使用。
序号 | 汉字名称 | 英语名称 | 十六进制颜色值 |
1 | 黑色 | black | #000000 |
2 | 绿色 | green | #008000 |
3 | 银色 | silver | #c0c0c0 |
4 | 青柠色 | lime | #00ff00 |
5 | 灰色 | gray | #808080 |
6 | 白色 | white | #ffffff |
7 | 黄色 | yellow | #ffff00 |
8 | 栗色 | maroon | #800000 |
9 | 海蓝色 | navy | #000080 |
10 | 红色 | red | #ff0000 |
11 | 蓝色 | blue | #0000ff |
12 | 紫色 | purple | #800080 |
13 | 蓝深绿色 | teal | #008080 |
14 | 紫红色 | fuchsia | #ff00ff |
15 | 浅蓝绿色 | aqua | #00ffff |
因为网络文章不是那么可信,有必要自己验证一下,于是我将这些颜色在Canvas里显示了一下,确定没有问题,显示效果如下:
显示这些颜色的代码如下:
<!DOCTYPE html><html lang="utf-8"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><head> ????<title>出自 HTML4 规范的可用颜色字符串值列表</title> ???</head> ????<body onload="draw()"> ???????<canvas id="myCanvus" width="240px" height="470px" style="border:1px dashed black;"> ???????????出现文字表示你的浏览器不支持HTML5 ???????</canvas> ????</body></html><script type="text/javascript"><!--function draw(){ ???????var canvas=document.getElementById(‘myCanvus‘); ???????canvas.height=470; ???????canvas.width=240; ???????var context=canvas.getContext(‘2d‘); ????????context.fillStyle = "#88aacc"; ???????context.fillRect(0, 0, canvas.width, canvas.height); ???????var colors=[ ???????????{‘title‘:‘黑色‘, ????‘name‘:‘black‘,‘hex‘:‘#000000‘}, ???????????{‘title‘:‘绿色‘, ????‘name‘:‘green‘,‘hex‘:‘#008000‘}, ???????????{‘title‘:‘银色‘, ????‘name‘:‘silver‘,‘hex‘:‘#c0c0c0‘}, ???????????{‘title‘:‘青柠色‘, ‘name‘:‘lime‘,‘hex‘:‘#00ff00‘}, ???????????{‘title‘:‘灰色‘, ????‘name‘:‘gray‘,‘hex‘:‘#808080‘}, ???????????{‘title‘:‘白色‘, ????‘name‘:‘white‘,‘hex‘:‘#ffffff‘}, ???????????{‘title‘:‘黄色‘, ????‘name‘:‘yellow‘,‘hex‘:‘#ffff00‘}, ???????????{‘title‘:‘栗色‘, ????‘name‘:‘maroon‘,‘hex‘:‘#800000‘}, ???????????{‘title‘:‘海蓝色‘, ‘name‘:‘navy‘,‘hex‘:‘#000080‘}, ???????????{‘title‘:‘红色‘, ????‘name‘:‘red‘,‘hex‘:‘#ff0000‘}, ???????????{‘title‘:‘蓝色‘, ????‘name‘:‘blue‘,‘hex‘:‘#0000ff‘}, ???????????{‘title‘:‘紫色‘, ????‘name‘:‘purple‘,‘hex‘:‘#800080‘}, ???????????{‘title‘:‘蓝深绿色‘,‘name‘:‘teal‘,‘hex‘:‘#008080‘}, ???????????{‘title‘:‘紫红色‘, ?‘name‘:‘fuchsia‘,‘hex‘:‘#ff00ff‘}, ???????????{‘title‘:‘浅蓝绿色‘, ‘name‘:‘aqua‘,‘hex‘:‘#00ffff‘}, ??????]; ???????var x=10; ???????var y=0; ???????// 遍历JSON ??????for(var i=0; i<colors.length; i++) ???????{ ?????????????y+=30; ???????????var color=colors[i]; ???????????//alert(color.title+" -" + color.name+" -" + color.hex) ?????????????context.font="bold 16px 宋体"; ???????????context.fillStyle=color.name; ???????????context.fillText(color.title+"," + color.name+" ," + color.hex ,x,y); ?????} };//--></script>
2017年9月5日09:02:35
出自 HTML4 规范的可用颜色字符串值列表
原文地址:http://www.cnblogs.com/xiandedanteng/p/7476701.html