unescapeHtmlEntities 的实现非常简单，创建一个节点元素，然后将字符串写入这个元素的 innerHTML 属性，最后返回这个元素的文本内容。调用下面的函数时传参'>'，得到的结果将会是'>'

function unescapeHtmlEntities(str) {
var tempEle = document.createElement("div");
tempEle.innerHTML = str;
var result = tempEle.childNodes[0].nodeValue;
return result;
}

escapeHtmlEntities 的过程刚好相反，创建元素，插入文本节点，读出元素的 innerHTML 时，得到字符的 entity。调用下面的函数时传参'>'，得到的结果将会是'>'

function escapeHtmlEntities(str) {
var tempEle = document.createElement("div");
tempText = document.createTextNode(str);
tempEle.appendChild(tempText);
var result = tempEle.innerHTML;
return result;
}

alert(escapeHtmlEntities('>'));  // result : >

如果使用 jQuery，这个两个函数可以一句话搞定：

function unescapeHtmlEntities(str) {
    return $('<div />').html(str).text();
}

function escapeHtmlEntities(str){
    return $('<div />').text(str).html();
}

尽管如此，对于 html entities 的处理并不推荐在行为层中进行。事实上模板、后端语言更能更好地进行工作，例如 PHP 的 htmlentities :

下面这段代码使用IE可以识别html注释的特性，可以准确的判断IE浏览器的版本号，没有使用诸多怪异的测力检测方法，超级简洁。 原作者的代码地址在这里，我做了一点小改动，文中有注释，可以到这里运行测试。

/**
 * ie equals one of false|6|7|8|9 values, ie5 is fucked down.
 * Based on the method: https://gist.github.com/527683
 */
var ie = function () {
    var v = 4, //原作者的此处代码是3，考虑了IE5的情况，我改为4。
        div = document.createElement('div'),
        i = div.getElementsByTagName('i');
    do {
        div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->';
    } while (i[0]);
    return v > 5 ? v : false; //如果不是IE，之前返回undefined，现改为返回false。
}();

<div id="container">
  <div id="header">Header</div>
  <div id="wrapper">
    <div id="content">Content</div>
  </div>
  <div id="navigation">Navigation</div>
  <div id="extra">Extra stuff</div>
  <div id="footer">Footer</div>
</div>  

以三列流动布局为例，其 CSS 代码如下：

div#header{position:relative}
div#header h1{height:80px;line-height:80px;margin:0;
padding-left:10px;background: #EEE;color: #79B30B}
div#header a{position:absolute;right:0;top:23px}
div#content p{line-height:1.4}
div#navigation{background:#B9CAFF}
div#extra{background:#FF8539}
div#footer{background: #333;color: #FFF}
div#footer p{margin:0;padding:5px 10px}
div#footer a{display:inline;padding:0;color: #C6D5FD}

div#wrapper{float:left;width:100%}
div#content{margin-right: 50%}
div#navigation{float:left;width:25%;margin-left:-50%}
div#extra{float:left;width:25%;margin-left:-25%}
div#footer{clear:left;width:100%}

本例采用浮动加负 margin 的方法实现，在这套模板中，多采用这种方式。结构清晰，代码简洁，有很多值得学习与借鉴的地方。有兴趣的朋友可以猛点下面的链接，或者下载全套模板的 zip 包。

LayoutGala 打包下载

当打开 firebug (也包括 Chrome 等浏览器的自带调试工具)，window 下面会注册一个叫做 console 的对象，它提供多种方法向控制台输出信息，供开发人员调试使用。下面是这些方法的一个简单介绍，适时地运用它们，对于提高开发效率很有帮助。

console.log(object[, object, ...])

使用频率最高的一条语句：向控制台输出一条消息。支持 C 语言 printf 式的格式化输出。当然，也可以不使用格式化输出来达到同样的目的。下面两行代码执行的结果是相同的：

console.log("The %s jumped over %d tall buildings", animal, count);
console.log("The", animal, "jumped over", count, "tall buildings");

console.debug(object[, object, ...])

向控制台输出一条信息，它包括一个指向该行代码位置的超链接。

console.info(object[, object, ...])

向控制台输出一条信息，该信息包含一个表示“信息”的图标，和指向该行代码位置的超链接。

console.warn(object[, object, ...])

同 info。区别是图标与样式不同。

console.error(object[, object, ...])

同 info。区别是图标与样式不同。error 实际上和 throw new Error() 产生的效果相同，使用该语句时会向浏览器抛出一个 js 异常。

console.assert(expression[, object, ...])

断言，测试一条表达式是否为真，不为真时将抛出异常（断言失败）。

console.dir(object)

输出一个对象的全部属性（输出结果类似于 DOM 面板中的样式）。

console.dirxml(node)

输出一个 HTML 或者 XML 元素的结构树，点击结构树上面的节点进入到 HTML 面板。

console.trace()

输出 Javascript 执行时的堆栈追踪。

console.group(object[, object, ...])

输出消息的同时打开一个嵌套块，用以缩进输出的内容。调用 console.groupEnd() 用以结束这个块的输出。

console.groupCollapsed()

同 console.group(); 区别在于嵌套块默认是收起的。

console.time(name)

计时器，当调用 console.timeEnd(name);并传递相同的 name 为参数时，计时停止，并输出执行两条语句之间代码所消耗的时间（毫秒）。

console.profile([title])

与 profileEnd() 结合使用，用来做性能测试，与 console 面板上 profile 按钮的功能完全相同。

console.count([title])

输出该行代码被执行的次数，参数 title 将在输出时作为输出结果的前缀使用。

console.clear()

清空控制台

命令行

控制台的输出面板右边，是控制台的输入面板（Chrome 调试工具对应为下方），在这里除了可以运行常规的 javascript 代码，还内置了相当数量的命令行可以辅助我们的调试工作，下面是一些常用命令行的简单介绍：

$(id)

返回一个给定 id 的元素。

$$(selector)

返回给定的 css 选择器匹配到的一组元素。

$x(xpath)

返回给定的 XPath 表达式匹配到的一组元素。

$0

在 HTML 面板中选中的元素。

$1

上一次在 HTML 面板中选中的元素。

$n(index)

访问最近 5 个被选中过的元素，index 的范围： 0 - 4。

dir(object)

同 console.dir(object)。

dirxml(node)

同 console.dirxml(node)。

clear()

同 console.clear()。

inspect(object[, tabName])()

在合适的（或一个指定的） tab 中检视一个对象。

keys(object)

返回一个对象的所有属性的键。

values(object)

返回一个对象的所有属性的值。

debug(fn)

在函数第一行添加一个断点，使用 undebug(fn) 移除断点。

monitor(fn)

开启一个函数的调用日志，使用 unmonitor(fn) 关闭该功能。非常有用的一个命令，但是它似乎并没有很好地工作。

monitorEvents(object[, types])

开启一个元素的某个事件（或所有事件）被触发时的日志记录。用例如下：

monitorEvents($0,['click'])

上面的命令行被执行后，将开启当前在 HTML 面板中被选中元素的 click 事件监控，一旦这个元素的 click 事件被触发，事件对象将会在控制台输出。如果不指定第二个参数，将对所有事件进行记录。

profile([title])

同 console.profile([title])

参考资料

• Firebug wiki --- Command Line API
• Firebug wiki --- Console API

$.ajax({
	url : 'url.php',
	type : 'GET',
	data : {
		degree : 90,
		imageId : id
	},
	success : function(src){
		image.src = src;
	}
});

尽管可以在前端缓存每个已经旋转过的角度的图像地址，但是当旋转到新的角度时，仍然需要发出 Ajax 请求，用户需要一个等待的过程，服务器也需要对图像进行处理和存储，还要考虑才适当的时候删除掉这些“过程中”的图像，非常的麻烦。事实上，利用 canvas 就可以轻易的实现这样的功能，而对于不支持 canvas 的 IE ，则可以使用滤镜来达到同样的目的，对于这个操作而言，IE 的滤镜甚至较 canvas 更为简单。最重要的是，由于是纯前端的行为，用户几乎无需等待就可以看到效果，也没有建立任何 HTTP 请求，不会对服务器端产生任何影响。

下面我们就来一步步实现纯前端方式的图像旋转，首先是 IE，在 IE 中通过 BasicImage 滤镜 的 rotate 属性值来设置图像的旋转角度，根据微软的文档，这个值只能设置为 0、1、2、3，分别表示 0度，90度，180度和270度四个角度的旋转，假定我们已经获取到了图像对象为 image，旋转的角度为 degree，那么具体的代码就非常简单了：

image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+degree/90+')';

其他浏览器中的情况要稍微复杂一点，需要借助于 Canvas，使用其 rotate 方法旋转 Canvas，使用其 drawImage 方法在 Canvas 上绘制图像。rotate 方法非常简单，它接受一个参数，即旋转的弧度数，注意这里是弧度而不是角度，如果还记得高中数学的话，弧度与角度的转换公式应该并不陌生：

var radian = degree * Math.PI / 180;
/** 弧度 = 角度 * π / 180 **/

drawImage 方法的参数比较多，但我们这里指使用其中前三个参数：图像对象，绘制起点的 x 坐标，绘制起点的 y 坐标。在调用这些方法之前，我们需要为 img 元素 追加一个 canvas：

<img src="img_rotate.jpg" alt="football" id="rotate_demo" />
<canvas id="image_canvas"></canvas>

接下来在 JavaScript 中获取到这两个元素，然后使用刚才介绍的两个方法根据不同的角度对图像和 canvas 进行处理：

var image = document.getElementById("rotate_demo");
var canvas = document.getElementById("image_canvas");
var ctx = canvas.getContext('2d');
var width = image.width, height = image.height, x = 0, y = 0;
switch(degree){
     case 90:
          width = image.height;
          height = image.width;
          y = image.height * (-1);
          break;
     case 180:
          x = image.width * (-1);
          y = image.height * (-1);
          break;
     case 270:
          width = image.height;
          height = image.width;
          x = image.width * (-1);
          break;
}

canvas.setAttribute('width', width);
canvas.setAttribute('height', height);
ctx.rotate(degree * Math.PI / 180);
ctx.drawImage(image, x, y);
image.style.display = "none";

上面的代码看起来比较多，实际上核心方法只有刚才讲到的 rotate 和 drawImage，但是需要注意的，当画布旋转的时候，画布的宽高可能会发生反转，绘制的坐标也可能会反转，所以我们对 degree 进行了 switch ，具体处理在不同的角度下的反转情况，最后将原始图像隐藏，使用绘制好的 canvas 来显示。

纯前端旋转图像的主要过程就是这样的，剩下的问题是通过下面的函数来判断具体让浏览器使用 canvas 还是使用滤镜：

function supportCanvas(){
	return !!document.createElement('canvas').getContext;
}

将上面的代码套在一个函数中，并稍加改造，在外面加上一个按钮，即可循环旋转图像，下面是本文 Demo 的完整代码。html：

<p><input type="button" value="旋转" id="rorate_button"/></p>
<img src="img_rotate.jpg" alt="football" id="rotate_demo"/>
<canvas id="image_canvas"></canvas>

JavaScript：

// canvas 能力检测
var supportCanvas = !!document.createElement('canvas').getContext;

// 主函数
function imageRotate(degree,image,canvasId){
	if(!supportCanvas){
		image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+degree/90+')';
	}else{
		var canvas = document.getElementById(canvasId);
		var ctx = canvas.getContext('2d');
		var width = image.width, height = image.height, x = 0, y = 0;
		switch(degree){
		     case 90:
		          width = image.height;
		          height = image.width;
		          y = image.height * (-1);
		          break;
		     case 180:
		          x = image.width * (-1);
		          y = image.height * (-1);
		          break;
		     case 270:
		          width = image.height;
		          height = image.width;
		          x = image.width * (-1);
		          break;
		}
		canvas.setAttribute('width', width);
		canvas.setAttribute('height', height);
		ctx.rotate(degree * Math.PI / 180);
		ctx.drawImage(image, x, y);
		image.style.display = "none";
	}
}

// 初始角度与事件绑定
var degree = 0;
var image = document.getElementById("rotate_demo");
document.getElementById("rorate_button").onclick = function(){
	degree += 90;
	degree = degree === 360 ? 0 : degree;
	imageRotate(degree,image,'image_canvas');
};

参考资料：

• MSDN ---- Rotation Property
• MDC --- Using images

浏览器在加载外部脚本时，不会进行其他内容的加载和渲染工作，相当于此时浏览器处于一种“停滞”状态，直至该外部脚本完全加载，并执行完成。这样的设计具有其合理性和必须性，每一个脚本都有可能对页面元素进行操作，同时相互之间可能存在依赖性，最简单的例子如使用 jQuery 这样的库，基于 jQuery 的脚本必须在 jQuery 完全下载并执行完成建立 jQuery 对象后，其他的代码才有生效的可能。由此看来，脚本按顺序执行时必需的，但是没有更好的理由表示他们需要按顺序单个加载。这样的做法严重影响了页面的性能，当页面含有较多的外部脚本，可以非常明显的感觉到浏览器被脚本阻塞而处于这种”停滞“状态。下面的一些方法将帮助我们并行下载外部脚本。

1. 使用 Ajax 加载脚本

jQuery 的情况非常简单，只需要建立这个连接到脚本文件，当加载完成，代码便会执行。

    $.ajax({
        url : "a.js",
        type : "GET"
    });

原生 javascript 的情况稍微复杂一些，主要区别在于需要手动触发脚本。当然，在开始加载脚本之前，首先创建一个函数来获取通用的 xhr 对象：

	function getXhr() {
		xhr = false;
	    // branch for native XMLHttpRequest object
	    if(window.XMLHttpRequest && !(window.ActiveXObject)) {
	    	try {
				xhr = new XMLHttpRequest();
	        } catch(e) {
				xhr = false;
	        }
	    // branch for IE/Windows ActiveX version
	    } else if(window.ActiveXObject) {
	       	try {
	        	xhr = new ActiveXObject("Msxml2.XMLHTTP");
	      	} catch(e) {
	        	try {
	          		xhr = new ActiveXObject("Microsoft.XMLHTTP");
	        	} catch(e) {
	          		xhr = false;
	        	}
			}
	    }
		return xhr;
	}

在原生 javascript 中，第一种让脚本执行的办法是调用 eval() 函数：

	var xhr = getXhr();
	xhr.onreadystatechange = function(){
		if(xhr.readyState == 4 && xhr.status == 200){
			eval(xhr.responseText);    //执行代码
		}
	}
	xhr.open("GET","a.js",true);
	xhr.send(null);

另一个让脚本运行的方法是向页面追加元素：

	var xhr = getXhr();
	xhr.onreadystatechange = function(){
		if(xhr.readyState == 4 && xhr.status == 200){
			var script = document.createElement("script");
			var head = document.getElementsByTagName("head")[0];
			script.text = xhr.responseText;
			head.appendChild(script);
		}
	}
	xhr.open("GET","a.js",true);
	xhr.send(null);

无论是使用 jQuery，还是原生 javascript 两种方法（eval 和 追加 script 元素）中的任何一种，由于 Ajax 的同源策略，脚本只能从当前域中获取。

2. 向页面添加带 scr 属性的 script 元素

这种方法看似和直接在页面引用 script 类似，但是一个微小的区别是，使用这种方法加载脚本，不会阻塞浏览器加载和渲染其他内容，这正是我们需要的。

	var script = document.createElement("script");
	var head = document.getElementsByTagName("head")[0];
	script.src = "a.js";
	head.appendChild(script);

脚本加载完成后自动运行，获取跨域的脚本在这种方法中是被允许的。

3. script 的 defer 属性

defer 是 HTML4 中定义的 script 标签的一个属性，当浏览器检查到 script 中包含 defer 属性，这意味着告诉了浏览器，这个脚本是安全的，它不会对其他脚本造成影响，那么浏览器会并行下载该脚本，这个属性在 W3C School中文版的解释如下：

如果您的脚本不会改变文档的内容，可将 defer 属性加入到 <script> 标签中，
以便加快处理文档的速度。因为浏览器知道它将能够安全地读取文档的剩余部分而不用执行脚本，
它将推迟对脚本的解释，直到文档已经显示给用户为止。

defer 是所有方法中最简便的，但是遗憾的是，只有 IE 支持这一属性。

    <script type="text/javascript" src="a.js" defer="defer"></script>

Note: IE 8 是最早支持脚本并行下载的浏览器，之后 Firefox 等浏览器在新版本中也开始进行支持，到目前为止，较新版本的浏览器都是并行加载外部脚本文件，而无需进行额外的处理。本文中的方法则适用于所有的浏览器，当然也包括 IE6 和 IE7，同时，这些方法也适用于动态加载 js 的需要。

1. 合理使用 CSS Sprite 和 DataURI

CSS Sprite 相信大家已经非常熟悉了，把 CSS 中用作背景的图片拼合成一张图，然后通过 background-position 来设定显示的具体位置。这种手法对于减少 HTTP 请求数非常地见效，但是并不是所有的图片都适合做成 Sprite，例如一个需要平铺的背景。另外，CSS Sprite 的另一个问题是难以维护与更新，试想修改一堆小图拼成的大图，肯定比修改单个小图片费劲得多，所以在拼合成大图前，精心的设计是不可缺少的一个环节。DataURI是一种将小文件嵌入文档的方案，一个例子如下：

    body {
            background: url(data:image/gif;base64,gif图片编码);
    }

DataURI 的主要目的同样是为了减少 HTTP 请求数量，但事实上使用这项技术需要非常的谨慎，DataURI 有足够的缺点让开发者放弃它，首先，浏览器需要较普通图片数倍数十倍的开销将编码转成图片并呈现出来；其次，编码的图片无法被重复使用，这意味着在一个页面中，想要多次使用该图片，就需要将编码多次copy；最后，上面的方式对于 IE6/7 并不适用，为了全面兼容，需要为他们添加 Hack，这意味着需要双倍的代码量，真是得不偿失。

2. 压缩 CSS 与使用简码书写 CSS

这两个技巧的目的在于使 CSS 文件变得更小。压缩 CSS 是去掉对开发人员有用而对浏览器无用的空格符，甚至是换行符，对于此项工作，推荐使用 YUI 的 Compressor，这是一个命令行模式的 JAVA 小程序，适合于将其添加到你的自动部署流程中。它的使用非常的简单，下面的一行命令行将压缩 a.css 并输出到 a.min.css

    java -jar yuicompressor.jar a.css -o a.min.css

事实上 YUI compressor 真正强大的地方在于对 javascript 的压缩，有兴趣的朋友可以去看看文档。下面这张图片展示了压缩前的 a.css 和压缩后的 a.min.css 的对比，可以看到，YUI compressor 去掉了所有不需要的空格符和换行符，压缩率约为 37%（视情况而定）

有的朋友可能因为种种原因，并不具备自动化部署的条件，那么使用 YUI compressor 可能就稍显麻烦了，这种情况推荐使用前面说到的 Page Speed，如果你的 CSS 文件未经压缩，Page Speed 将会在 minify css 项给出一个红色的警告，展开选项，可以看到 Google 已经为你准备好了压缩版本，可以选择查看或者另存，非常的方便。（如下图）

关于 CSS 简码的书写，则非常简单了，非常多的属性都可以使用简写来表示，如果这种写法成为习惯，你会发现减小 CSS 文件大小是多么顺其自然的事:

    body {
        background:url(images/bg.png) repeat #369 center center;
        padding:5px 10px;
        margin:5px 10px;
        font:bold 18px Arial;
        border:1px solid #ccc;
    }

3. 使用效率更高的选择器

很多开发者都有 HTML 洁癖，甚至不愿意给元素标记更多的 id 或 class，但这带来的副作用就是在 css 中使用的选择器过于复杂：

    #nav li a {...}
    #footerWrapper #footer .column p {...}
    ul > li > a {...}
    form#login {...}

上面的例子都是效率比较低下的选择器，大量使用低效选择器将会对页面渲染造成性能影响。事实上，Google 推荐我们使用更为简洁的选择器，用 id 或 class 直接指向元素，后代选择器当然是非常好用的，但是最好不要超过2层。如果你使用的选择器有不合乎 Google 推荐的情况，在 Page Speed 中会有具体的提示，展开 Use efficient CSS selectors 项，每一个低效的选择器都被按严重程度罗列出来。

4. 避免使用滤镜和表达式

这一条是仅针对 IE 而言，IE 浏览器可以解释 CSS 中的 filter 和 expression ，尽管它们在有的时候非常有用，但是副作用也是不得不考虑的。例如，当我们使用 filter 引用一个透明 png 图片时，这个图片的加载会阻塞浏览器，此时浏览器不会做其他任何操作，包括加载其他资源和渲染页面；另外，当这个 png 图片被加载之后，无法像其他图片一样被缓存，这意味着每次页面的刷新都会重新请求并下载该图片。而使用 expression 会大大降低渲染页面的效率也是众所周知的事情。最后多说一句， expression 对于 IE8 来说，只在兼容模式(compatibility mode)下有效。

使用图像替换

这是一种最为常见的方式，我们常常把设计图中自定义字体的部分切成图片，然后在页面中引用该图片，或者在 CSS 中通过背景图的方式，将图片嵌入到某个元素中。

h1{
    width : 200px;
    height : 50px;
    background : url(logo.png) no-repeat;
}

这种方式非常快速简单，并且具有很好的浏览器兼容性，但是它的缺点也非常突出，它无法被重用，难以维护，当图像使用得过多时，还会严重地影响到页面的加载速度。

@font-face

@font-face 是 W3C CSS Fonts Module的一部分，它允许开发者在页面中使用自定义字体，而无论用户的计算机中是否已安装了这种字体。定义和使用一个字体的语法非常简单：

@font-face {  
	font-family : dolmen;  
	src : local("dolmen"), 
	url(dolmen.ttf); 
}
body{
    font-family : dolmen
}

font-family : 定义一个字体名字，以便在以后使用。
src : 使用 url 定义字体文件的远程路径，或者使用 local 定义用户计算机中的字体名。

下面一行文本就是使用这种技术的例子：

Hello @font-face

@font-face 在所有的现代浏览器中都得到了支持，微软甚至早在 IE 4 的时代就开始使用这项技术，但是不同的浏览器支持的字体类型却有所差异，IE 之外的浏览器都支持 TrueType 和 OpenType 字体类型，而 IE 则只支持 Embedded OpenType 类型，所以上面的例子在 IE 中不会有任何特别的地方。从 Firefox 3.6 开始，新增加了对 WOFF 字体的支持。

sIFR

sIFR是非常有名的一款字体替换组件，它使用 Flash 来替换页面上的文本，并通过 JavaScript 来控制。下面是一段使用 sIFR 定义字体，并使用自定义字体替换页面中 H1 元素文本的示例代码：

var cochin = {
  src: 'cochin.swf'
};

sIFR.activate(cochin);

sIFR.replace(cochin, {
  selector: 'h1'
});

众所周知的，Flash 对浏览器的开销非常惊人，尽管 sIFR 的开发人员已经尽可能地优化导出的 Flash，但是仍然不推荐使用这种技术在页面中替换太多的内容，通常替换 5 个以内的标题被认为是合理的，超出这个范围，页面性能大幅下降，可能让用户难以忍受。

Typeface.js

虽然名声远远不如 sIFR ，但是 Typeface似乎有更好的前景，它不再使用 Flash，而是采用 JavaScript 绘制矢量图形的方式来替换文本。它的使用同样简单：

<script src="typeface-0.14.js"></script>
<script src="helvetiker_regular.typeface.js"></script>

<div class="typeface-js" style="font-family: Helvetiker">
	Text here in Helvetiker font...
</div>

Typeface.js 广泛地支持各种浏览器，并且在性能上更加出色，但是在 IE 6/7 中，矢量图形的绘制性能比较差，使用 Typeface.js 时，仍然需要有所节制。

SVG颜色关键词

W3C定义了一组SVG的颜色列表，同样是 CSS 颜色模块所指定的颜色，他们是一些指向特定颜色的单词，例如常见的 white, black ,red 等等。下面是其中的一部分，鼠标移动到这些色块上面，将会呈现出它们所对应的名称。

                                                                              !!                                                                                        !!                                           !!                                                                      !!    !!                                                                                                                !!                              

事实上我个人更倾向于在某些时候使用颜色关键词来代码颜色编码，原因在于关键词更适合于人类阅读。在W3C Color Module详细地罗列了所有的颜色关键词，以及它们所分别对应的十六进位和十进位编码。他们有很好的浏览器兼容性，唯一值得注意的是，灰色在 IE8 之前的版本中使用的是 gray 表示，所以与灰色相关的颜色关键词在 IE6/7 稍有不同，它们在上面色块中以两个惊叹号标识出来。

currentColor 关键字

currentColor 用来表示与当前元素的 color 属性相同的值，当然这个 color 属性可以使被继承下来的，下面是一个例子：

	<div style=" color : darkred " >
		I'm dark red.
		<div style=" border-top:3px solid currentcolor; ">
			My border top is dark red, too.
		</div>
	</div>

transparent 关键字

使用 transparent 表示完全透明，在 CSS1 中，它只能在 background 属性中使用，CSS2中，添加到了 border 属性，而在 CSS3 中，transparent 能够在任何可以写颜色的属性中被使用。

使用 RGB 色彩模式

以 RGB 标记颜色，即描述一个颜色中红色R，绿色G，蓝色B 的强度值。当使用这种模式表示颜色时，有以下2种方式可选：
1. 十六进制标记法
2.函数式标记法

当使用十六进制标记法的时候，可以采用简写的方式，同时该方法对大小写不敏感，下面的几个例子定义的都是完全相同的颜色。

element {
     color : #f03;
     color : #F03;
     color : #ff0033;
     color : #FF0033;
}

在函数式标记法中，可以使用十进制整数或者百分比来表示，但是主要注意的是，两者不能混用，例如在用百分比表示一组颜色，那么请使用0%来代替0

element {
    color : rgb(255,0,51);
    color : rgb(255, 0, 51);
    color : rgb(100%, 0%, 20%);
    color : rgb(100%, 0, 20%);  /* 错误的写法，整数和百分比方式不能混用*/
}

RGBa

RGBa 是扩展了 alpha 通道，即扩展了透明度的 RGB 色彩模式，其中的 a 定义了该颜色的透明度。下面的代码标记了一个元素的 color 属性为透明度是 10 的红色。

element {
     color : rgba(255,0,0,0.1);
}

使用 HSL 色彩模式

HSL 是完全不同于 RGB 的色彩模式，H -> hue, S -> saturation, L -> lum 分别描述的一个颜色的色调，饱和度，明度，正因为如此，HSL 与 RGB 相比，它的优势在于，人们可以大致的猜测这个颜色的情况。H 代表了一个色环上的一个角度，这个色环从红色开始，最后再回到红色，所以 0 和 360 都代表了红色，而 S 和 L 都是用百分比来表示，这不难理解。

element {
     hsl(30, 100%,50%);
}

HSLa

与 RGBa 相同，HSLa 是在 HSL 模式上扩展了对透明度的支持。

element {
    hsla(240,100%,50%, 0.4);
}

浏览器兼容性

到目前为止，你也许发现了，上面所列举的一些内容在实施到某些浏览器中不会产生任何效果。事实上，关于色彩这一模块，在不同的浏览器中存在着较大的差异，特别是 IE 家族。下面的表格列举了不同的值在不同浏览器（核心）与不同版本的兼容情况。

[*] IE 7-8 的 transparent 属性只能被应用于 background 和 border 属性

更多资料：W3C --- CSS Color Module Level 3

首先有必要来回顾一下我们已经熟悉的有关 History 的操作，它们主要包括：back(), forward(), and go(index) 这三个方法。

退回到上一个页面：

    window.history.back();

前进到下一个页面：

    window.history.forward();

以当前页面为基准，向前、向后跳转：

    window.history.go(1);

另外，History 对象的 length 属性，保存了当前历史记录的条数：

    window.history.length;

pushState 和 replaceState

在 W3C 的 History 接口规范中，新引入了 pushState 和 replaceState 方法，这两个方法，使得向历史记录主动添加和修改条目成为了现实。pushState 用于向 history 添加当前页面的记录，而 replaceState 和 pushState 的用法完全一样，唯一的区别就是它用于修改当前页面在 history 中的记录，所以在详细的了解 pushState 方法后，将不再赘述关于 replaceState 的具体情况。

pushState 接受三个参数，它们分别是，一个 state 对象，标题，以及 URL ，其中 URL 为可选参数，标题暂时被浏览器忽略而未作处理，为防止今后浏览器做出修改，将标题传递为空字符串是安全的做法。这里的 state 是一个 JavaScript 对象，它用以存储关于你所要插入到历史记录的条目的相关信息。事实上，在 Firefox4 中，该对象的大小被限制在 640k 之内，如果需要存储更多的数据，请使用 sessionStorage 或者 localStorage

    var stateObj = {
        user : "Peter",
        age : 30
    };
    history.pushState(stateObj, "", "sample.html");

点击下面这个按钮，将向 history 插入当前页面的记录，注意此时地址栏和后退按钮的变化。

PS.值得注意的是，pushState 所带来地址栏的变化，不会触发 hash 的跳转效果，哪怕是新的地址仅仅是在旧的地址后面追加了 hash 值。另外，参数 url 可以是任何地址，外部的，甚至是不存在的，浏览器不会在 push 的时候去检查这个链接，它所做的仅仅是将这个地址添加到历史记录中。