anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

最直接方式是用配合内联样式实现警告块，需语义清晰、样式可控、无障碍可用，禁用title和placeholder，推荐role="alert"与details可折叠方案。

用 <div> + 内联样式实现警告块最直接 <p>浏览器原生不提供 <code><warning></warning> 这类标签，所有“警告提示文字”都是靠 <div> 或 <code><p></p> 配合 CSS 实现的。关键不是选什么标签，而是语义清晰、样式可控、无障碍可用。

常见错误是把警告写成 <span title="⚠️ 警告：请勿修改">配置已锁定</span> —— title 在移动端无效，且屏幕阅读器读取不稳定，不能当警告主通道。

• 必须用块级容器（如 <div>），保证视觉隔离和可聚焦性 <li>颜色、边框、内边距统一用 <code>style 属性或 class 控制，避免依赖外部 CSS 文件（尤其 Markdown 混编场景）
• 开头加 <strong></strong> 包裹图标+文字，强化语义，比如 <strong>⚠️ 警告:</strong>
• 如果嵌在 Markdown 里，确保解析器允许 <div> 标签（如 GitHub Flavored Markdown 默认过滤 <code>style，需服务端开启）

  ::placeholder 不适用于警告提示，别和输入框提示混淆

  看到 placeholder 就想到“灰色小字”，但那是专用于 <input> 和 <textarea></textarea> 的交互态提示，**和页面上的静态警告文字完全无关**。强行套用会误导维护者，也违反 HTML 语义。

  典型误用：<p placeholder="⚠️ 该功能暂未开放">请联系管理员</p> —— placeholder 是表单控件专属全局属性，对 <p></p> 无效，浏览器直接忽略。

  • 警告文字是主动呈现的内容，不是“待填充的占位”，不该用任何 placeholder 相关机制
  • 需要动态显示/隐藏时，用 display: none 或 aria-hidden 控制，而不是模拟 placeholder 的显隐逻辑
  • 若警告要随表单状态变化（如校验失败后出现），应绑定到 invalid 事件或手动更新 DOM，而非依赖 placeholder 切换

  移动端适配和可访问性容易被跳过的三点

  很多警告块在桌面看着正常，一上手机就文字挤在一起、图标错位、甚至完全不可读。根源常出在三个被默认忽略的细节上。

  • 不用 px 固定字号，改用 rem 或 em，比如 font-size: 0.875rem（14px），否则 iOS Safari 缩放时文字不随系统设置响应
  • 图标用 Unicode 字符（如 ⚠️）比 SVG 更稳妥；若必须用图片，得加 aria-hidden="true" 并确保 <strong></strong> 文字本身已说明含义
  • 给警告容器加 role="alert"，让屏幕阅读器一出现就中断当前朗读并播报——仅靠颜色或图标无法被辅助技术识别

  用 details 做可折叠警告能省掉 JS

  当警告内容较长（比如含多条注意事项），又不想引入 JavaScript，<details></details> 是原生、轻量、无障碍友好的方案。它自带展开/收起状态，无需监听 click 或管理 class。

  示例结构：

  <details style="background: #fff3cd; border: 1px solid #ffc107; border-radius: 4px; padding: 12px; margin: 16px 0;"><summary style="font-weight: bold; cursor: pointer; color: #856404;">⚠️ 点击展开详细警告</summary><div style="padding-top: 12px; border-top: 1px solid #dee2e6; margin-top: 12px; color: #495057;">
      <p>这里是详细的警告内容。</p>
    </div>
  </details>

  • <summary></summary> 自动获得 role="button" 和键盘可聚焦能力，空格/回车即可触发
  • 不支持 <details></details> 的老浏览器（IE 全系、Android 4.3 及以下）会直接展开全部内容，属于优雅降级
  • 别在 <summary></summary> 里放复杂 HTML，某些读屏器对嵌套结构支持不佳；纯文本 + 图标最稳
  实际项目里，警告排版最难的不是写样式，而是判断“什么时候该让用户停下来看”。字体再醒目、动画再强烈，如果出现在用户正专注填写表单的中间，也会被下意识忽略。所以真正重要的，是把警告放在语义上合理的位置——比如紧贴相关控件下方，或表单提交按钮上方，而不是堆在页面顶部。