id不能重复是因为html规范要求其全局唯一，浏览器虽不报错但getelementbyid()仅返回首个匹配元素，导致事件绑定、css样式、锚点跳转及无障碍访问等静默失效。
为什么id不能重复，但浏览器不报错？
因为HTML规范只要求id在文档内唯一，而浏览器解析器默认宽容——遇到重复id时，document.getElementById()只返回第一个匹配元素，后续逻辑可能静默失效。
常见错误现象：
- JavaScript中
getElementById("submit-btn")总拿到错误按钮 - CSS里
#modal-overlay样式只作用于首个同名元素 - 屏幕阅读器跳转到
id锚点时停在非预期位置
实操建议：
- 用
document.querySelectorAll('[id="xxx"]')快速检测重复 - 构建阶段加入ESLint规则
no-duplicate-id（需配合eslint-plugin-html） - 服务端渲染或模板引擎中，用变量拼接
id时加哈希后缀，如id="user-card--"
data-*属性怎么传复杂值才安全？
data-*只接受字符串值，直接赋{name: "Alice", age: 30}会自动转成[object Object]，JSON序列化是必要步骤，但要注意引号和编码。
使用场景：
- 服务端注入初始数据给前端组件
- 预加载配置，避免首屏后额外请求
- SSR/CSR混合项目中传递上下文
实操建议：
- 写入时用
JSON.stringify()，并用encodeURIComponent()包裹：<div data-config="%3Cjson-string%3E"> <li>读取时先<code>decodeURIComponent()</code>再<code>JSON.parse()</code>，必须加<code>try/catch</code> </li> <li>避免在<code>data-</code>里存函数、DOM引用、大型二进制数据——这些该走JS模块或API拉取</li> <h3> <code>contenteditable</code>启用后，为什么回车行为不一致？</h3> <p>不同浏览器对<code>contenteditable</code>的回车键处理逻辑差异极大：Chrome插入<code><div></div></code>，Firefox插入<code><br></code>，Safari则可能破坏嵌套结构。这不是bug，而是规范未强制统一。</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf"><img src="https://img.php.cn/upload/skill/000/000/081/178956546773641.jpg" alt="html-ppt-to-pdf" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="overflowclass">html-ppt-to-pdf</a> <p class="overflowclass">将使用 `<section class="slide">` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。</p> </div> <a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <p>容易踩的坑：</p> <ul> <li>用户按回车后光标消失或跳到顶部</li> <li>粘贴富文本时样式错乱或标签被过滤</li> <li>移动端输入法回车键变成“搜索”或“发送”，无法换行</li> </ul> <p>实操建议：</p> <ul> <li>禁用默认回车行为：<code>el.addEventListener('keydown', e => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); insertNewLine(el); } });</code> </li> <li>用<code>execCommand</code>已废弃，改用<code>Document.execCommand</code>替代方案（如<code>insertNode</code> + <code>setSelectionRange</code>）</li> <li>始终配合<code>spellcheck="false"</code>和<code>autocorrect="off"</code>减少干扰</li> </ul> <h3> <code>hidden</code>和<code>display: none</code>到底该选哪个？</h3> <p><code>hidden</code>是语义化隐藏，浏览器会跳过渲染且不占布局空间，同时辅助技术（如屏幕阅读器）默认忽略该元素；<code>display: none</code>只是视觉隐藏，仍存在于DOM树中，部分AT工具可能意外读出内容。</p> <p>性能与兼容性影响：</p> <ul> <li> <code>hidden</code>在IE11及更早版本不支持，需用<code>style="display:none"</code>降级</li> <li> <code>hidden</code>触发重排（reflow）比<code>visibility: hidden</code>轻，但比<code>opacity: 0</code>重</li> <li>动态切换时，<code>hidden</code>属性变更不会触发CSS transition，而<code>opacity</code>可以</li> </ul> <p>实操建议：</p> <ul> <li>纯功能隐藏（如暂未激活的侧边栏面板）优先用<code>hidden</code> </li> <li>需要过渡动画或保留焦点管理的场景，改用<code>aria-hidden="true"</code> + <code>opacity</code>/<code>transform</code> </li> <li>服务端渲染中，用<code>hidden</code>比内联<code>style</code>更利于缓存和CDN压缩</li> </ul> <p>真正难的是权衡：比如<code>data-</code>字段要不要校验格式，<code>contenteditable</code>要不要接管所有粘贴逻辑，<code>hidden</code>是否要搭配<code>inert</code>防交互穿透——这些没有银弹，得看具体交互深度和兼容底线。</p> </div>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
