合理地扩大页面链接响应区域可以提高网页的易用性。同时还要兼顾到链接的交互一致性以及视觉上的平衡，就需要做一些特殊的处理。

实例一：一张图配一个链接。

    常规的做法有以下几种：

    第一种是最常规的，只有链接可点，但整张图不可点，点起来还蛮累的。

    第二种是把整张图作为一个链接，链接响应区域是够大，但其实那个链接就比较尴尬，不够优雅。

    第三种是需要前端开发兄弟比较费劲点，设计师要求链接能正常工作，图也能点。前端一听，这链接又没法嵌套，还得整点JS才能搞定，得把图加上click的响应。这个比以上两种都好一些，但仍然不够理想，因为两个链接的交互一致性不够，用户对点图和点链接是不是去同一个地方会存在疑虑。

    这样或许会优雅一些：

    鼠标移入图片上，链接也要给出hover状态，即有足够的链接响应区域，又有很好的交互一致性，提示用户点图和点链接去的是同一个地方，如图所示：

    前端代码角度上，就是把链接a标签包住整个图，那段文字用其他标签表示，比如span，再定义a的hover状态下，把span变成链接色，并加上下划线，来模拟hover效果。

实例二，可链接的标题配一段对标题的详细描述。

    在这个例子中，视觉角度来看，一片文字需要主次清晰，所以链接色只加在了标题上。那么详细描述部分该不该响应点击呢？非链接色出hover效果会不会有点怪呢？即使决定这儿可以链接，那hover效果导致出现大片的hover色和多行下划线，视觉设计师会跟你急吧。

    这样或许会优雅一些：

    让详细描述响应点击，同时让hover效果出现在标题上。如图：

还有更复杂的模块，可以套用这个方式来做，比如下面这个例子：

另外一些说明：

    1、前端代码问题

    虽然在html4中，作为inline属性的a只能在里面嵌套inline的标签，可以看下XHTML1.1标签列表、属性和嵌套规则（抱歉未找到HTML4的，它们类似）。但在html5中，语法定义者扩大了它的嵌套能力，我们可以用a把各种block标签统统包进来。详见html5中对a的特别说明：http://www.w3.org/TR/2010/WD-html5-20100304/text-level-semantics.html#the-a-element （感谢钨龙提供资料）。毕竟HTML5还处于草案阶段，这种嵌套方式，还是偶尔会出现一些对链接的浏览器渲染问题，但目前还未总结出规则。

    2、a标签包含的整个区域内，只响应链接了，无法进行文本拷贝，如果对拷贝文字有特殊要求的模块，不适合这个方式。

    3、这个方案有个附带的好处，因为整个模块只要一个链接，如果是个手工维护的模块，更新的时候很省事。

建议继续学习：

1. 解决IOS点击链接触发的颜色块    (阅读：3458)
2. 如何获取用户访问过哪些网站    (阅读：2845)
3. unix文件系统：链接与文件    (阅读：2775)
4. html中链接地址的重要性    (阅读：2430)
5. Linux程序链接时-lpthread对程序正确性的影响    (阅读：2479)
6. 链轮策略：LinkWheel    (阅读：1784)
7. 最应该规范设计的元素――链接    (阅读：1683)
8. 理解响应网页设计元素    (阅读：1786)
9. 浅议Wap网页设计中的锚点链接    (阅读：1618)
10. Windows硬链接 软链接 符号链接 快捷方式    (阅读：946)