Article To Html

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

下载

屏幕阅读器用户按h键可逐级跳转标题，需确保h1唯一且为首个主内容标题，标题层级必须连续嵌套、不可跳跃或倒置，并配合语义化区块标签强化导航。

屏幕阅读器怎么用 heading 快速跳转

屏幕阅读器用户按 H 键就能逐个跳到下一个 <h1></h1>～<h6></h6> 元素，这是他们理解页面骨架最常用的方式。如果标题层级断裂、跳跃或语义混乱，用户听到的就只是一串“标题二级”“标题三级”“标题二级”，完全无法建立上下文。

必须保证 <h1></h1> 唯一且位置合理

<h1></h1> 是整个页面的“锚点”，它得是第一个有意义的主内容标题，不能藏在 <header></header> 里当 logo 文字，也不能被 JS 动态塞进 <div> 后再显示。常见错误包括： <ul> <li>Layout 组件中硬写了一个 <code><h1>Logo</h1>，页面组件又输出一个 <h1>文章标题</h1>，导致重复

SPA 路由切换后没更新 <h1></h1>，用户从首页跳到详情页，听到的还是“首页”

<h1></h1> 被 display: none 或 aria-hidden="true" 隐藏，但仍在 DOM 中 —— 屏幕阅读器仍会读，只是用户看不见

层级必须连续嵌套，不能跳级或倒置

辅助技术依赖标题的嵌套关系构建“大纲树”。<h2></h2> 下面直接跟 <h4></h4>，等于告诉屏幕阅读器“中间两层内容消失了”，Chrome DevTools 的 Accessibility 面板会立刻标红警告。正确做法是：

• 每个 <section></section> 应以 <h2></h2> 开头（除非它本身是 <main></main> 的子级且已有父 <h2></h2>）
• <h3></h3> 只能出现在 <h2></h2> 后、且属于它的逻辑子内容；同理，<h4></h4> 必须紧接在 <h3></h3> 后或同一层级的其他 <h3></h3> 后
• 不要为视觉效果降级标题：想让 <h3></h3> 看起来像小字？用 CSS 改 font-size，别换成 <p></p> 或 <span></span>

配合语义化区块标签强化导航意图

仅靠 heading 不足以支撑完整导航流。屏幕阅读器用户还会按 D 键跳地标（landmark），这时 <header></header>、<nav></nav>、<main></main>、<aside></aside>、<footer></footer> 就和 heading 形成双重索引。关键点：

• <main></main> 内部的 <h1></h1> 才是真正的页面主标题；<header></header> 里的文字建议用 <div role="banner"> 包裹，避免抢走语义焦点 <li>每个 <code><section></section> 最好带 aria-labelledby 指向其 <h2></h2>，尤其当标题文本较长或含动态内容时
• 避免把 <nav></nav> 套在无关链接上（比如“猜你喜欢”列表），否则用户按 N 键会误入非导航区

最难的不是写对 <h1></h1>～<h6></h6>，而是在 CMS 插入富文本、组件库嵌套、SSR 多层模板拼接时，始终让每个标题都能回答：“我为什么是这一级？我的父级在哪？我的兄弟标题是否逻辑一致？”