据称由于 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 规范的可用颜色字符串值列表(常用颜色名称及对应的十六进制值)的更多相关文章

  1. python3 字符串与列表常用功能

    一.字符串常用功能 1. capitalize(),将字符串的首字母变成大写,其余全部置为小写:如果字符串中有多个单词,也只是将第一个单词的首字母置为大写:例: >>> name = ...

  2. python 数字、字符串、列表常用函数

    一.数字的标准类型: cmp():比较两个数的大小:返回值(-1,0,1). str():数字转化成字符串. type():返回数字类型. 转换工厂函数: int(obj,base=10) long( ...

  3. XmlException: 名称不能以“<”字符(十六进制值 0x3C)开头

    svn 版本冲突引起的: 产看config 文件里面的内容是否冲突,这个问题可能和代码无关

  4. [Swift通天遁地]五、高级扩展-(10)整形、浮点、数组、字典、字符串、点、颜色、图像类的实用扩展

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  5. 将十六进制的颜色字符串转为UIColor

    扩展UIColor,将十六进制的颜色字符串转成UIColor对象. extension UIColor { static func colorWithHexString(hex:String) -&g ...

  6. 常用icon以及color颜色RGB值和对应颜色效果图

    Android谷歌官方扁平化设计常用icon集合   Android谷歌官方扁平化设计color颜色RGB值和对应颜色效果图.

  7. 【转】YUV值对应的颜色

    版权声明:本文为博主原创文章,未经博主允许不得转载.欢迎大家积极评论,博主会一一答复! 最近有人在网上问我,YUV的值对应的颜色是如何的 下面给出YUV值对应的颜色关系 256张图512x512,每张 ...

  8. .net MVC 使用 JSON JavaScriptSerializer 进行序列化或反序列化时出错,字符串的长度超过了为 maxJsonLength 属性设置的值

    在.net mvc的controller中,方法返回JsonResult,一般我们这么写: [HttpPost] public JsonResult QueryFeature(string url, ...

  9. C# GetValueList 获得字符串中开始和结束字符串中间得值列表

    /// <summary> /// 获得字符串中开始和结束字符串中间得值列表 /// </summary> /// <param name="styleCont ...

随机推荐

  1. Linux 的日常 tools

    Linux基础命令里的就不再赘述了. Table of Contents 一.下载(命令行工具,只给出常用的命令说明) wget/cURL(一般系统自带) aria2/axel多线程下载 1. ari ...

  2. Spring MVC请求到处理方法注解配置的几种方式

    @RequestMapping 这个是最常用的注解,可以配置在类上,也可以配置在方法上,两个一起作用组成方法能够响应的请求路径,举例如下 package org.zln.myWeb.controlle ...

  3. BZOJ 1564 :[NOI2009]二叉查找树(树型DP)

    二叉查找树 [题目描述] 已知一棵特殊的二叉查找树.根据定义,该二叉查找树中每个结点的数据值都比它左儿子结点的数据值大,而比它右儿子结点的数据值小. 另一方面,这棵查找树中每个结点都有一个权值,每个结 ...

  4. 编程风格——代码中特殊的注释技术——TODO、FIXME和XXX的用处

    代码中特殊的注释技术——TODO.FIXME和XXX的用处 前言:今天在阅读Qt Creator的源代码时,发现一些注释中有FIXME英文单词,用英文词典居然查不到其意义!实际上,在阅读一些开源代码时 ...

  5. xtrabackup安装使用说明

    软件介绍: Percona XtraBackup是一块开源且免费的对MySQL Innodb存储引擎备份数据的工具,使用此工具的时候不需停止MySQL,而且支持压缩备份,支持对Innodb存储引擎做增 ...

  6. Java众神之路(4)-关键字(下)

    21.float float是Java原始类型. float变量可以存储单精度浮点值. 示例: float ratio = 0.1f; float diameter = 6.15f; 注释: 使用此关 ...

  7. Java简明教程 12.多线程(multithreading)

    单线程和多线程 关于它们的区别,zhihu上有一个回答,我认为十分不错,如下: . 单进程单线程:一个人在一个桌子上吃菜. . 单进程多线程:多个人在同一个桌子上一起吃菜. . 多进程单线程:多个人每 ...

  8. 【12】react 之 redux(1)

    TodoList小demo 效果展示 项目地址 (单向)数据流 数据流是我们的行为与响应的抽象:使用数据流能帮我们明确了行为对应的响应,这和react的状态可预测的思想是不谋而合的. 常见的数据流框架 ...

  9. 洛谷P1966 火柴排队[NOIP提高组2013]

    我确信我应该是做过这道题……就当再写一遍好了. 贪心思想,一番证明得出a和b数组中最小对最小,次小对次小……时解最优.那么先处理出a,b之间的对应关系,然后按照该关系求a或者b的逆序对数量就是答案 / ...

  10. UIImage与Base64相互转换

    UIImage与Base64相互转换 采用第三方类 Address:https://github.com/l4u/NSData-Base64/ 经测试好用. 2013-07-17