html id的作用

2025-09-13 阅读 89 评论 0

摘要：1. 唯一标识元素
每个 `id` 在同一个 HTML 文档中必须是唯一的，用于精准定位特定元素。
2. CSS 样式化
通过 `id` 选择器为特定元素定义专属样式：
css
header

1. 唯一标识元素

每个 `id` 在同一个 HTML 文档中必须是唯一的，用于精准定位特定元素。

通过 `id` 选择器为特定元素定义专属样式：

css

html id的作用

header { background-color: f0f0f0; }

通过 `document.getElementById` 直接访问元素：

javascript

document.getElementById('submit-btn').addEventListener('click', handleSubmit);

创建页面内导航链接：

html

...

用 `label` 的 `for` 属性绑定表单元素：

html

用户名：

唯一性：重复的 `id` 会导致脚本和样式异常

命名规范：建议使用字母开头，可包含连字符（`-`）和下划线（`_`）

优先级：在 CSS 中 `id` 选择器优先级高于 class 选择器（1-0-0 vs 0-1-0）

| | id | class |

|-|||

| 唯一性 | 唯一 | 可重复使用 |

| CSS 选择器 | `id` | `.class` |

| 典型用途 | 精准定位单个元素 | 样式分组复用 |

合理使用 `id` 可以提升代码可维护性和操作效率，但应避免滥用导致代码冗余。

标签：作用 html