anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
html是网页骨架，非编程语言，靠标签定义内容结构；其4个核心标签为、、（含和）、，顺序不可乱，缺一或错写将导致渲染异常、乱码、seo与无障碍失效。
HTML 是构建网页的骨架，不是编程语言，不处理逻辑，只定义内容“是什么”和“怎么组织”。它靠标签（比如 <p></p>、<h1></h1>、<img>）告诉浏览器：这是一段文字、这是一个标题、这是一张图。
HTML文档必须有的4个核心标签
缺一不可，顺序不能乱，否则浏览器可能降级渲染或报错：
必须是第一行，且全小写、无空格。写成 <code> 或漏掉都会触发怪异模式（Quirks Mode）-
根标签，lang属性强烈建议加上，影响屏幕阅读器发音、SEO 语义识别，中文别用en -
里至少要有<meta charset="UTF-8">，否则中文显示为乱码（）；<title></title>虽然可省，但没它，浏览器标签页就空着 -
是唯一放“能被用户看见的内容”的地方。所有文本、按钮、图片、表单，都得在里面——哪怕只是<p>hello</p>
为什么裸写文字会“看起来正常”，但其实是错的？
浏览器有容错机制，比如你直接写 hello world 在 里没包任何标签，它也会显示出来。但这带来三个实际问题：
- 语义丢失：
hello world是标题？说明？错误提示？机器（搜索引擎、读屏软件）完全无法判断 - 样式失控：没有
<p></p>就没有默认上下边距，连续几段文字会挤成一团，改起来反而更麻烦 - 后续扩展难：想给某一段加 class 或用 JS 操作？没标签包裹，根本找不到目标节点
所以哪怕只有一句话，也该用 <p></p> 包住；标题就用 <h1></h1>～<h6></h6>，别用 <div> + CSS 假装是标题。
<h3><code><div> 和 <code><span></span> 到底什么时候用？
它们本身没语义，纯属“容器”，但行为天差地别：
<div> 是块级元素：自带换行，宽度占满父容器。适合划分区域，比如 <code><div id="header">、<code><div class="card"> <li> <code><span></span>是行内元素：不换行，宽度随内容走。适合局部修饰，比如<p>价格<code><span class="price">¥99</span>起- 别用
<div> 包文字当段落，也别用 <code><span></span>包整段话——这不是 bug，是反模式，后期维护成本翻倍常见新手误操作与对应修复
这些错误在本地预览时可能“看不出问题”，但上线后常引发兼容性、SEO 或可访问性故障：
- 把
<script></script>或<link rel="stylesheet">写在外面（比如直接跟在后）→ 浏览器忽略，资源不加载 - 图片只写
<img src="a.jpg">，漏掉alt→ 无障碍失败，SEO 权重下降，图片加载失败时页面出现空白缺口 - 链接不加
href（比如<a>点击</a>）→ 表面可点，实际无跳转，键盘 Tab 也无法聚焦，违反可访问性规范 - 自闭合标签写成
<br>（XHTML 风格）→ 在 HTML5 中合法但没必要，统一用<br>更简洁，且所有现代浏览器都支持
真正容易被忽略的，是
lang属性和charset的缺失——它们不直接影响视觉，却决定内容能否被正确朗读、索引、解析。一个没设lang的中文站，在语音助手场景下基本等于不可用。 - 把
