HTML id 属性

HTML 的 id 属性为文档中的元素提供了一个唯一的名称。这个 ID 可以被 CSS 和 JavaScript 识别，从而可以准确地定位元素，进行样式设置和行为控制。

ID 在整个 HTML 文档中必须是唯一的。同一个 ID 不能使用两次。ID 是一个全局属性，即它可以应用于任何 HTML 元素。ID 值是区分大小写的。有一些命名约定需要遵守

• 必须至少有一个字符
• 不能以数字开头
• 不能包含空格字符

语法

在 CSS 中使用 id

id 在 CSS 中最常见的应用之一就是为某个特定、特殊的元素设置样式。

语法

注意：使用哈希符号 (#) 和 ID 值来定位元素。

示例

输出

Paragraph will appear with yellow background, bold text, and centred alignment.

说明

具体来说，id="highlight" 的元素可以使用 #highlight { … } 选择器进行样式设置，这展示了 CSS 中 ID 选择器的精确性。

在 JavaScript 中使用 id

JavaScript 鼓励通过 ID 属性来访问 DOM (Document Object Model) 变量中的元素。

语法

示例

输出

Upon clicking the button, the heading text updates to: "Hello, World!"

说明

脚本会选取 ID 为 "message" 的元素，并使用 innerHTML 来更新它。

id 与 class 属性的区别

尽管 id 和 class 都可以用于定位元素，但两者在以下方面存在根本性差异：

注意：ID 最适合用于不寻常的元素（例如，主导航栏），而 class 则非常适合需要为多个项目应用相似样式的场景。

HTML 书签 (片段导航)

ID 值也可以用来指定页面锚点——这些被称为书签或片段标识符。

语法

示例

输出

Clicking the link scrolls to the heading marked with id="intro".

说明

锚点 (#intro) 用于内部导航，即在同一页面内，因为它指向具有该 ID 的元素。

最佳实践

您应该始终为 ID 值加上引号（例如，id="myId"）。虽然一些浏览器仍然会接受未加引号的值，但加上引号会更可靠，并能避免意外的复杂情况。同样，不要以数字开头（例如 id="item_one"），因为在 HTML 中这不是一个有效的 ID 语法。接下来重要的一点是避免在同一页面上重复使用 ID。

在某些情况下，浏览器可能只会采用 ID 的最后一个实例，这在 ID 重复使用时可能导致不一致或不可预测的行为。另外，请记住 ID 经常用于 URL 中进行导航，被称为 #idValue，并且可以通过 CSS 的 :target 伪类进行样式设置或操作。

高级用法示例

1. 滚动到视图 (JavaScript)

示例

输出

By clicking the button, the page scrolls down to the element with the id="sectionA".

说明

scrollIntoView() 允许直接跳转到由 ID 定位的元素。

2. 使用 CSS :target 高亮显示目标元素

示例

输出

By clicking the link, the id="part1" is highlighted specially.

说明

CSS 选择器 :target 用于样式化 URL 片段中的元素。

3. 使用 id 进行表单标签关联

ID 属性在 HTML 表单中也非常有用，它可以将 <label> 与配对的 <input> 关联起来。这提高了可访问性和可用性，因为一旦点击标签，焦点就会转移到相关的输入框。

示例

输出

The text label Email Address: is also a hyperlink, and when clicked, it will automatically focus the email input field.

说明

在这里，for 属性与 input 的 id (id="email") 相同。这对屏幕阅读器特别有帮助，并让表单更易用。

要点总结

HTML id 属性允许在一个网页中唯一地标识一个元素。它对于与 CSS 和 JavaScript 进行正确的交互非常重要。因为它必须是唯一的，所以不能在两个元素上使用相同的 ID；否则，可能会导致不可预测的行为。

在命名 ID 时必须遵守一些约定：ID 名称区分大小写，不能包含空格，ID 名称不应以数字开头。将 ID 值加上引号也是一个好习惯。ID 属性的典型用途是应用特定样式、启用脚本功能以及制作页面内导航按钮或书签。

结论

在前端开发方面，HTML 中的 id 属性无疑是至关重要的。它精确地控制 CSS 样式和 JavaScript 操作，并能实现片段链接之间的流畅跳转。ID 属性是一个有价值的功能，对于网页开发者来说，正确使用它（遵循规则、保持唯一性、采用现代实践，例如 :target 或 scrollIntoView()）至关重要。