冗余应优先删除：无属性且不影响布局的、连续多层仅含一个子节点的、仅撑高或清除浮动的；用语义化标签替代，js动态插入需结构可控，组件化是去冗余底线。
怎么一眼识别该删哪层 <div>
<p>打开浏览器开发者工具，点开“Elements”面板，把鼠标悬停在某个 <code><div> 上——如果它没 class、没 id、没 style、没事件监听、没 <code>data- 属性，且子元素直接能被父容器或 CSS 正确布局，那它大概率就是冗余的。
常见误判点：有人以为“这个 <div> 用来居中”，其实用 <code>display: flex 或 text-align: center 就够了；还有人留着它“方便以后加动画”，但没加之前它就是纯负担。
- 优先删掉连续两层以上、仅含一个子节点的
<div>（如 <code><div><div><p>内容</p></div></div>） - 删掉只起“撑开高度”作用的空
<div>，改用 <code>min-height或padding - 删掉仅用于
class="clearfix"的<div>，改用 <code>overflow: hidden或伪元素清除浮动语义化标签不是加分项，是替代方案
别把
<header></header>、<nav></nav>、<main></main>当成“锦上添花”，它们是直接替换多层<div> 的刚需工具。比如导航菜单，传统写法常是： <pre class="brush:php;toolbar:false;"><div class="header"> <div class="container"> <div class="nav-wrapper"> <ul class="nav">...</ul> </div> </div> </div></pre> <p>换成语义化后，三层 <code><div> 可压成一层：<code><nav><ul>...</ul></nav>。浏览器默认样式支持、屏幕阅读器可识别、CSS 选择器也更短。-
<section></section>替代<div class="section">，尤其当内部有 <code><h2></h2>～<h6></h6>时 -
<figure></figure>+<figcaption></figcaption>替代图文混排的<div> <img><div>说明文字</div> </div> - 用
<aside></aside>而非<div class="sidebar">，明确表达“附属内容”语义 <h3>JS 动态插入时，别让嵌套失控</h3> <p>写 <code>innerHTML += '...'是嵌套爆炸的起点。每次拼接都可能无意多包一层<div>，而且 XSS 风险和重排开销都会叠加。 <p>真实场景里，比如渲染一个卡片列表，错误写法：</p> <pre class="brush:php;toolbar:false;">list.innerHTML += '<div class="card"><div><div> <h3>' + title + '</h3> <p>' + desc + '</p> </div></div></div>';</pre> <p>正确做法分三步：创建元素、设内容、挂载。</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a> <p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p> </div> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul><li>用 <code>document.createElement('article')代替最外层<div class="card">，语义更准 <li>用 <code>textContent设标题和描述，杜绝 XSS - 用
appendChild()逐层挂载，结构清晰可控；必要时用DocumentFragment批量插入 - 自定义标签名必须含短横线，如
<site-header></site-header>，否则customElements.define()会静默失败 -
<template></template>里不能放<script></script>或<style></style>，得用 JS 注入或adoptedStyleSheets - Shadow DOM 默认
mode="closed"，外部 CSS 进不去——要继承全局样式，得显式写{ mode: 'open' }
若必须解析 HTML 字符串（如 CMS 富文本），务必走
new DOMParser().parseFromString(html, 'text/html')，再取body.firstChild，而不是直接塞进innerHTML。组件化不是选修课，是去冗余的底线
如果你的项目有 3 个以上页面共用同一段结构（比如页头、页脚、侧边栏），硬拷贝就是技术债。原生 HTML 不支持
include，但 Web Components 是唯一零构建、零框架的解法。关键约束必须记牢：
最容易被忽略的是：Web Components 不解决“逻辑复用”，只解决“结构复用”。按钮点击行为仍得在组件内部用
this.shadowRoot.addEventListener()绑定，不能靠 document 全局监听。 -
