哪些HTML元素可以获得焦点？

在HTML中，能够获取焦点的元素主要包括可交互的元素，以及通过特定属性设置可以获得焦点的其他元素。以下是一些常见的可以获得焦点的HTML元素：

1. 链接元素 (<a>)：当链接元素具有 href 属性时，它可以获得焦点。

   • 示例：<a href="https://www.example.com">访问网站</a>

2. 输入元素 (<input>)：除了 type="hidden" 的输入框外，大多数类型的 <input> 元素都可以获得焦点。

   • 示例：<input type="text" placeholder="请输入文字">

3. 按钮 (<button>)：所有的按钮元素默认都可以获得焦点。

   • 示例：<button>点击我</button>

4. 选择元素 (<select>)：下拉选择框可以获得焦点。

   • 示例：<select><option value="option1">选项1</option></select>

5. 文本区域元素 (<textarea>)：文本输入区域可以获得焦点。

   • 示例：<textarea rows="3">请输入内容</textarea>

此外，还有一些元素默认不可以获得焦点，但可以通过设置 tabindex 属性来使它们能够获得焦点。tabindex 属性可以设置为正数、零或负数：

• tabindex="0"：元素将按照文档流的顺序获得焦点。
• tabindex="1" 或更高的正数：元素可以获得焦点，并且可以自定义获得焦点的顺序。
• tabindex="-1"：元素可以通过编程方式获得焦点（比如使用 JavaScript），但不会通过键盘导航（如Tab键）获得焦点。

例如，一个不是默认可获得焦点的元素，比如 <div>，可以通过设置 tabindex 属性来获得焦点：

html
<div tabindex="0">现在我可以获得焦点了</div>

了解哪些元素可以获得焦点对于提高网站可访问性、提升用户体验等方面非常重要，特别是在处理键盘导航和表单控件时。这也帮助开发者更好地控制页面元素的交互性。