假如讲上面那个小秘密, 知道的人还是算多的, 那么这条秘笈知道的人, 就要少一些了, 在非IE浏览器内核里, 地址栏可以直接运行HTML代码的。比如说咱们可以去那个地址栏里面去输入下面这些代码, 然后接下来按回车键去运行一下它, 在这个时候呢, 它就会显示出那个指定的页面内容来给咱们看。data:text/html,Hello, world!你可晓得, 竟然能够将浏览器当作编辑器来使用。还是要在浏览器的地址栏上去操作, 把下面的那段代码给粘贴到地址栏里面去运行一下, 然后浏览器就变成了那种极其原始而且简单的编辑器了, 它和那个自带的一样, 哈哈。data:text/html,要说到最最后的原因, 就是因为HTML5里面新加的那种属性, 一旦元素给指定上这个属性的时候, 那么元素里面的那些内容就会进入到可以编辑的一个状态。把它推广开来说, 就是把下面的这些代码放上去然后在执行了之后, 整个网页这个整体就会变得可以编辑了, 想怎么处理它就怎么处理它吧。document.body.contentEditabletrue;通过这个标签的特性, 它自身就能够对URL地址进行自动的解析。其实在很多场景下, 我们是需要去从一个链接地址里面提取出那个网站的域名, 或者是查找某个关键词的变量, 亦或是读取参数值的。对于这一点, 我们真是万万没想到, 原来可以这么轻松地让浏览器帮我们把这一切任务都给完成掉, 根本就不用自己去写那些复杂的正则表达式规则去进行抓取操作。具体的操作方法就是, 要在代码的行文里先去创建一个a标签的这个元素出来, 然后, 再把那个需要我们解析的完整链接字符串赋值给这个a标签的名为href的那个属性值上, 这样一来, 所有我们心里想要的信息就全都到手了。var a document.createElement(a);a.href http://www.cnblogs.com/wayou/p/;console.log(a.host);这个原理咱们要是稍微拿过来扩一扩, 就能得到一个更加结实耐用的办法, 去把URL里面的各个部分都给拆开搞定了。下面的这段代码, 它是从别的地方弄过来的。function parseURL(url) {var a document.createElement(a);a.href url;return {source: url,protocol: a.protocol.replace(:,),host: a.hostname,port: a.port,query: a.search,params: (function(){var ret {},seg a.search.replace(/^\?/,).split(),len seg.length, i 0, s;for (;iif (!seg[i]) { continue; }s seg[i].split();ret[s[0]] s[1];}return ret;})(),file: (a.pathname.match(/\/([^\/?#])$/i) || [,])[1],hash: a.hash.replace(#,),path: a.pathname.replace(/^([^\/])/,/$1),relative: (a.href.match(/tps?:\/\/[^\/](.)/) || [,])[1],segments: a.pathname.replace(/^\//,).split(/)};}页面当中拥有ID这个条件的元素, 会去创建一个全局变量的。在一张HTML页面中, 所有设置了ID属性的元素会在其执行的环境中创建相对应的全局变量。这样的情况像是人的阑尾一般显得完全多余了。可是在实际项目之中最好还是老老实实按照常规写法去编写代码就行。毕竟常规的代码出问题的概率要小许多。加载CDN文件时可以省掉HTTP标识现在大家很常用的CDN, 指的是从专门的服务器上去加载一些通用的JS文件和CSS文件出于安全方面的考虑, 有的CDN服务器会采用HTTPS的方式来进行连接, 而另外一部分服务器则是使用传统的HTTP方式, 其实在实际的使用过程当中, 大家是可以把这部分差异给忽略掉的, 具体来说就是把协议类型的部分直接从URL地址当中省略掉。这一点在之前的一篇翻译类的博客文章, 也就是标题叫作《编程最佳实践》的内容里, 也是有提到过的。利用标签保存任意信息把那个标签, 它的那个类型属性给它设置为等于text这个东西, 那么这样的话就可以在里头边儿上保存任意的信息了, 再一个就是呢, 之后可以在代码里面很方便地获取这些个东西。var text document.getElementById(template).innerHTML在CSS这个模块之中, 大家所关注的关于CSS的一些恶作剧。我相信, 在你仔细地看完了下面这些代码内容之后, 你是有能力去预见会得出什么样的结果的。*{cursor: none!important;}就是那个文字看起来有点模糊的样子, 效果挺简单的。这只需要两行简单的CSS3代码, 这些代码能够达到把文字变成模糊状态的一个目的, 最后做出来的样子, 有点像是在PS软件里面使用滤镜的效果, 所以现在的人会觉得这个东西是相当厉害的。p {color: transparent;text-shadow: #111 0 0 5px;}垂直居中有好多次, 博主都会有这样的具体需求, 就是需要把某一个DIV在页面当中进行垂直方向上的居中显示操作。大家都知道, 在当前使用的CSS代码样式规定里面, 天生就自带有一种专门用于水平居中对齐的样式属性, 它的名称是text-align。但是唯独关于垂直方向上的居中对齐这个问题, 在传统方法之下似乎是找不到任何有效的解决方案, 让人觉得无解。当然, 你可以把那个容器的显示模式设置为table。然后把包含在它里面的子元素也设置成table-cell。这些子元素就是需要垂直居中的那些元素。接下来再加上-align属性来配合实现效果。但是, 采用这种做法往往会带来一个缺点。因为table这个属性的存在, 可能会对整个页面的布局造成破坏。既然这样, 我们反倒不如直接使用标准的table标签来得更直接一些。下面这个样式利用了来巧妙实现了垂直居中样式, 需IE9。.center-vertical {position: relative;top: 50%;transform: translateY(-50%);}从另一方面来看的话, 水平居中的处理办法要简单一些, 就像上面所说的text-align:这种方法, 大家经常会用到的另外一个技巧是width:0 auto这种写法, 可是这个法子对于大法来说呢, 只有在子元素的宽度比容器的宽度小的时候才能起作用, 要是说子元素的宽度比容器的宽度还要大一点的话, 那个方法就不管用了。像这样去照葫芦画瓢, 把left这个方式给利用起来, 再加上一些条件确实也是能够把这个水平居中的效果给实现出来的, 不过话又说回来, 这样做下去其实是没有多大实际意义的, 为什么呢? 因为毕竟text-align这种方式基本上就足以满足大家的需求了。.center-horizontal {position: relative;left: 50%;transform: translateX(-50%); }多重边框通过使用反复指定 box 这个属性的做法, 来实现具有多个边框的那种视觉效果。在线演示/*CSS Border with Box-Shadow Example*/div {box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 0 12px rgba(0, 0, 0, 0.2), 0 0 0 18px rgba(0, 0, 0, 0.2), 0 0 0 24px rgba(0, 0, 0, 0.2);height: 200px;margin: 50px auto;width: 400px}实时编辑CSS我们可以通过设置style标签的\:block样式, 来让页面的style标签显示出来。然后我们在其中加上属性以后, 就可以让它变成可编辑的状态了。在这种情况下, 我们修改之后的样式效果, 也是能够实时更新并且呈现出来的。可是这个技巧在IE下面是没有作用的。拥有此项技能的人, 那简直就是逆天了。