本节讲述web应用中焦点的重要性。你将会知道如何管理焦点，引导别人使用鼠标或者键盘来浏览你的页面。
在某个页面，你点击了一个链接，然后跳转到网站的主页面。通常这个链接叫做跳转链接或者锚链接。当这个链接被键盘激活时（通常使用tab或者enter键），它的周围会有一圈焦点圈，表示该元素获得了焦点。
作为一个web开发者，你的职责是让所有人可以浏览（操作）你的网页。css焦点就是为了这个目的而诞生的。
焦点存在的目的，是为了方便那些使用键盘的人浏览页面的。如果一个元素获得了焦点，但是没有任何视觉上的指示表明它获得了焦点，那么使用键盘的人就不会知道此时哪个元素是处于激活状态的（哪个元素获得了焦点），这将会导致导航出错，例如跳转到错误的页面。
某些可操作的元素自带获得焦点的属性。例如<a>、<button>、<input>和<select>。如果一个元素可以获得焦点，我将之称为focusable元素（实在不知道怎么翻译这个名称，翻译成中文可获得焦点的元素，太长了，后面就用focusable元素称呼它）。
我们可以用键盘tab键，在一个页面的所有focusable元素来回移动，达到导航的作用。
我们还可以通过html的tabindex属性，使非focusable元素变成focusable元素，只需要设置tabindex=0。
<div tabindex="0">可以获得焦点</div>可以设置tabindex值小于0，将focusable元素变成非focusable元素，例如tabindex=-1。
应该避免将tabindex设置为任何大于0的数。因为tabindex大于0会导致比较奇怪的现象，当页面存在tabindex大于0的元素，用户按下tab键，页面中元素获得焦点的顺序首先从tabindex大于0的最小的那个元素开始，然后从这个元素开始向下在循环整个页面中的focusable元素。而且我认为我们不应该通过这种方式更改页面focusable元素，获得焦点的顺序，因为页面的阅读方向应该是从上至下的。所以建议大家避免这种错误的使用方式。
默认情况下，浏览器会给获得焦点的元素添加一个焦点环，表示某个元素获得了焦点。焦点环的样式，在不同浏览器、不同系统上是不一样的。
我们可以通过css修改焦点环的样式。主要通过:focus、:focus-within和:focus-visible伪类修改。
通过:focus和outline，可以更改焦点环的样式：
有时候焦点环，离文字内容太近了，可以通过outline-offset属性更改。
（完）