帮助中心首页需用「分类导航+关键词入口」双结构，顶部固定搜索框，用<details><summary>折叠分类，标题设id锚点，CSS加scroll-margin-top避免遮挡。
怎么用纯 HTML + CSS 搭出可搜索的帮助中心首页
不能只靠 <h2> 堆内容，用户进来的第一眼必须能定位到问题。核心是「分类导航 + 关键词入口」双结构。
常见错误：把所有文章塞进一个长页面，不加锚点、无层级、没搜索框——用户滑到底才发现没自己要的，直接关掉。
实操建议：
- 顶部固定一个
<input type="search">，绑定简单 JS 过滤（不用框架，10 行内搞定） - 用
<details><summary>做折叠式分类（兼容性 OK，Chrome/Firefox/Safari 均支持，IE 不管） - 每篇文章标题用
<h3 id="xxx">，正文前加<a href="#xxx">#</a>便于分享和书签 - 避免用图片替代文字标题——SEO 和屏幕阅读器都依赖真实文本
如何让单篇帮助文档真正“可读”而不是“可滚动”
纯 HTML 文档最容易变成大段文字墙。用户不是来读小说的，是来找“怎么重置密码”“404 错误怎么解”的。
立即学习“前端免费学习笔记（深入）”；
关键不是排版多美，而是信息密度和路径清晰度。
实操建议：
- 每个操作步骤单独成段，动词开头：
<p>点击右上角头像</p>，不要写“您需要点击……” - 命令行示例用
<pre><code>npm install -g create-react-app</code></pre>，别用<div class="code"> - 截图只放关键区域，且必须配文字说明（比如“红框处为 API Key 输入框”），否则对色弱/高缩放用户无效
- 在文档末尾加
<a href="#top">回到顶部</a>，比“↑”图标更可靠
静态帮助页怎么实现“关键词跳转到段落”
用户搜“忘记密码”，结果页面打开在顶部，还得手动 Ctrl+F —— 这不是帮助，是添堵。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
不需要后端或 JS 框架，纯 HTML 锚点就能解决，但得注意几个坑。
实操建议：
- 搜索链接写成
<a href="/help#forgot-password">忘记密码</a>，对应目标写<h2 id="forgot-password">忘记密码</h2> - ID 值必须全小写、无空格、无中文（
id="api-错误码-401"→ 改成id="api-error-401"） - 如果标题用了
<details>折叠，确保目标元素在展开后的 DOM 中可见，否则 Safari 可能不滚动 - 加一行
scroll-margin-top: 60px到h2, h3的 CSS，避免标题被固定头部遮住
为什么本地测试时锚点跳转失效？
最常发生的不是代码写错，而是文件路径和服务器行为差异导致的 URL 解析异常。
典型现象：file:///help.html#install 在 Chrome 打开不跳转，但部署到 http://localhost:8000/help.html#install 就正常。
原因：Chrome 对 file:// 协议限制了 fragment navigation（锚点滚动）以提升安全，不是 bug，是策略。
实操建议：
- 开发阶段用
python3 -m http.server 8000或npx serve启一个本地 HTTP 服务，别双击打开 HTML - 检查浏览器控制台有没有
Failed to execute 'scrollIntoView' on 'Element'报错——大概率是目标 ID 不存在或拼写不一致 - 用
document.getElementById("xxx")在控制台手动查 ID 是否存在，比猜快得多
复杂点在于：帮助中心不是“做完就完”，它得随产品迭代持续更新。ID 命名规则、锚点一致性、搜索逻辑耦合度——这些细节没人提，但改一次文档就崩一次跳转，才是真实痛点。
