div元素无语义，功能全靠属性扩展；id必须全局唯一且不能数字开头，class可多值复用；data-*需连字符命名并注意驼峰读取；hidden、tabindex、lang等属性影响渲染与无障碍，使用须谨慎。
div 元素本身无语义、不自带行为，所有功能扩展都依赖全局属性。直接用 class 或 id 是安全的；但像 data-*、hidden、tabindex 这类属性，稍不注意就会触发隐藏 bug 或无障碍问题。
class 和 id：最常用，但命名和复用有隐性成本
两者都能被 CSS 和 JavaScript 读取，但语义和约束完全不同：
-
id必须全页面唯一，且不能以数字开头（<div id="1section"> 是无效的）；JS 中用 <code>document.getElementById("header")取值快，但滥用会导致维护困难 -
class支持多个值（class="card active highlight"），适合状态切换；但若只用它做 JS 选择器（比如document.querySelector(".toggle-btn")），一旦样式改名，脚本就断 - 推荐组合用法：
<div id="user-panel" class="panel is-collapsed"> —— <code>id定位，class控制状态和样式data-* 属性：存数据方便，但读取方式容易出错
data-*是div上最灵活的数据载体，但 JS 访问时大小写规则常被忽略：- HTML 中写
data-user-id="123"，JS 中必须用dataset.userId（驼峰化，连字符转大写首字母） - 若写成
data-userID="123"，JS 里dataset.userid或dataset.userID都取不到 —— 浏览器只认连字符命名 - 值始终是字符串，
data-count="0"读出来是"0"，不是数字，需手动parseInt() - 别存敏感数据（如 token），
data-*会暴露在 DOM 中，可被任意脚本读取
hidden、tabindex、lang：看似简单，实则影响渲染和可访问性
这些属性不改变视觉样式，但会实质性改变浏览器行为：
-
hidden是布尔属性，写<div hidden> 即生效；但若用 JS 动态设 <code>el.hidden = false，它只是移除该属性，不会恢复原本的display值（比如原为display: flex，显示后可能变成display: block） -
tabindex="0"让div可聚焦，但没配套键盘事件（keydown）或role属性时，屏幕阅读器可能完全忽略它 -
lang="zh"写在<div lang="zh">你好</div>里，会影响拼写检查、语音合成语调，但若父元素已声明，子div的lang仅局部覆盖，别指望它全局生效
真正难的不是写对属性，而是判断哪个该用、哪个不该用。比如用
title给div加提示，鼠标悬停能看见，但手机上基本无效；又比如contenteditable="true"让div可编辑，但默认不触发input事件，得监听DOMSubtreeModified或用MutationObserver才能可靠捕获变化。 - HTML 中写
