tabindex 属性控制网页元素是否可以获得键盘焦点，以及它们获得焦点的顺序。它在创建可访问的网页和改善用户体验方面起着至关重要的作用。
以下是 tabindex 属性值的含义：
-
tabindex="0": 这使得元素可以通过键盘获得焦点，并按照其在文档源代码中出现的顺序进行 tab 导航。 这是使原本不可聚焦的元素（例如<div>,<span>,<p>等）可聚焦的最常用方法。 -
tabindex="-1": 这使得元素可以通过 JavaScript 或链接（例如，通过#element-id）获得焦点，但不能通过 Tab 键顺序获得焦点。这对于创建自定义键盘导航或通过 JavaScript 管理焦点非常有用，例如在模态窗口或下拉菜单中。 -
tabindex="1"或其他正整数: 这允许您明确定义 Tab 键的导航顺序。tabindex="1"的元素将首先获得焦点，然后是tabindex="2"的元素，以此类推。 不建议使用正整数的tabindex值，因为它会破坏预期的 Tab 键顺序，并使键盘导航难以预测，尤其是对于使用屏幕阅读器的用户。 尽量只使用tabindex="0"和tabindex="-1"。
一些使用场景：
-
使非交互式元素可交互： 您可以使用
tabindex="0"使通常不可聚焦的元素（如<div>或<span>）可聚焦，例如，如果您想将键盘事件附加到这些元素上。 -
创建自定义 Tab 顺序： 虽然不推荐，但您可以使用正整数
tabindex值来创建自定义 Tab 顺序。 -
从 Tab 顺序中移除元素： 使用
tabindex="-1"可以将元素从 Tab 顺序中移除，例如，如果您有一个在特定上下文中不应获得焦点的元素。 -
改进可访问性：
tabindex属性对于创建可访问的 Web 应用程序至关重要，因为它允许键盘用户与所有交互式元素进行交互。 -
动态更改 Tab 顺序： 您可以使用 JavaScript 动态更改
tabindex值，以响应用户交互或其他事件。
示例：
<div tabindex="0">可通过 Tab 键聚焦的 div</div>
<button>可通过 Tab 键聚焦的按钮</button>
<span tabindex="-1" id="off-tab">无法通过 Tab 键聚焦，但可以通过 JavaScript 聚焦的 span</span>
<a href="#off-tab">聚焦到 span</a>
<div tabindex="2">不推荐：使用正整数 tabindex</div>
<div tabindex="1">不推荐：使用正整数 tabindex</div>
在这个例子中，div、button 和两个带有正整数 tabindex 的 div 都可以通过 Tab 键聚焦。带有 tabindex="-1" 的 span 不能通过 Tab 键聚焦，但可以通过链接聚焦。 注意，即使第二个带有正整数 tabindex 的 div 的值较小，带有 tabindex="1" 的 div 会先获得焦点，这突出了为什么不推荐使用正整数 tabindex 值。
总之，tabindex 属性是一个强大的工具，可以控制键盘焦点，并在正确使用时可以极大地提高 Web 应用程序的可访问性和可用性。 尽量坚持使用 tabindex="0" 和 tabindex="-1"，以避免创建混乱和难以访问的 Tab 顺序。