文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
html是定义网页内容结构与语义的标记语言规范，非架构标准；doctype声明决定解析模式，head与body为强制逻辑分区，标签嵌套、属性书写等细节直接影响语义、可访问性与渲染一致性。
HTML 不是“架构标准”，而是定义网页内容结构与语义的标记语言规范。 它不规定系统级架构、模块通信或服务分层，只管“这段文字是不是标题”“这个区域是不是导航栏”“这张图缺了替代文本会怎样”。混淆这点，容易在工程设计中把语义结构和应用架构混为一谈。
DOCTYPE 声明决定浏览器用哪种规则解析 HTML
没有 ，或写错（比如漏空格、大小写混乱、多加斜杠），浏览器可能进入怪异模式（Quirks Mode）。这时 CSS 盒模型、<code>getBoundingClientRect() 行为、甚至 document.body 的尺寸计算都可能和预期不一致。
是唯一推荐写法，大小写不敏感但必须全小写以保团队统一- 旧式声明如
已无必要，也不再被现代工具链支持 - 它不触发任何网络请求，也不影响 DOM 构建速度，但缺失会导致整个渲染流程降级
head 和 body 是强制存在的逻辑分区，不是可选容器
必须出现在 内且在 之前； 不能为空——哪怕只放一个 <div> 或注释也算合法。W3C 验证器会直接报错 <code>Element “body” not allowed as child of element “html” in this context 如果顺序错乱或缺失。
-
<meta charset="utf-8">必须是中第一个标签（或紧随<title></title>后），否则中文可能乱码 -
<title></title>是的直系子元素，不可嵌套在<div> 或其他标签里 <li>外部 CSS 应放在 <code>，JS 脚本建议放在前——这不是“最佳实践”的客气话，而是避免阻塞 DOM 解析的实际需要 - 块级元素（如
<div>、<code><p></p>）不能直接放在<p></p>内部 -
<li>必须是<ul></ul>或<ol></ol>的直接子元素，中间插个<span></span>就会让列表语义断裂 - 自闭合标签如
<img>、<input>后面不加/>完全合法（HTML5），但加了也不会错；而<br>写成<br>反而会被当成两个换行 -
class值应语义化（如js-modal-close、u-hidden-visually），而非描述样式（如red-text） - id 必须全局唯一，且不能以数字开头（
id="1nav"是非法的，id="nav-1"才合法） - 属性值一律用双引号包裹：
class="btn btn-primary"，单引号或不加引号在某些解析器里会出问题
标签嵌套错误会静默破坏语义，但不一定报错
浏览器会自动修复很多嵌套错误（比如把 <p></p>
<div>xxx</div>
<p></p>
<div>xxx</div>
<p></p>），但修复结果不可控。屏幕阅读器、SEO 抓取、CSS 选择器作用域都会因此偏移。
class 和 id 不是装饰用的，它们是 DOM 控制点
很多人把 class 当作纯 CSS 钩子，其实它是 JavaScript 操作节点最常用、最稳定的依据。一旦为了“好看”随意改 class 名，JS 功能就可能失效；id 更要小心——同一页面重复 id 不会报错，但 document.getElementById() 只返回第一个匹配项，label[for] 关联也会断掉。
真正难的不是记住这些规则，而是当多人协作、模板引擎介入、SSR 渲染、微前端加载时，这些边界条件会被层层掩盖。一个没闭合的 <header></header> 可能让整个后续 DOM 树的层级错位，而控制台却不会报错。
