我们有时会给在大块元素加个window.location='http://www.aoao.org.cn'，还顺便把光标定义成移上去会变成手势还代替链接，为什么不直接用<a>因为有时东西太多，不能放在链接里，比如hx、p、 li之类的。那问题来了，用js处理会让链接的功能没了一堆，作者在他的文章说到：

• 中键：新tab打开 （aoao注：中键功能变更滴同学无视）
• CTRL/SHIFT 单点：新窗口 新tab打开（aoao注：自己浏览器改过设置以自己的为准）
• 右键菜单：虾米虾米方式打开
• 浏览器状态栏
• 其他，等（aoao注：好像也没其他的）

那看看效果： superLink Demo，试一下左中右键功能。

实现其实不难，就是把你原来加window.location的元素上盖上一个链接，透明为0，这样就可以把上面4条功能还原，-_-!。

总的来说，想法很好，有总比没有好，还封装好让别人用 ^_^，不过如果有机会再遇到类同的应用时，我应该会在原来那块元素里面的a里加个无用的span（语义愤青别BS我），虽然定位可能有点麻烦，但总是能定准的，直接样式搞定。

推荐本书：《Web标准设计》

为了避免不可用，我曾经跟同事讨论过这样的实现方案。

1. 默认显示为 input , 没加载完或者XX时，用户也可以填；
2. js有效时，用select代替掉input；
3. 如果input里已经有内容，要记得拿给select；
4. 某些情况可以考虑把第一个直接输出在html上。

还要考虑的问题

1. input 输入的地址数据的修正与格式(结构)化；
2. 不能格式化的前端反应。

以前只是想想，最终因为XX原因米完成，今天不小心看到adsense 的注册页面也做了类似的处理。很好很强大。

有些东西，并不是你想得到就一定得做得了，比如某网站全站都不支持html的form提交，哎。

推荐本书：《Web标准设计》

就是直接用label的内容盖在input上面，然后用js来处理一下。详细实现就不用说了，反正我想尝试纯CSS是没办法实现滴。从结构上来看，还是比较理想的，充分利用了label

<label id="usernameLabel" for="username" class="placeholder"><span>Member Name</span></label>
<input id="username" name="username" class="text" type="text" maxlength="128" value="" />

其实看图看不出什么，点图去网站看一下。

我还特别试了一下noscript的效果，跳转 囧rz。

有些细节的，比如提示文字从灰变得更灰的过渡效果，是-webkit-transition的应用，要用webkit的浏览器才能体现。

再其实，input有个叫placeholder的属性，参考以前类型为search的input及相关属性，可以直接用在type="text"的input上，不过哪种方式在哪些情况应用会更适合呢，大家自己决定吧。

推荐本书：《Web标准设计》

打个比方，当你拿到一本未看过的书时，理论上你会翻翻目录、翻翻前言，通过目录寻找感兴趣的内容，或者从头翻起。那博客呢？当你来到一个未访问过的博客时，也许你会翻翻导航、翻翻关于，通过导航寻找感兴趣的内容，或者从头看起。^^是不是有点像呢？假如你知道书的某一页有感兴趣的内容，你可能就直接翻到第N页，有点像网站url一样的功能。你可能给书的某一页折角或者夹书签，是不是有点像收藏夹的功能^^，书的内容可能存在引用，指向另一本呢，是不是有点像博客文章里有个引用指向另一个网站呢?

但在大多时候，新网站的发现时，你可能是通过url访问网站某一部分的内容，而新书的发现你是从头看起，获取信息的顺序不一样。事实上，网站也不是书，详细区别就不用我讲了，换回书的概念。

当你不了解一本书时，你会先翻里面某一页的内容来看吗？当然，像有人跟你说第XX页能解决你的问题你去看就明白这种情况就例外了。当你在看书的某节或者某一页内容时，你会希望翻到这一页就是先看到目录呢？我想这样的书一定不喜欢。

那网站结构呢?在网站首页时，是否应该导航优先存在于结构呢?＝。＝ 好像全世界都是这样的；那在详细内容页面，是否应该内容优先存在于结构呢？＝。＝好像大家都不是这样滴。最多在前面加上跳过导航跳过内容。。

Web标准常说的一个优势就是一个页适合多种终端访问，假如你用手持设备来访问时，结构的先后存在的优势更加明显，如果打开某一页内容时，第一屏基本是导航好还是直接看到内容好。当然，如果是首页更期望是导航。事实上，对于手持设备，我更倾向使用对应的版本（关于手持设备使用的结构等我网站的mobile结构写得差不多再跟大家讨论），适合的内容给适合的浏览器显示。

除去正常的浏览器，手持设备，还存在各种可用于访问网站的终端。比如我用手机自带的浏览器访问，我得到的USER-AGENT为空，以前有说过media=”handheld” 为手持设备添加样式，不过也不是很理想。在还没处理每个相应浏览器的版本时，一个页适合多种终端访问这种勉强的作法还是可行的。

当然，如果你认为网站只是在电脑上的浏览器显示的，不需要这样无聊的结构也是可行滴。那这样做还有什么好处呢？利于SEO ^^，搜索引擎据说比较喜欢结构前面的文字，详细内容页导航是次要滴,也是放在后面。^^悄悄说下google搜索aoao已经可以看到我的新米排到了第一页，虽然aoao不是什么关键词，当然对于搜索引擎，域名也是一种策略，不过不这里讨论。

对于这种结构，排版也是一种问题，＝。＝，还好CSS能解决这个问题。现在我的网站就使用这种结构，有兴趣的朋友关掉样式或者查看代码看一下。当然，复杂结构的网站使用这样概念来做，就有点勉强了，但办法总会是有滴，只是我还没想到，哎，技术没跟上。。也许是书架，也许是图书馆，也许什么都不是。

推荐阅读：Web内容可访问性指南1.0(WCAG 1.0)

推荐本书：《Web标准设计》

各个浏览器都有各自实现缩放的机制大约如下：

• IE7：整个页面缩放与文字缩放，鼠标操作（Ctrl+鼠标滚轮）为整个页面缩放，文字缩放没有提供快捷键，只能通过浏览器菜单操作（查看 ›文字大小 ›大|小)来选择。
• IE5~6：文字缩放，鼠标操作与浏览器菜单操作都是一样的功能。
• Firefox2：文字缩放，鼠标操作和浏览器菜单操作（菜单快捷键：Ctrl+”+” Ctrl+”-”）都是一样的功能。细节差别是鼠标操作缩放一个档，菜单操作放大两个档。
• Opera：整个页面缩放，鼠标操作与浏览器菜单操作都是一样的功能，浏览器菜单提供更多的缩放比例。
• Safari：文字缩放，浏览器菜单操作（菜单快捷键：APPLE+”+” APPLE+”-”）。整个页面缩放是由MAC系统完成，Win版没整个页面缩放的功能。
• 傲游2：这个是特别的浏览器，使用的是IE内核。它除了实现IE缩放的功能外，还额外实现了单图片缩放的功能（傲游设置中心 › 浮动按钮 或者按住 Ctrl+Alt 键在对象上移动鼠标可以强制显示浮动按钮）。

其 他浏览器没去研究，估计也都差不多这几种类型。在IE5~6里，缩放的权力被剥夺已经成了很正常的一件事。 12px 真是伟大的值。虽然新的浏览器已经改变了12px不可缩放的情况，但是那些不可使用文字缩放的网站们好像就经不起新功能的考验。分辨率提高的同时，也提高 了信息的获取的难度：在”不可缩放”的浏览器（IE6）里，文字可能看不清，在仅仅实现了文字缩放的浏览器（Firefox2）里，网页可能看不清。虽然 浏览器有提供缩放的功能，但我们会把它破坏掉，比如：

• IE：对文字使用绝对单位，比如px，这时浏览器缩放文字的功能给我们破坏掉了，虽然IE也有错，可是还是因为我们的定义导致了问题的发生。
• Firefox or IE ：把非文字的元素也使用成相对大小的单位，比如em ，这时浏览器只缩放文字的功能没了。
• 只有文字缩放功能的浏览器：使用背景图片、flash等方式来显示文字，让文字变成不是文字了。用特别的CSS定义，让放大文字的网页看不清。

单单的文字问题已经是老问题了，不想再扯什么，先看一下CSS Zen Garden这个经典的例子，就算是只是使用文字缩放，整个界面也缩放，其实没有完全缩放，图片部分没有，图片里面的内容也是文字。但是。因为它是背景图片，所以没办法缩放。Ian Liu说：如果图片中的字体太小，用户试图发大却未能提高相应的功能，也会给用户带来挫折感。 当然，刚才的例子的字体可能并不用使用缩放也可以看得清，但如果我用的是24′的显示器呢？我公司的座位旁边就有一台。

那再看一下IKEA网站，这个虾米都是相对的，这样的话 ，各个浏览器缩放起来是一样的。不管怎样缩放，都是整页缩放。这回图片里的文字也跟着缩放了。看起来好像已经比较完美的样子，但是缺点就是，单单缩放文字的功能被替换掉了，干啥要把功能换掉呢？你怎知道我不需要呢？我要整个缩放时我自己不会换个功能来用吗？是因为浏览器的问题呢？那我们应该骂一下那些该死的浏览器为什么不给我们提供这样的功能。

那就再回头看一下Yahoo!网站，这个的效果其实就跟刚才的CSS Zen Garden是一样的，但还有一些不一样，一个是背景图片，一个是图片内容。如果使用傲游2时，就可以单单放在图片来看，不过这个功能还不能放大背景图。如果想都放大时，也许使用整页放大的功能更适合了。也许，缩放应该是浏览器提供的功能，而不是我们去改造的。图片替换这技术一直以来最大的缺点就是不被缩放，像sIFR也存着同样的问题，华丽的效果是有代价的。也许，我们不久以后可以不用考虑这样多了，Firefox3据说已经支持整个页面缩放的功能。但是如果我们把文字信息换了个方式输出的话，那些看起来像文字的元素应该归进哪里，是不是应该让它跟文字同时缩放呢？我们是否要剥夺单单的文字缩放的功能呢？难道因为真正的文字缩放做得好难的原因吗？

推荐本书：《Web标准设计》

关于overflow:auto的，很多人贪他书写方便，直接用来清除浮动。但是Firefox使用overflow:auto会产生focus，引用网友fireyy的评论

我想这是FF浏览器的一个“可用性和亲和力”（usability/accessibility）的设定，当设定了overflow:auto或者 overflow:scroll的元素不能完全显示内容的时候（出现滚动条），针对于键盘使用者，就可以focus到那个元素，使用键盘的方向键去控制局部的滚动。

那用关于overflow:auto清除浮动有什么问题呢？当你鼠标坏掉时，用键盘按Tab键去网上看新鼠标时就会发现，按了N+N下Tab键都到不了想要到的链接，因为overflow:auto太多了。XD 想想老外为什么要写那样复杂的clearfix吧，难道他们的研究会比我们少吗？

那关于overflow:hidden呢？本来它是没问题滴，可是我们伟大的M$不喜欢它，早在04年POPO发现overflow:hidden会导致中键失效。

如果定义了嵌套区块元素(比如<div> )的overflow溢出样式，在这个区块上方，鼠标中键将失效，这主要是存在于IE中， Mozilla/Firefox/Opera普遍使用自定义的mouse guesture，所以不存在这个问题或者根本就谈不上这个问题。比如用IE浏览Plod的时候，在中间内容部分按鼠标中键(假设你的鼠标有中键)，那个上下滚屏箭头没有出现吧……

中键的功能估计用得比较少，一般出现N+N屏的页面，才会用中键来快速拉动，例如用IE6打开163（不知道改掉了没^^）试一下，虽然IE6里那个不可爱的四角样子比较难看，但是也不能因为它样子有问题就把它去掉，哪怕你是不小心的。因为真的有人会用到，上次跟一个做论坛的朋友有讨论到这个问题，是普通网友提到的。要是导致别人以为中键坏了可就不好^^。顺便说下，你们大胆用，因为我装了罗技的鼠标驱动，中键功能已经更新，就算IE也米问题。再再顺便说下，Firefox的中键那个图可以定制。XD

这些细小的问题可能你认为影响并不大，的确，它的影响并不大，可是Web标准本身的意义是什么呢？

扩展阅读：Accesskey引起的一点点思考
引起的相关问题:Firefox2中输入框丢失光标bug

推荐本书：《Web标准设计》

回到网页中，在网页里，一样有差不多功能的东东。大家叫它Access key，貌是最近流行滴样子。
<tag accesskey="x">标签添加属性accesskey，属性值就是对应的键</tag> 相关资料:http://www.w3.org/TR/1999/REC-html401-19991224/interact/forms.html#access-keys

一般按法也是 alt+key 来选中。不过各浏览器都不大一样。
IE系列使用alt+key，再加Entet回一下下车（如果是链接的话。）
FF2.0以下的是也是使用alt+key，不过如果是链接的话，直接打开，Netscape也是直接按Alt+key
FF2.0的，官方说：网页提供的快捷键 (Access key) 现在在 Windows 上请以 Alt+Shift+Key 来使用，在 Mac OS X 为 Ctrl+key，Unix 则是 Ctrl+Shift+key。，可是我的SUSE上的FF2.0仍然是用 Alt+Shift+Key，不知道是算什么系统。。-_-!!
除了alt+key外还要多按个键的做法是为了避免与浏览器的冲突，想法是好滴，可单手按起来并不方便。
Opera的是按下Shift+Esc 激活accesskey面板。再接Key直接选择，这是我以前做的小站的部分截图

跟Opera使用方式差不我的还有Konqueror，Konqueror 是个按下Ctrl 激活 accesskey 面板，除去已经分配的 accesskey外，会自动把其他的键按页面链接的顺序按XXX条件分配，字母分完了就分配数字，都分完了后面的就没有。不过Konqueror 这个浏览器，估计没什么人会去用，现在 linux 的发行版大多默认是 Firefox 。

Mac OS X 上的我就不知道。没钱买装的起这种系统的机子。x86的装了n个版本，N台机子，都没装上一个图型界面可用的。如有使用Mac OS的朋友告知一下，也许我哪天会用上Mac不用再想这个问题。

知道了accesskey 怎样操作后，思考一下，它应该用在什么地方。
一般来说，非打字状态下，我左手是放键盘左边或者拿烟，右手抓住鼠标，以防给人抢了。
如果有明显提示的 accesskey 并在 key 是键盘左边，我单手能很方便按到时才可能会使用，我比较懒 ^_#。

为什么说要有明显提示的 accesskey 才可能会使用会使用呢？我以前做的小站。是使用tip来提示的，我连自己做的东西都忘记了，更别说别人的。而如果按一个键要我把整只左手移到键盘的右边，我宁可使用鼠标操作。
那什么是明显的提示呢。看一下小甘甘滴小站吧，注意最上面的导航菜单。英文还是比较好做一点点，可以抽个字母来用，中文的我并没想到什么好一点的办法。也许像窗口的菜单的一样是个办法，中文的字并不能全排进键盘那些键里，就算可以排进去，又有多少人能记得住。

accesskey 的值可以是字母跟数字。一些浏览器并没有解决网页里跟浏览器里的按键冲突。 所以，并非所有的字母都适合使用。同时，一些浏览器的数字并不能使用小键盘里的数字。比如FF，
如果一个人会在网页里使用别人提供 accesskey 的话，理论上他也会使用浏览器上的来完成一些操作。当然，这只是我个人想法，并不知道别人是否也是这样。也许别人跟我一样，IE只是用来调试网页使用的。

如果在网页里使用的 accesskey 与浏览器上的菜单重叠了，比如 “V” 给网页用了，我就不能按 Alt+V, C 这样简单的在IE打开源文件来看，哎！做开发的人一天就知道看代码。 希望有在网页使用accesskey 的朋友不要选择与浏览器的有冲突的键。

除了菜单。还有什么地方常会用到呢？一般来说是表单，录入文字时我会使用双手。按键范围也就就大了。比如像一位台湾的朋友OOO的blog，在评论时可以用 accesskey 来选择要填的地方。像这样操作的确方便了点，不过我一般都不用。
一般我看文章时。右手还在鼠标上，拉到评论时，会顺便点在第一个 input 里，之后一般是按 Tab 来跳到下一个 input 或者别的，要返回上一个时，是按 Tab+Shift 来跳回，怎样说 Tab 键也是比较大一点的，方便按一点。

说着说着，好像accesskey 用处并不怎样的样子。其实，因为我们一般有鼠标用，如果没有鼠标呢？所以，大家买手机时最少得买有蓝牙可以控制电脑滴，要是鼠标不小心坏了，还可以临时当下鼠标用。在现在多数网站光使用Tab都比较难用滴，又有多少使用AJAX技术的网站来提高用户体验~结果是让我在鼠标出现问题时，连唯一的Tab都没用没了。

除去 accesskey 外，还有一些网站，强制使用键盘的某些键配合js来完成一些操作。比如按Home键就跳到首页，方向键向左是跳到上一篇文章，向右是跳到下一篇。有时，用着是挺方便的；有时，也许会很烦，因为原来的功能没了。

请不用在本小站尝试 accesskey，因为没有做之类的功能，只是昨晚有个朋友问到 FF2.0 按了没反应的问题，便写下自己的一些想法。也许，下一次改版，我会把小站做得更像样，也许，改版都可以省掉，因为很懒，忙其实只是个华丽的借口。

推荐本书：《Web标准设计》

代码是这样滴

<input type="checkbox" name="testtest" id="testtest" /><label for="testtest">点啊点啊点这里</label><br />
<input type="checkbox" name="testtest" />点啊点啊点这里也没用

我相信一定也有人不喜欢只能点那个小方块，如果分辨率再高点，点中总得瞄准一下。

不只checkbox有这样的问题，radio也一样。大家快给他们配个老婆（label）吧
关于label的说明，可以看下这里http://phpx.com/man/dhtmlcn/objects/LABEL.html

推荐本书：《Web标准设计》

选择都在本窗口打开，本来应该标明哪个是站外，哪个是站内，可是人总是懒的，我不会给页面中每个一外链加上class或者图片，原来一直是用css的一个选择符 a[href*="http://"]来给a的手换了个自定义cursor，这两天因为系统换了套cursor，感觉用自定义cursor不是很好的样子，现在用JS在光标旁边加了个小图片，支持IE6+,FF,Opera等，IE5.x那些古老的浏览器我已经没有原装可以来测试了。

原理也很简单，先把所有的a都跑一次，撞到不是自己的就加事件，发生事件时就得到光标坐标，把一个层移到光标旁就行。

例子

推荐本书：《Web标准设计》