data-* 属性仅存储字符串，不解析json、不自动转类型；dataset返回值恒为字符串，需手动json.parse()或类型转换，连字符键名自动转驼峰，复杂数据应优先用id查表而非存于dom。
data-* 属性不是配置容器，只是字符串载体；它不解析、不校验、不自动转类型，所有结构化数据必须手动处理。
data-* 的本质是字符串键值对，不是 JSON 解析器
浏览器把 data-config='{"size":"lg","mode":"dark"}' 当作纯文本存入 DOM，element.dataset.config 返回的仍是该字符串，不会自动 JSON.parse()。强行当作对象用会报 TypeError: Cannot read property 'size' of undefined。
- dataset 读取时自动将连字符转驼峰：
data-api-url→dataset.apiUrl，但值仍是字符串 - 含空格、引号、斜杠等特殊字符时，HTML 转义可能破坏 JSON 格式（如
'{"msg":"he"ll<o>）</o> - 服务端渲染模板（如 Django、Jinja）中直接插变量时，必须确保 JSON 字符串已
escape，否则生成非法 HTML
button 和 option 的 value 属性不能替代 data-*
value 是表单语义属性，只参与提交流程，且强制为字符串。试图塞对象只会得到 "[object Object]"，和 data-* 完全无关。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
<button value='{"x":1}'></button>→btn.value是字符串"{"x":1}"，不是对象 -
<option value="user-123"></option>比<option value='{"id":123,"name":"Alice"}'></option>更安全可靠 - 若需关联复杂数据，用
value做 ID，再在 JS 中查表：const users = { "user-123": { id: 123, name: "Alice" } }
React/Vue 中不要用 props 直传对象到原生元素
像 <div airport="{airport}"> 这种写法在 React 中会被忽略——原生 DOM 不识别非标准属性，<code>event.target.airport 永远是 undefined。
- 必须显式映射为
data-属性：<div data-airport-id="{airport.id}" data-airport-name="{airport.name}"> <li>事件中读取：<code>const id = parseInt(event.target.dataset.airportId)（注意 dataset 键名自动小驼峰） - 避免在 dataset 中存大量字段；优先用 ID + 外部数据源查表，减少 DOM 体积和序列化开销
- 短配置走 URL：
location.href = "page.html?theme=dark&lang=zh"，用new URLSearchParams(location.search)解析 - 长配置或敏感项用
sessionStorage：sessionStorage.setItem("config", JSON.stringify(obj))，目标页读取后立即removeItem - Cookie 不推荐：大小限制 4KB，每次请求自动携带，有性能与安全风险
跨页面传递配置？别依赖 data-*，改用 URL 或 storage
data-* 只存在于当前页面 DOM 树，刷新即丢。想让目标页拿到配置，得走持久化路径。
真正容易被忽略的是 dataset 的类型陷阱——它永远返回字符串，哪怕你写的是 data-count="42"，读出来也是 "42"，不是数字。任何计算或比较前都得手动转换，否则 "42" === 42 是 false。
