地址栏运行HTML代码

如data:text/html,

hello,world!

页面会正常显示hello.world! ( ie内核浏览器除外).

针对这一功能我们可以实现更强大的效果,利用HTML5新属性contenteditable ,

这个属性表示内容可编辑,如地址栏运行data:text/html,后浏览器变成了一个简单的编辑器,和Windows自带记事本效果差不多.

contenteditable 

打开任意网页在console中执行document.body.contentEditable="true" 可以让整个网页内容可编辑,可以任意编辑页面上的内容.

实时编辑CSS

将style标签放在body中,通过设置style标签的display:block样式可以让页面的style标签显示出来，并且加上contentEditable属性后可以让样式成为可编辑状态，更改后的样式效果也是实时更新呈现的。此技巧在IE下无效。如:

在浏览器中打开页面能够看到body { color: blue; },并且可以编辑,且更改之后能实时看到效果,如吧blue换成red ,body { color: red; }这段文字也会变成红色.

固定元素长宽比不受分辨率变化的影响

元素不设置高度设置的padding和margin的top和bottom设置百分比时百分比是参照元素的宽度而不是高度所以当宽度变化时能够让元素长宽比不变,给这种元素添加子元素时需要定位.

JS不声明第三变量的值交换

正常情况下js要交换两个变量的值需要 声明第三个变量来暂存,而不声明第三个变量的情况下能不能实现两个变量的值的交换呢?答案是肯定的.

var a=1,b=2;

console.log(a,b);这里输出a和b的值是1和2

a=[b,b=a][0];

console.log(a,b);而这里a和b的值就发生了交换.