问题及背景
今天项目组的开发同学急冲冲地叫上我看一个他写的JS脚本，好端端的一个form提交时参数无法正常传递。代码是这样的
<form method="get" name="xxx" id="xxx" action="uri?xxx=xxx&yyy=yyy" >
<input name="zzz" type="text" value="zzz" />
<input id="submit" type="button" value="提交" />
</form>
<script>
document.getElementById('submit').onclick = function(){
var form = document.xxx;
form.action = form.action +
(form.action.indexOf('?') > -1 ? '&' : '?') + form.zzz.value;
form.submit();
}
</script>
其本意是在提交是要同时提交xxx、yyy、zzz三个参数，但最终提交的参数只有zzz，即uri只是 uri?zzz=zzz。
分析
这是为什么呢？脚本没有问题呀，感觉方法也没什么问题，在调试了多次无果之后，我把注意点移到了form本身：在禁用了脚本之后，form同样只提交了zzz参数。
最后，终于知道原因是form使用了get方法。
HTML 4.01 specification 的解释
If the method is "get" - -, the user agent takes the value of action,
appends a ? to it, then appends the form data set,
encoded using the application/x-www-form-urlencoded content type.
The user agent then traverses the link to this URI. In this scenario,
form data are restricted to ASCII codes.
get方式是method的默认值，其方式是将form表单中的数据集值对组织到action中的uri之后，不过其组织方式是有讲究的：
- uri在submit最后才进行组织
- 在添加’?'时，uri中额外参数会被舍弃，接着只拼接表单内的域值
- uri hash值会被保留:uri?xxx=xxx#here，#here会被保留
form, get, post, uri
IE浏览器的条件注释虽不太常用，却异常强大，不仅可以用来区分IE浏览器版本
仅IE6:
<!--[if IE6]>
怎么该，怎么该……
<![endif]-->
仅IE7:
<!--[if IE7]>
怎么该，怎么该……
<![endif]-->
还可以牛13滴用来区分非IE浏览器：
<!--[if !IE]><-->
怎么该，怎么该……
<![endif]-->
关键是条件注释后头的 <–> 在IE中被当作内部注释，而在非IE浏览器中会闭合之前的注释，从而起到区分非IE浏览器的作用，一般常用<!–>。
conditional comments, IE, non-ie, 条件注释, 注释, 非IE
捣鼓 wordpress 时，发现系统里的星级评分的设计方式挺新奇也挺实用，特别是在图床挂掉时还能保持色块指示，在可访问性方面要比普通方法做的更好。
视点:
中部镂空，周围用背景色覆盖的背景图是这个设计的亮点，正好和常规背景图设计相反，很有想法。
将此图放大，可以看的更明白些：
正常状态：
设置其他颜色和透明度：
这种设计的好处在于
- 可维护性：方便星星的颜色定制，方便换肤
- 可访问性：图床挂掉时还有背景色做保障，CSS 未加载也能通过内部文字体现涵义
rating, 可访问性, 星级评分
使用 html5 的 doctype 代替很长很长的 xhtml doctype 似乎成了时尚和趋势，只需写寥寥几个字符：
<!DOCTYPE html>
简单易用，而且兼容性又不错，不过毕竟IE7和IE6还是不认识它，就会出问题…
doctype, html5, img, space, 图片空白, 文档类型
dotted和dashed是几个Border-style类型里面最常用又是最容易被混淆的，从字面上我们可以知道dotted代表点线，dashed代表虚线，不过是怎样的点线和虚线，我们无从得知。W3C也仅仅是从字面上对这两者进行了定义和解释，如同讲废话一样将解释权踢给了各浏览器开发商。浏览器混乱的给出自己的解释，其中“造就”的罪过，最终降临在WEB开发者身上…
border, dashed, dotted, transparent
随着网页内容的越来越丰富，网页的打开速度也越来越慢。拖慢速度的一个重要因素是Http请求太多，页面中普遍存在多个CSS文件和js文件要调用，还有需要请求很多图片和其他资源，即使按照优化http请求的宗旨去合并css文件和js文件，那也至少得有两个请求，图片采用sprite方法合并，不考虑sprite方式对内存的消耗（参考To Sprite Or Not To Sprite），页面也得多一个请求；至于内联的图片和其他资源，则无法进行请求数优化。就目前的淘宝网首页来说，虽做过优化，请求数还是多达80+（包含广告代码及一些异步调用请求），在YSlow的 Make fewer HTTP request 一项中只得到F的评价。貌似现在也没有什么更好的解决办法……
mozilla, resource, 浏览器, 资源包
Map标签在IE浏览器下无法通过设置样式更改鼠标样式，比如
想要恢复热点的鼠标状态为手型：
map{cursor:pointer}
&
<area style="cursor: pointer;" shape="rect" coords="118,212,294,263" href="#" target="_blank">
以上设置在IE下都是无效的
解决方案是把样式加在图片上
img{cursor:auto}
搞定!
css, map
能够为 Firefox、Opera、Safari 专写一个 Hack 的情况非常之少，所以以下 Hack 方式在我看来特别新奇。So，做个记录，不做火星人=.=!
normal
.sampleCss{
height:10px;
}
1.Firefox 1-2
body:empty .sampleCss{
height:10px;
}
2.Firefox
@-moz-document url-prefix(){
.sampleCss{height:10px;}
}
…
firefox, hack, javascriptcss, opera, safari
tabindex 可以定义 HTML 元素的 tab 键选择顺序，默认不设置值，所以文档中的元素都是按照排列顺序选择的。
<!--缺省情况与tabindex="0"相同，此时按照顺序选择-->
<input type="text" name="" value="缺省" />
<input type="text" name="" tabindex="0" value="tabindex=0" />
<!--设置tabindex的值为1到32767，则按序号从小到大顺序选择-->
<input type="text" name="" tabindex="3" value="tabindex=3" />
<input type="text" name="" tabindex="2" value="tabindex=2" />
<input type="text" name="" tabindex="1" value="tabindex=1" />
<!--设为-1就可以禁用tab选中-->
<input type="text" name="" tabindex="-1" value="tabindex=-1" />
input, tabindex
