<p>全局属性看似合法却常被浏览器静默忽略：data-* 修改不触发框架更新、spellcheck需搭配移动端四件套、colspan值非法即失效、hidden="until-found"有特殊语义、title/lang/dir变更不影响UI。</p>
全局属性不是写了就一定生效——很多看似“合法”的写法，浏览器直接忽略，还不报错，导致行为和预期严重脱节。
data-* 属性改了但组件没更新？别怪框架，先看 dataset 机制
dataset 只读取元素初始化时的 data-* 值，且全部转成字符串。你用 el.setAttribute('data-count', '42') 改了值，el.dataset.count 确实会变成 "42"，但 React/Vue 这类框架若直接把它当响应式源，就会把数字 42 当成字符串 "42"，类型错判；更关键的是，它们通常不监听 DOM 属性变化，所以改完根本不会触发重渲染。
- JS 模板里拼接
data-id="${id}"时，id是null或undefined→ 实际生成data-id="undefined"，属性存在但值非法，dataset 读出来是空字符串 - SSR 渲染的 HTML 已带
data-config='{"theme":"dark"}'，客户端 JS 再调setAttribute覆盖，但框架没订阅变更，首屏状态和 JS 状态就对不上 - 想让自定义元素响应
data-变化，必须用customElements.define+static get observedAttributes()，且声明时去掉data-前缀（比如监听"theme"，不是"data-theme"）
spellcheck="false" 还标红？移动端四件套缺一不可
spellcheck="false" 单独加在容器上基本无效，尤其在 iOS Safari 上，autocorrect="off" 会优先接管拼写逻辑，让 spellcheck 形同虚设。macOS 系统级拼写检查开着，前端所有设置也会被绕过。
- textarea 必须同时带四件套：
spellcheck="false"、autocorrect="off"、autocapitalize="none"、inputmode="verbatim" - Monaco/CodeMirror 这类编辑器，真实输入层是隐藏的
<textarea>（常带role="textbox"），给外层<div id="editor">加属性完全没用 -
<input type="email">、<input type="number">、<input type="password">天然无视spellcheck，DOM 解析时就被静默丢弃 - 验证是否真生效：输一个明显错词（如
recieve），看有没有红色波浪线，右键有没有“更正为…”菜单
colspan="2" 不跨列？浏览器根本不认这个值
colspan 值非法时，浏览器静默忽略，不警告、不报错，单元格就老老实实占 1 列。最常见的是模板拼接出 colspan="undefined"，或手误写成 colspan="2px"、colspan="-1"、colspan=""。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 必须是纯正整数字符串：
colspan="3"合法，colspan="1.5"、colspan="two"、colspan="0"全部失效 - 在控制台运行
document.querySelector('td').colSpan，返回0或NaN就说明值非法 - table-layout: fixed 下，
<td colspan="2">的宽度由它所跨的两列原始宽度决定，单独设width基本无效；要调宽度，得改第一行对应<col>或删掉table-layout: fixed - 别在
<tr>上写colspan——它只属于<td>和<th>，写错位置等于白写
hidden 属性删了但元素还在？检查 hidden="until-found" 的语义陷阱
hidden 是布尔属性，存在即隐藏（等价于 display: none）。但 hidden="until-found" 是个特例：它不隐藏内容，而是启用 content-visibility: hidden，元素仍参与布局，只是内容不可见，直到被查找（如 Ctrl+F）命中才显示。
- 旧版 Safari/IE 不支持
hidden="until-found"，会退化为普通hidden，导致意外隐藏 -
class和hidden都能控制显隐，但class更可控：用element.classList.toggle('is-hidden')比反复操作hidden属性更安全 -
title、lang、dir这类全局属性改了，既不触发重绘也不影响可访问性树更新，纯粹是元信息，别指望靠它们驱动 UI 变化
真正容易被忽略的，是那些“浏览器不报错但行为彻底偏离”的场景：比如 colspan 值非法、data-* 被当成响应式源、spellcheck 在移动端被 autocorrect 覆盖——它们共同点是：HTML 写得看起来完全正确，但运行时就是不按你想的来。
