data-* 语法与命名约定
了解有效的 data-* 属性名称及其用途
data-* 语法与命名约定 是 CoddyKit 上的免费 HTML Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。
复习：data-* 属性
数据属性（data-*）用于在 HTML 元素上存储自定义信息：
<div data-user-id="42" data-role="admin" data-active="true">
User Card
</div>有效的命名规则
data-* 属性的命名要求：
- 必须以
data-开头 - 后面至少跟一个字符
- 只能使用小写字母、数字、连字符、下划线、句点和冒号
- 不能包含大写字母（HTML 解析器会将属性转换为小写）
- 不能包含空格
命名约定
社区命名约定：
<!-- BEM-style: module__element--modifier -->
data-card="profile"
data-card-id="42"
data-card-state="expanded"
<!-- Descriptive: domain-concept -->
data-product-id="SKU-123"
data-analytics-event="click-cta"
data-feature-flag="dark-mode"多个数据属性
一个元素可以拥有任意数量的数据属性：
<button
type="button"
data-action="delete"
data-target-id="user-42"
data-confirm="true"
data-confirm-message="Delete this user permanently?"
>Delete</button>值始终是字符串
数据属性的值始终是字符串——请在 JavaScript 中解析它们：
const el = document.querySelector('[data-user-id]');
console.log(el.dataset.userId); // '42' (string)
console.log(typeof el.dataset.userId); // 'string'
// Parse to number:
const id = parseInt(el.dataset.userId, 10); // 42 (number)
// Parse to boolean:
const active = el.dataset.active === 'true'; // true (boolean)
// Parse to JSON:
const config = JSON.parse(el.dataset.config); // object在 data-* 中存储 JSON
将复杂数据存储为 JSON 字符串：
<div
data-config='{"theme":"dark","locale":"en-US","pageSize":20}'
id="app"
></div>
<script>
const el = document.getElementById('app');
const config = JSON.parse(el.dataset.config);
console.log(config.theme); // 'dark'
console.log(config.pageSize); // 20
</script>data-* 与自定义元素的比较
何时选择 data-*、自定义元素或 JavaScript 对象：
- data-* — 元素特有的元数据，可在 HTML 中查看，也可从 CSS 访问
- 自定义元素 — 具有封装行为的复杂可复用组件
- JavaScript Map/WeakMap — HTML 中不需要的数据；大型或复杂数据
框架中的 data-* 用法
框架对数据属性的常见使用方式：
<!-- Bootstrap: target collapsible elements -->
<button data-bs-toggle="collapse" data-bs-target="#menu">
Toggle
</button>
<!-- Alpine.js: component data -->
<div x-data="{ open: false }">
<!-- Stimulus: controller identification -->
<div data-controller="menu" data-menu-open-value="false">
<!-- Testing libraries: stable selectors -->
<button data-testid="submit-btn">Submit</button>可访问性与 data-*
数据属性不会被屏幕阅读器朗读——请勿将其用于可访问性信息：
<!-- BAD: accessibility info in data-* -->
<button data-label="Close dialog">×</button>
<!-- Screen reader does NOT read data-label -->
<!-- GOOD: use aria-label for accessibility -->
<button aria-label="Close dialog">×</button>性能注意事项
data-* 属性对性能的影响可以忽略不计：
- 读取 dataset 的速度很快（O(1)）
- 在数千个元素上大量使用 data-* 没有问题
- 在 data-* 中存储大型数据块（图像、大型 JSON）很浪费
- 使用 WeakMap 存储与 DOM 元素关联的大型 JS 对象
总结：data-* 最佳实践
data-* 最佳实践：
- 使用小写、连字符连接的名称
- 值始终是字符串——请根据需要解析
- 对于 JSON：JSON.stringify / JSON.parse
- 用于 CSS 或 JavaScript 所需的元数据
- 不能替代 ARIA 属性
- 请勿存储机密（可在 DevTools 中查看）
快速检查
dataset 始终将属性值返回为什么类型？
回顾：data-* 语法
data-* 命名要点：
- 格式：
data-[lowercase-name]="value" - 访问方式：
element.dataset.camelCaseName - 所有值都是字符串——请显式解析
- 对于复杂数据，请存储 JSON
- 使用小写，属性名中不得包含大写字母或空格
常见问题解答
「data-* 语法与命名约定」课时是免费的吗？
是的 — 「data-* 语法与命名约定」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。
「data-* 语法与命名约定」这节课中我会学到什么？
了解有效的 data-* 属性名称及其用途 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 HTML Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。
「data-* 语法与命名约定」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 HTML Academy 课中编写并运行代码吗？
能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。