过度包装的HTML标签指无语义、无样式、无JS绑定的冗余容器，如连续三层空<div>；临时删除后视觉与交互无变化即可判定可删，需警惕无class/id/style且仅包单个语义标签的结构。
怎么判断哪些HTML标签是“过度包装”的
不是所有嵌套都该删，但
这种三层空容器，99%是过度包装。关键看两点：有没有语义、有没有样式或JS绑定。
用浏览器 Elements 面板右键「Delete element」临时删掉某层，页面视觉和交互没变化 → 可删。特别警惕这些信号：
- 连续多个
<div>无class、id、style，也未被 JS 通过querySelector匹配 -
<div>里只包一个<h1>或<p>，且父级没做布局控制（比如没设display: flex） - 注释写着
<!-- legacy wrapper for IE8 -->，而你项目最低支持 Chrome 110+
语义化标签替换时容易踩的坑把 <div class="header"> 换成 <header> 看似简单，但实际替换后常出问题：
- 原有 CSS 写的是
div.header，换成 <header> 后样式丢失 —— 得同步改选择器，或加 header.header 兼容
-
<main> 必须且只能出现一次，多处替换会触发 HTML5 验证警告，影响 SEO 和可访问性
-
<section> 不等于“随便一个区块”，它需要有标题（<h2> 或 <h3>），否则屏幕阅读器会跳过
- 别用
<article> 包用户评论列表 —— 它表示独立可分发的内容单元，评论更适合 <aside> 或普通 <section>
VSCode 正则批量清理冗余属性的实操要点
直接搜 align="[^"]*?" 并替换为空，看似快，但容易误伤。真正安全的做法是分步 + 预览：
立即学习“前端免费学习笔记（深入）”；
- 先禁用全局匹配，用
Ctrl+Shift+F（Win）或 Cmd+Shift+F（Mac）在当前文件夹搜 align=，确认是否真没业务逻辑依赖
- 删
border、cellpadding、cellspacing 时，正则写成 (border|cellpadding|cellspacing)="[^"]*?"，但仅对 <table> 标签生效 —— 别让它匹配到 <div border="0"> 这种非法用法
- 删空
class="" 或 id=""：搜 class\s*=\s*["']["']，但别动 class=" "（带空格），那可能是 JS 动态拼接用的占位符
- 每次点“全部替换”前，务必点右侧小箭头展开预览，至少扫三页匹配项 —— 有些
onclick="return false" 是表单防重复提交，不能删
模板语法残留和构建标记怎么安全清除
很多 HTML 文件混着 {{title}}、<!-- START: hero -->、<code>@@include 这类东西，它们不报错，但让代码不可维护。
- 搜索
{{、{%、<%=、<code>@@include，连同对应结束符（如 }}、%}）一并删除 —— 别留半个模板符号
-
<!-- START: ... --> / <!-- END: ... --> 块，如果构建流程没用 html-webpack-plugin 或 gulp-html-replace 处理它们，就整块删，包括换行
- 保留
<!--[if IE]>？不用。IE 已终止支持，Edge 默认 Chromium 内核，这类条件注释只剩干扰
- 删完立刻在真实设备上跑一遍回归测试 —— 某些 CMS 插件会靠注释标记注入内容，表面删了，实际导致后台编辑器失灵
最易被忽略的不是删什么，而是删完之后没人验证 JS 是否还找得到 DOM 节点。哪怕你只动了一个 <div id="app">，也要全局搜 getElementById("app") 和 querySelector("#app")，确认引用路径没断。
把 <div class="header"> 换成 <header> 看似简单，但实际替换后常出问题：
- 原有 CSS 写的是
div.header，换成<header>后样式丢失 —— 得同步改选择器，或加header.header兼容 -
<main>必须且只能出现一次，多处替换会触发 HTML5 验证警告，影响 SEO 和可访问性 -
<section>不等于“随便一个区块”，它需要有标题（<h2>或<h3>），否则屏幕阅读器会跳过 - 别用
<article>包用户评论列表 —— 它表示独立可分发的内容单元，评论更适合<aside>或普通<section>
VSCode 正则批量清理冗余属性的实操要点
直接搜 align="[^"]*?" 并替换为空，看似快，但容易误伤。真正安全的做法是分步 + 预览：
立即学习“前端免费学习笔记（深入）”；
- 先禁用全局匹配，用
Ctrl+Shift+F（Win）或Cmd+Shift+F（Mac）在当前文件夹搜align=，确认是否真没业务逻辑依赖 - 删
border、cellpadding、cellspacing时，正则写成(border|cellpadding|cellspacing)="[^"]*?"，但仅对<table>标签生效 —— 别让它匹配到<div border="0">这种非法用法 - 删空
class=""或id=""：搜class\s*=\s*["']["']，但别动class=" "（带空格），那可能是 JS 动态拼接用的占位符 - 每次点“全部替换”前，务必点右侧小箭头展开预览，至少扫三页匹配项 —— 有些
onclick="return false"是表单防重复提交，不能删
模板语法残留和构建标记怎么安全清除
很多 HTML 文件混着 {{title}}、<!-- START: hero -->、<code>@@include 这类东西，它们不报错，但让代码不可维护。
- 搜索
{{、{%、<%=、<code>@@include，连同对应结束符（如}}、%}）一并删除 —— 别留半个模板符号 -
<!-- START: ... -->/<!-- END: ... -->块，如果构建流程没用html-webpack-plugin或gulp-html-replace处理它们，就整块删，包括换行 - 保留
<!--[if IE]>？不用。IE 已终止支持，Edge 默认 Chromium 内核，这类条件注释只剩干扰 - 删完立刻在真实设备上跑一遍回归测试 —— 某些 CMS 插件会靠注释标记注入内容，表面删了，实际导致后台编辑器失灵
最易被忽略的不是删什么，而是删完之后没人验证 JS 是否还找得到 DOM 节点。哪怕你只动了一个 <div id="app">，也要全局搜 getElementById("app") 和 querySelector("#app")，确认引用路径没断。
