HTML tabindex 语法
在 HTML 中，tabindex 是一个全局属性，它用于设置元素在按下 Tab 键时的导航顺序。通过 tabindex，你可以控制用户在浏览网页时使用键盘 Tab 键切换元素的顺序。
tabindex 属性可以应用于任何 HTML 元素，但最常用于表单元素、链接和图像。
语法：
<element tabindex="整数"></element>说明：
element 是要设置 tabindex 属性的元素。tabindex 属性取值是一个整数（负整数、0 或正整数），用于表示导航的顺序。
tabindex 主要用于以下 3 个方面。
- 更改 Tab 键导航顺序：我们可以通过设置不同的 tabindex 值，控制元素在按下 Tab 键时的切换顺序。
- 使原本不可聚焦的元素可聚焦：例如，普通的 div 元素默认不可获得焦点，但通过设置 tabindex 属性，可以使它变得可聚焦。
- 创建自定义的键盘导航体验：在需要特别键盘操作的场景中，通过 tabindex 使元素按特定顺序聚焦，提升用户体验。
tabindex 最佳实践
在无障碍（Accessibility）最佳实践中，我们强烈推荐使用小于 0 的 tabindex 值。这是因为如果手动设置了大于 0 的 tabindex（比如1、2、3 等），一旦在页面顶部新增了一个链接，我们需要把下面几百个元素的 tabindex 全部改一遍，维护起来简直是噩梦。
因此在实际开发中，我们应该尽量不要使用大于 0 的 tabindex 值。因此这会导致键盘导航顺序与页面视觉顺序不一致，给用户带来困扰，并且极难维护。
此外需要清楚的是，如果 tabindex 属性取值是一个负整数，此时该元素将无法获得焦点，但可以使用 JavaScript 使其可聚焦。这也正是 “负 tabindex” 的作用。
HTML tabindex 摘要
| 属于 | HTML 属性 |
|---|---|
| 使用频率 | 高 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
HTML tabindex 示例
接下来，我们通过几个简单的例子来讲解一下 HTML tabindex 属性是如何使用的。
示例 1：tabindex 属性修改键盘导航顺序
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="text" tabindex="3"><br>
<input type="text" tabindex="1"><br>
<input type="text" tabindex="2">
</body>
</html>页面效果如下图所示。
分析：
默认情况下，按下键盘 Tab 键时会按照文本框的先后顺序进行切换。但这里使用了 tabindex 属性修改了文本框的顺序，此时切换顺序就不一样了。小伙伴们可以自行测试一下。
示例 2：tabindex 属性使元素可聚焦
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div tabindex="0">绿叶网</div>
<input type="text">
</body>
</html>页面效果如下图所示。
分析：
默认情况下，div 元素是无法聚焦的。但这里我们给 div 加上了 tabindex="0"，它就变成了一个可聚焦元素。
