应使用语义化标签替代无意义的嵌套，优先选用等；避免冗余标签、废弃属性及html字符串拼接，采用dom api、web components或模板引擎实现复用。

用语义化标签代替无意义的 <div> 嵌套 <p>很多页面结构里塞了一层又一层 <code><div class="wrapper">，只为控制样式或逻辑分组，但这些容器既不传达含义，也不参与交互。浏览器渲染、CSS 选择器匹配、辅助技术解析时都要多走一遍 DOM 节点，纯属拖累。 <p>常见错误现象：一个按钮被包在 <code><div><div><div><button>提交</button></div></div></div> 里；导航菜单外裹三层 <div>，实际只需 <code><nav></nav> + <ul></ul>。

• 优先使用 <header></header>、<nav></nav>、<main></main>、<section></section>、<article></article>、<footer></footer> 等语义化标签，它们自带层级和含义，无需额外 class 标识
• 当真需要包裹（比如为了 flex 布局），先确认能否用 display: contents 让父元素不产生真实 DOM 节点
• 模板引擎（如 Nunjucks）或框架（如 Alpine.js）中，避免为 x-if 或 x-for 强行套 <div> —— 改用 <code><template></template> 标签作为逻辑容器，它不会渲染成真实节点

  禁止用 JS 拼接 HTML 字符串生成结构

  手写 innerHTML = '<div><p>' + title + '</p></div>' 看似快，实则埋下三重隐患：XSS 风险、DOM 更新不可控、结构无法复用。

  使用场景包括动态列表渲染、表单组装、弹窗内容注入等——这些本该由 DOM API 或现代方案接管。

  • 简单插入文本内容，一律用 textContent，不是 innerHTML
  • 需创建多个嵌套节点时，用 document.createElement() + appendChild() 显式构建，哪怕多写几行也比字符串拼接清晰可靠
  • 若必须解析 HTML 片段（如从 CMS 获取富文本），改用 new DOMParser().parseFromString(html, 'text/html')，再取 body.firstChild，避免直接信任字符串
  • 在 React/Vue/Svelte 等框架中，绝对不要在 render 或模板里拼 HTML 字符串——JSX 和响应式模板天然规避了深层嵌套失控

  删掉所有“看起来有用、其实没意义”的标签和属性

  冗余不是指功能重复，而是指对渲染、语义、可访问性、SEO 或维护毫无贡献却长期滞留的代码。这类代码往往来自所见即所得编辑器、历史复制粘贴、或过时的兼容写法。

  典型例子：<font face="宋体"></font>（已废弃）、<b><i><u></u></i></b> 堆叠、<div style="clear:both"></div>（应改用 overflow: hidden 或 ::after 清除浮动）、空 <div></div> 占位。

  

  Article To Html

  文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

  下载
  • 移除所有已废弃的 HTML4 标签（<font></font>、<center></center>、<u></u> 等），用 CSS 替代视觉表现
  • 检查每个 <img> 是否都有 alt 属性；没有替代文本的图，考虑是否真该出现在 HTML 中（比如仅作装饰的背景图应走 CSS）
  • 删除无作用的 class 名（如 class="clearfix" 但对应 CSS 已删）、重复的 id、未绑定事件的 onclick 空值
  • 避免用 <br> 换行代替 <p></p> 或 margin —— 它是换行符，不是布局工具

  组件复用不能靠复制粘贴，但原生 HTML 本身不支持 import

  这是最容易被忽略的结构性冗余来源：10 个页面里一模一样的 header、footer、侧边栏，各自 copy-paste 一份。改一处，漏八处，连 diff 都难对齐。

  原生 HTML 没有 @import、<include></include> 或模块机制，硬写等于主动放弃可维护性。

  • <iframe src="header.html"></iframe> 是反模式：破坏 SEO、隔离样式、阻断 JS 上下文、滚动错位
  • document.write() 已被现代浏览器警告废弃，且会清空整个文档流，不可控
  • 真正可行的零构建解法只有 Web Components：customElements.define() 注册自定义标签，配合 <template></template> 和 Shadow DOM，浏览器原生支持，无需打包
  • 若项目允许轻量构建，用 EJS/Nunjucks 的 或 Vite 的 import html from './header.html?raw' 更安全可控

  冗余 HTML 往往不是写多了，而是没想清楚“这段结构到底承担什么职责”。删掉一个 <div> 很容易，但判断它该不该存在，需要同时理解语义、样式边界、JS 作用域和可访问性要求——这才是最难也最值得花时间的地方。</div>