anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
加tabindex="0"仅让进入tab流，但必须同步添加role属性、监听keydown事件并提供:focus-visible样式，否则会成为不可操作的“死焦点”。
加 tabindex="0" 能让 <p></p> 进入 Tab 流，但仅此一步完全不够——它只会变成一个“能停、不能用”的死焦点。
为什么 <p tabindex="0"></p> 加了还是没反应？
浏览器只认这个属性为“允许聚焦”，不负责解释“聚焦后干啥”。常见现象包括：
- Tab 键停在
<p></p>上，但按 Enter 或 Space 没任何响应 - 屏幕阅读器读作“段落”，而不是“可操作项”
- CSS 清除了
outline，又没补:focus-visible，用户根本看不见焦点在哪 - 该
<p></p>本意是模拟按钮或开关，但语义和行为全缺失
必须同步做的三件事
否则等于给门装了锁芯却不配钥匙：
-
补
role属性：明确告诉辅助技术这是什么。比如<p role="button" tabindex="0">删除</p>，不能只写tabindex="0" -
监听
keydown：手动捕获'Enter'和' '（空格字符），并调用e.preventDefault()防止页面滚动或默认行为 -
提供可见焦点样式：用
:focus-visible替代粗暴的*:focus，避免鼠标用户看到突兀轮廓；若需兼容旧浏览器，至少加<p>:focus { outline: 2px solid #007bff; }</p>
什么时候真该给 <p></p> 加 tabindex="0"？
绝大多数情况都不该。只有满足全部以下条件时才考虑：
- 业务逻辑强制要求该段落必须作为整体被键盘用户“跳到”（比如折叠面板标题、自定义 tab 标签）
- 无法改用原生语义标签（如
<button></button>、<h3 role="tab"></h3>） - 已配套实现
role、keydown、:focus-visible三件套
如果只是想让用户点一下就触发动作，直接用 <button type="button"></button> 更安全、更轻量、无需额外配置。
移动端 Safari 的隐藏坑
在 iOS / iPadOS Safari 中，<p tabindex="0"></p> 可能首次加载后完全无法被 Tab 键聚焦，即使 DOM 正确、JS 绑定完整。这不是 bug，是 Safari 对非交互元素的主动限制：
- 解决办法：页面初始化后，对第一个目标
<p></p>主动调用.focus({ preventScroll: false }) - 别传
preventScroll: true—— Safari 不支持该选项，会静默失败 - 若该
<p></p>在折叠区域或懒加载内容里，确保它已渲染完成再调用.focus()
真正容易被忽略的点在于：焦点是否可见、是否可操作、是否能在所有主流浏览器（尤其是 Safari）中首次加载即生效——这三者缺一不可，而 tabindex="0" 只管第一件事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
