苹果算是设计精良的，举个例子：

上面苹果的 iPhone 广告栏有 3 个触发点，背景、“进一步了解”链接、“购买”链接，多数人可能会、也是错误的实现方法是：

```html
<a style="background: url(iphone.jpg)" href="/1">
<a href="/1">进一步了解</a>
<a href="/2">购买</a>
</a>
```

这样实现的结果是不符合 W3C 规范，因为可聚焦元素不允许嵌套：

苹果用了特殊的方法实现，同时满足了用户、营销和规范要求，大致下面这样：

```html
<div style="background: url(iphone.jpg);">
<a href="/1" style="position: absolute; width: 100%; height: 100%;"></a>
<div>
<a href="/1">进一步了解</a>
<a href="/2">购买</a>
</div>
</div>
```

上面的实现，没有嵌套链接，但是有同样的效果。从工程师的角度，这个设计够精良。

苹果首页还有个特点，点击区域几乎占满了屏幕，用户随便点点都能跳转到新页面。小米也继承了这个说不上好坏的设计，但是苹果的可点击区域不是 button 就是 a 标签，用户能预判接下来是按钮操作还是跳转新页面，小米的页面一律 div 加上点击事件实现链接跳转。

我在小米首页点击，除了导航栏几个链接，别的差不多都是 div ，无法被聚焦。