网页底部状态栏需用position:fixed+env(safe-area-inset-bottom)精准贴底，关闭时remove()节点并存localStorage，插入前确保body就绪，状态更新必用aria-live播报。
网页状态栏（底部信息提示条）不是加个 footer 标签就完事的——它得不遮挡手势区、能关闭、不干扰滚动，还得在 iOS Safari 里不被地址栏吞掉。
用 position: fixed + env(safe-area-inset-bottom) 定位才真正贴底
直接写 bottom: 0 在很多场景下会失效：安卓 WebView 可能被虚拟按键顶起，iOS Safari 切换地址栏时会盖住内容。必须用环境变量兜底：
-
bottom: 0是 fallback，保证老浏览器有基础定位 -
bottom: env(safe-area-inset-bottom)覆盖在上面，适配 iPhone 刘海/手势条和安卓全面屏 - 外层容器加
padding-bottom: env(safe-area-inset-bottom)（如果状态栏是常驻型，非浮层） -
z-index至少设为1000，否则会被弹窗、下拉菜单等压住
关闭逻辑必须移除 DOM + 存 localStorage
只切 display: none 或 visibility: hidden 是典型错误：刷新后通知还在，且后续 JS 逻辑可能因节点残留而异常。
- 点击关闭按钮后，调用
element.remove()真实销毁节点 - 同步写入
localStorage.setItem('dismissed-status-bar-v1', '1')记录状态 - 插入前先检查：
if (localStorage.getItem('dismissed-status-bar-v1') === '1') return; - 关闭按钮用
<button type="button">，避免意外触发表单提交
JS 插入前务必确认 document.body 已就绪
脚本放在 <head> 里或过早执行，document.body 还没生成，appendChild 就会报 Cannot read property 'appendChild' of null。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 最稳妥：把脚本放
</body>前（即 HTML 底部） - 或监听
DOMContentLoaded事件 - 别依赖
document.readyState === 'loading'做判断——它在某些异步加载场景下不可靠 - 插入前加空值校验：
if (!document.body) return;
状态更新必须用 aria-live，不能只靠视觉显示
对屏幕阅读器用户来说，“看不见”和“根本不存在”是一回事。只改 textContent 或 CSS 显示/隐藏，读屏器完全无感知。
- 普通状态（如“保存中…”）用
aria-live="polite" role="status" - 紧急错误（如“网络断开”）用
aria-live="assertive" role="alert" - 更新内容前先清空：
el.textContent = ""，再赋新值，避免残留或抖动 - 禁用
innerHTML频繁注入——XSS 风险高，且可能破坏 aria-live 的播报节奏
安全区适配、DOM 移除、localStorage 同步、aria-live 播报——这四点漏掉任一，底部状态栏就只是“看起来能用”，实际在真机、读屏、多端切换时必然出问题。
