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