hidden是布尔属性，存在即生效，值无关紧要；contenteditable只认"true""false"和空字符串；data-*属性命名与JS读取需严格匹配驼峰规则。
id 和 class 写错一个字符，JS 就选不到元素；hidden 写成 hidden="false" 依然隐藏；contenteditable 设为 "off" 完全无效——全局属性不是“随便加就起作用”的装饰，而是有严格语法边界的运行时开关。
布尔属性：存在即生效，值无关紧要
像 hidden、autofocus、disabled（虽非全局但同理）这类布尔属性，只要出现在标签里，浏览器就按 true 处理，不管值是什么：
-
hidden、hidden=""、hidden="false"、hidden="0"效果完全一样：元素不可见且不参与渲染流 -
autofocus在页面加载时自动聚焦，但同一页面只能有一个生效（后续的会被忽略） - 误写成
contenteditable="off"或contenteditable="0"会触发默认行为（可编辑），因为只有"true"和"false"是合法枚举值
枚举属性：只认规范定义的几个字符串值
如 autocapitalize、autocorrect、enterkeyhint，它们的值必须是 HTML 规范明确定义的几个之一，否则会被忽略或降级为默认行为：
-
autocapitalize="sentences"有效；autocapitalize="sentence"（少 s）或"first"无效，退回到浏览器默认策略 -
autocorrect="on"和autocorrect=""（空字符串）都启用自动更正；autocorrect="true"不是标准值，部分浏览器当on，部分直接忽略 -
enterkeyhint="search"会让虚拟键盘回车键显示放大镜图标；写成"find"或"query"没效果，仍显示默认回车符号
data-* 属性：命名和读取规则必须严格匹配
自定义数据不是“随便起名+随便读”，浏览器在解析时会做自动转换：
立即学习“前端免费学习笔记（深入）”；
- HTML 中写
data-user-id="123"，JS 中必须用element.dataset.userId访问（连字符转驼峰，首字母小写） -
data-1st-place="gold"在所有现代浏览器中都会被忽略——数字开头的 key 不进dataset -
data-MyKey="value"在 IE11 中变成dataset.mykey（全小写），Chrome/Firefox 则是dataset.myKey（保留大写） - 不要存对象或数组：
dataset只接受字符串；想存结构化数据，得自己JSON.stringify()+JSON.parse()
容易被忽略的语义陷阱
很多属性看似“写了就行”，但实际影响布局、无障碍、甚至 SEO：
-
id值重复会导致document.getElementById()只返回第一个匹配元素，而 CSS#id选择器仍会命中全部——调试时 JS 找不到、样式却生效，非常难排查 -
class="btn primary"必须用引号包裹，否则primary被当成独立文本节点丢弃 -
lang缺失会使屏幕阅读器发音错误（比如把中文当英文读），dir="rtl"没配lang="ar"可能导致标点方向混乱 -
title在移动端 Safari 中基本不显示，别把它当主要提示手段；它也不是 ARIA 替代品，不能解决可访问性核心问题
