shtml 介绍及让apache支持shtml 文件
shtml是一种基于SSI技术的文件，也就是Server Side Include--SSI 服务器端包含指令，一些Web Server如果有SSI功能的话就会对shtml文件特殊对待，服务器会先扫一次shtml文件看没有特殊的SSI指令存在，如果有的话就按Web Server设定规则解释SSI指令，解释完后跟一般html一起调去客户端。
html或htm与shtml或shtm的关系是什么
html或者htm是一种静态的页面格式，也就是说不需要服务器解析其中的脚本，或者说里面没有服务器端执行的脚本，而shtml或者shtm 由于它基于SSI技术，当有服务器端可执行脚本时被当作一种动态编程语言来看待，就如asp、jsp或者php一样。当shtml或者shtm中不包含服务器端可执行脚本时其作用和html或者htm是一样的。
如何使你的Apache服务器支持SSI？
Apache默认是不支持SSI的，需要我们更改httpd.conf来进行配置。我这里以windows平台的Apache 2.0.x为例，打开conf目录下的httpd.conf文件，搜索“AddType text/html .shtml”，搜索结果：
# AddType text/html .shtml
# AddOutputFilter INCLUDES .shtml
把这两行前面的#去掉。
然后搜索“Options Indexes FollowSymLinks”
在搜索到的那一行后面添加“ Includes”
即将该行改变为 Options Indexes FollowSymLinks Includes
保存httpd.conf，重起apache即可。到此我们就完成了对Apache SSI的设置
调用例如
[crayon-5f6eb5cc20996672352791/]
这段代码在shtml 文件中 不会被认为是注释
亲测有效
document.querySelector(element) 选择器
document.querySelector("#test"); ? // 如果DOM 中有多个 id 为text 的则会返回第一个
document.querySelectorAll("#test")[0]; ?// 获取 第一个 id 为text 的DOM 节点
document.querySelectorAll("div.test>p:first-child")[0]; ?// 可以这样用
[crayon-5f6eb5cc21b33659466630/]
上面这段代码的速度比 jQuery快 ，缺点是 IE 6 7 不支持， IE 8 及以上 支持 ，酌情考虑
相关文章：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelector
去掉Webkit(chrome)浏览器中input(文本框)或textarea的焦点框
去掉焦点框
[crayon-5f6eb5cc21e68995581642/]
取消textarea的拖动改变大小的功能：
[crayon-5f6eb5cc21e6e999880350/]
最后把以上两个CSS合并后如下：
[crayon-5f6eb5cc21e72606341283/]
更改CSS3 placeholder 的文本颜色
因为每个浏览器的CSS选择器都有所差异，所以需要针对每个浏览器做单独的设定。
[crayon-5f6eb5cc221ec446039795/]
textareas的代码，如下：
[crayon-5f6eb5cc221f3353362332/]
CSS3垂直翻转/水平翻转
[crayon-5f6eb5cc22530897618611/]
其中，就目前而言，对于基于webkit核心的浏览器，如Chrome以及Safari，实现元素的垂直翻转或是水平翻转也可以使用如下样式：
[crayon-5f6eb5cc22538042373364/]
注意：
水平翻转或垂直翻转不同于旋转180度。前者以轴为镜像，后者以点为镜像。
如果是对称元素，旋转180度和翻转的显示效果基本上就是一致的，但是，非对称元素就会看到明显差异。
对于后面提到的目前仅webkit核心浏览器支持的rotateY(180deg)，这里有个大写的Y。我们都知道Y表示纵轴，所以我们可能会误以为这里实现的是垂直翻转，其实非也，这里的Y表示元素以纵轴为镜像翻转，也就是水平翻转了。
