HTML tabindex 是一个全局属性，它允许开发人员通过按 Tab 键使 HTML 元素可聚焦或阻止它们按顺序聚焦。
此标签接受整数值，并根据数字的值返回各种结果。负值（如 tabindex = “-1”）表示无法通过顺序键盘导航访问该元素。正值表示元素在顺序键盘导航中应该是可聚焦的，数字的值确定元素的顺序。
语法
<element tabindex = "" >
适用于
由于 tabindex 是 HTML 中的全局属性，因此 HTML 中的所有标签都支持 tabindex 属性。
HTML tabindex 属性的示例
以下示例将说明 HTML tabindex 属性，我们应该在何处以及如何使用此属性！
使用 tabindex 浏览 div 标签
在以下示例中，让我们看看 HTML 文档中 tabindex 属性的用法。此代码定义了 tabindex，用于在各种标签（如 input 和 div）中导航。
<!DOCTYPE html>
<html>
<head>
<style>
div:focus {
font-weight: bold;
}
</style>
</head>
<body>
<p>Click anywhere in this output screen
and press tab to navigate.</p>
<label>First in tab order:
<input type="text">
</label>
<div tabindex="0">
Tabbable due to tabindex.
</div>
<div>
Not tabbable: no tabindex.
</div>
<label>Third in tab order:
<input type="text">
</label>
</body>
</html>
tabindex 的正值
考虑到以下示例，我们演示了 tabindex 属性的正值。其顺序由数字的值定义。也就是说，tabindex=“2” 聚焦在 tabindex=“3” 之前和 tabindex=“1” 之后。
<!DOCTYPE html>
<html>
<head>
<style>
p:focus {
font-weight: bold;
}
</style>
</head>
<body>
<h2>Click anywhere in this page,
then try pressing tab key.</h2>
<p tabindex="1">
First in tab order
</p>
<p tabindex="2">
Second in tab order
</p>
<p tabindex="3">
Third in tab order
</p>
</body>
</html>
tabindex 的负值
让我们看一下以下示例，我们使用的是 tabindex 属性的负值。如果我们传递负值，则无法通过顺序键盘导航访问该元素。
<!DOCTYPE html>
<html>
<head>
<style>
div:focus {
font-weight: bold;
}
</style>
</head>
<body>
<h2>Click anywhere in this page,
then try tabbing through the elements.</h2>
<div tabindex="-1">
tabindex with -1 value!
</div>
<div tabindex="2">
tabindex with 2 value!
</div>
<div tabindex="0">
tabindex with 0 value!
</div>
<div tabindex="-2">
tabindex with -2 value!
</div>
</body>
</html>
支持的浏览器
| 浏览器 |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| 是否支持 | Yes | Yes | Yes | Yes | Yes |
