必须用语义化标签（section/article/aside）切分模块、contain隔离渲染、form属性解耦表单，否则修改易引发连锁布局错误。

复杂 HTML 网页不能靠“通读全文再改”，必须按语义边界切块、隔离修改、独立验证。

用 section、article、aside 划出可编辑单元

浏览器不会自动识别“这块是用户管理表单”“那块是统计图表”，你得用语义化标签显式圈出每个功能区。否则改一个按钮的 margin，可能意外撑开整个侧边栏——因为没容器约束，CSS 会向上冒泡影响父级 div。

• 每个模块必须包裹在独立的 section 或 article 中，避免裸 div 堆叠
• aside 专用于辅助内容（如筛选条件、操作日志），不参与主流程，样式和 JS 逻辑必须与 main 解耦
• 禁止跨模块共享 class 名，比如 .btn 在用户列表和日志导出里同时存在，后期改颜色就会互相覆盖
• 检查 DOM：右键“检查元素”，确认每个功能区顶层标签有明确语义，且没有嵌套过深（超过 4 层 div 就该拆）

表格与表单共存时，别动 里的

HTML 规范明令禁止在

内部直接写

。浏览器解析时会自动闭合

，导致 document.getElementById("edit-form").elements 拿不到任何字段——不是兼容性问题，是解析规则本身。

• 正确做法：把
  放在

外面，所有可编辑单元格的 加上 form="edit-form"

内联编辑场景下，每行末尾的提交按钮用 ，而非绑定 click 事件手动收集数据

如果某列需下拉选择， 同样要带 form="edit-form"，否则 submit 时不提交该字段

验证方式：打开控制台，执行 document.querySelector("#edit-form").elements.length，值应等于你加了 form 属性的控件总数

修改前先加 contain: layout style paint 隔离渲染影响

没加 containment 的模块，改一行 CSS 可能触发整页重排。尤其当页面含 ECharts 图表、虚拟滚动列表或大量 position: absolute 元素时，DOM 变动会波及无关区域，造成滚动卡顿或布局跳变。

302.AI

302.AI是一款按量付费的一站式 AI 模型、应用和 API 资源平台。

下载

• 对每个 section 或 article 添加 style="contain: layout style paint;"，这是最轻量的隔离手段
• 不要只加 contain: strict——它会禁用 transform 动画，导致折叠面板展开/收起卡顿
• 若模块内含 iframe 或第三方 widget，必须额外加 content-visibility: auto，否则 containment 不生效
• 验证是否生效：打开 Chrome DevTools → Rendering → 勾选 “Layer Borders”，被隔离的模块应有独立图层边框

响应式断点别按设备宽度写，按内容溢出点设

写 @media (max-width: 768px) 很方便，但实际问题常出现在 623px 或 841px——比如搜索框文字换行、表格列被压缩到看不见、卡片高度突然塌陷。硬套固定断点只会让调试时间翻倍。

• 打开浏览器开发者工具，用“Toggle device toolbar”拖动宽度滑块，观察哪个像素值开始出现错位或截断
• 在那个宽度附近设断点，例如 @media (max-width: 625px)，并只改该模块的 grid-template-columns 或 flex-wrap
• 避免在媒体查询里改全局字体大小或 padding，这会让其他模块布局连锁错乱；只调整当前模块容器的尺寸策略
• 用 min-content / max-content 替代固定 px 值，比如表格列宽设为 minmax(min-content, 1fr)，比 150px 更抗挤压

真正难的不是写新功能，而是改旧代码时搞清“这一块到底归谁管”。语义标签是契约，contain 是护城河，form 属性是连接线——缺一不可。漏掉任意一层，下次修改就可能从修按钮变成救火。