<div tabindex="1">是HTML中的一個屬性，它用于指定頁面上可以獲得焦點的元素順序。當用戶通過鍵盤進行頁面導航時，程序會按照 tabindex 屬性值從小到大的順序依次將輸入焦點設置到對應元素上。這對于那些依賴鍵盤進行導航和交互的用戶非常重要。下面的幾個案例將詳細解釋和說明這個屬性的用法。
第一個案例：

在下面的代碼片段中，我們給兩個按鈕設置了不同的 tabindex 值：

<button tabindex="1">按鈕A</button>
<button tabindex="2">按鈕B</button>
<button>按鈕C</button>

當用戶使用 Tab 鍵切換焦點時，會聚焦到 tabindex 為 1 的按鈕A，然后按 Tab 鍵會聚焦到 tabindex 為 2 的按鈕B。如此反復，直到所有擁有 tabindex 屬性的元素都被遍歷過。

第二個案例：

除了使用整數值外，tabindex 屬性還可以設置為 -1，表示焦點不會通過鍵盤導航進入該元素，但是可以通過編程設置焦點到該元素上。

<input type="text" tabindex="-1" value="使用編程設置焦點">

在這個例子中，文本輸入框雖然是可用的，但用戶無法通過鍵盤導航到該輸入框。但是，當我們使用 JavaScript 或其他編程語言設置焦點時，該輸入框仍然可以獲得焦點。

第三個案例：

如果我們給多個元素設置了相同的 tabindex 值，它們在鍵盤導航中的順序將與它們在 HTML 文檔中的出現順序一致。

<h1 tabindex="1">標題一</h1>
<p>這是段落一。</p>
<h2 tabindex="1">標題二</h2>
<p>這是段落二。</p>

在這個例子中，焦點在標題一和段落一之間進行切換時，它們的順序與它們在文檔中的出現順序一致，先是標題一，然后是段落一。

一下，div 標簽的 tabindex 屬性使我們能夠為 HTML 元素定義鍵盤導航的順序。通過設置 tabindex 值，我們可以控制焦點的流動，為用戶提供更好的可訪問性和交互體驗。無論是為了實現頁面的可訪問性要求，還是為了提高用戶體驗，tabindex 屬性都是一個非常有用的工具。