anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
html本质是定义内容逻辑结构与语义关系的标记语言，表示主标题、表示导航区域、表示独立内容，而非样式指令；应优先使用、、、等语义化标签替代无含义的和。
HTML 不是“样式”或“行为”的实现方式，它只负责定义网页内容的逻辑结构和语义关系——换句话说，<h1></h1> 表示“这是主标题”，<nav></nav> 表示“这是导航区域”，<article></article> 表示“这是一篇独立内容”，而不是“它应该加粗、居中、字号 24px”。
HTML 标签的本质是语义容器，不是样式指令
很多人初学时把 <div> 当成万能盒子，反复嵌套却忽略语义。结果是：代码可读性差、SEO 友好度低、屏幕阅读器无法正确朗读、后期维护成本高。
<ul><li><code><div> 和 <code><span></span> 是无语义的通用容器，仅在缺乏更合适语义标签时才用
<header></header>、<main></main>、<aside></aside>、<footer></footer> 等语义化标签组织页面骨架<ul></ul> 用于无序列表（如导航菜单项），<ol></ol> 用于有顺序依赖的步骤（如安装流程），不能只凭视觉效果混用<table> 仅用于真正具有行列关系的数据（如课程表、财务报表），绝不用来“布局页面”
<h3>HTML 结构必须严格遵循嵌套规则和文档流逻辑</h3>
<p>浏览器解析 HTML 时，会按标签类型自动推断其在文档流中的位置和行为。错误嵌套会破坏渲染逻辑，甚至被浏览器静默修正（比如把 <code><p></p> 塞进 <span></span> 内）。
- 块级元素（如
<div>、<code><p></p>、<section></section>）默认独占一行，可设置宽高、内外边距 - 内联元素（如
<span></span>、<a></a>、<strong></strong>）只占据内容所需空间，不能直接设宽高 -
<p></p>内禁止嵌套<div>、<code><h1></h1>等块级元素（HTML5 允许部分例外，但语义上不合理） - 所有内容必须包裹在
内；中不能出现可视内容（如<div> 或文本） <h3>lang 和 dir 属性不是可选项，而是基础可访问性要求</h3> <p>忽略 <code>lang和dir，会导致多语言页面语音朗读错乱、标点方向异常、搜索关键词匹配失败——这不是“锦上添花”，而是现代网页的底线。- 中文页面必须写
，阿拉伯语页面必须写 -
dir="rtl"必须作用于根标签，不能靠 CSS 的text-align: right或float: right模拟 - 表单输入框建议加
dir="auto"，让浏览器自动识别用户输入文字的方向（如中阿混排） - 不要给
<div> 或 <code><p></p>单独加dir，除非该段落内部存在明确的双向文本切换需求最常被跳过的其实是文档开头那三行：
、<code>、<meta charset="UTF-8">。它们不产生视觉效果，但一旦缺失或写错，后续所有结构都可能在不同环境里表现不一致——尤其当页面含中文、emoji 或特殊符号时。
- 中文页面必须写
