应使用语义化标签替代无意义的<div>嵌套，优先选用<header><nav><main><section><article><footer>等；避免冗余标签、废弃属性及HTML字符串拼接，采用DOM API、Web Components或模板引擎实现复用。
用语义化标签代替无意义的 <div> 嵌套
很多页面结构里塞了一层又一层 <div class="wrapper">，只为控制样式或逻辑分组，但这些容器既不传达含义，也不参与交互。浏览器渲染、CSS 选择器匹配、辅助技术解析时都要多走一遍 DOM 节点，纯属拖累。
常见错误现象：一个按钮被包在 <div><div><div><button>提交</button></div></div></div> 里；导航菜单外裹三层 <div>，实际只需 <nav> + <ul>。
- 优先使用
<header>、<nav>、<main>、<section>、<article>、<footer>等语义化标签，它们自带层级和含义，无需额外 class 标识 - 当真需要包裹（比如为了 flex 布局），先确认能否用
display: contents让父元素不产生真实 DOM 节点 - 模板引擎（如 Nunjucks）或框架（如 Alpine.js）中，避免为
x-if或x-for强行套<div>—— 改用<template>标签作为逻辑容器，它不会渲染成真实节点
禁止用 JS 拼接 HTML 字符串生成结构
手写 innerHTML = '<div><p>' + title + '</p></div>' 看似快，实则埋下三重隐患：XSS 风险、DOM 更新不可控、结构无法复用。
使用场景包括动态列表渲染、表单组装、弹窗内容注入等——这些本该由 DOM API 或现代方案接管。
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 简单插入文本内容，一律用
textContent，不是innerHTML - 需创建多个嵌套节点时，用
document.createElement()+appendChild()显式构建，哪怕多写几行也比字符串拼接清晰可靠 - 若必须解析 HTML 片段（如从 CMS 获取富文本），改用
new DOMParser().parseFromString(html, 'text/html')，再取body.firstChild，避免直接信任字符串 - 在 React/Vue/Svelte 等框架中，绝对不要在
render或模板里拼 HTML 字符串——JSX 和响应式模板天然规避了深层嵌套失控
删掉所有“看起来有用、其实没意义”的标签和属性
冗余不是指功能重复，而是指对渲染、语义、可访问性、SEO 或维护毫无贡献却长期滞留的代码。这类代码往往来自所见即所得编辑器、历史复制粘贴、或过时的兼容写法。
典型例子：<font face="宋体">（已废弃）、<b><i><u> 堆叠、<div style="clear:both"></div>（应改用 overflow: hidden 或 ::after 清除浮动）、空 <div></div> 占位。
- 移除所有已废弃的 HTML4 标签（
<font>、<center>、<u>等），用 CSS 替代视觉表现 - 检查每个
<img>是否都有alt属性；没有替代文本的图，考虑是否真该出现在 HTML 中（比如仅作装饰的背景图应走 CSS） - 删除无作用的 class 名（如
class="clearfix"但对应 CSS 已删）、重复的id、未绑定事件的onclick空值 - 避免用
<br>换行代替<p>或margin—— 它是换行符，不是布局工具
组件复用不能靠复制粘贴，但原生 HTML 本身不支持 import
这是最容易被忽略的结构性冗余来源：10 个页面里一模一样的 header、footer、侧边栏，各自 copy-paste 一份。改一处，漏八处，连 diff 都难对齐。
原生 HTML 没有 @import、<include> 或模块机制，硬写等于主动放弃可维护性。
-
<iframe src="header.html">是反模式：破坏 SEO、隔离样式、阻断 JS 上下文、滚动错位 -
document.write()已被现代浏览器警告废弃，且会清空整个文档流，不可控 - 真正可行的零构建解法只有 Web Components：
customElements.define()注册自定义标签，配合<template>和 Shadow DOM，浏览器原生支持，无需打包 - 若项目允许轻量构建，用 EJS/Nunjucks 的
<% include('header.ejs') %>或 Vite 的import html from './header.html?raw'更安全可控
冗余 HTML 往往不是写多了，而是没想清楚“这段结构到底承担什么职责”。删掉一个 <div> 很容易，但判断它该不该存在，需要同时理解语义、样式边界、JS 作用域和可访问性要求——这才是最难也最值得花时间的地方。
