Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
html基础过关需手写结构正确、语义清晰、无浏览器自动修复的静态页：用开发者工具elements面板核验真实dom树，提交w3c validator检查警告（如section缺heading、img缺alt/src），确保表单input有name、语义标签合规使用。
不需要背完所有标签，能手写一个结构正确、语义清晰、浏览器不报 warning 的静态页，就是 HTML 基础过关了。
怎么写出不被浏览器自动修复的 HTML
浏览器会默默帮你补 <tbody>、把错嵌套的 <code><div> 挪出 <code><p></p>、甚至忽略缺失的 ，但这不代表结构是对的。真实 DOM 树和你写的源码可能完全不同。
- 写完立刻按
F12打开开发者工具，切到Elements面板，看实际生成的树形结构 - 检查
<p></p> <div>文本</div>是否被拆成三个独立块——如果是，说明你违反了<p></p>的内容模型（它只接受短语级内容） - 用 W3C HTML Validator 提交文件或 URL，重点关注
Warning级别提示，比如Section lacks heading. Consider using “h2”-“h6” elements to add identifying headings to all sections.
<img> 的 src 和 alt 为什么不能省
src 为空字符串 "" 或 "#" 会导致请求失败或跳顶；alt 缺失则破坏可访问性，且影响 SEO 和图片加载失败时的 fallback 显示。
-
src必须是有效路径：相对路径如"./images/logo.png"，或绝对 URL 如"https://example.com/photo.jpg" -
alt不是“可选描述”，而是内容等价文本，例如alt="GitHub Octocat 图标，蓝色，拟人化章鱼形象"，而非alt="图标" - 加
width和height属性仍有意义：提前预留布局空间，避免图片加载时页面抖动（CLS 问题）
表单里 <input> 为什么后端收不到数据
最常见原因是漏写 name 属性。没有 name 的 <input> 不会被包含在表单提交数据中，无论有没有值、有没有 required。
-
<input type="text">→ 后端收不到；<input type="text" name="username">→ 正常提交username=xxx -
<button></button>在<form></form>内默认是type="submit"，点一下就触发表单提交，要阻止就得显式写type="button" -
<input type="checkbox">和<input type="radio">必须配name才能分组，否则多个 checkbox 无法形成数组式提交
语义化标签不是装饰，是约束
用 <header></header> 替代 <div class="header"> 不只是为了好看，而是告诉浏览器和辅助技术：“这部分是页眉”，进而影响导航逻辑、SEO 权重分配、屏幕阅读器朗读顺序。
<ul>
<li>
<code><main></main> 页面中只能出现一次，且不应嵌套在 <article></article> 或 <aside></aside> 内
<article></article> 表示可独立分发的内容单元（如博客文章），它内部可以有自己的 <header></header>、<footer></footer>，但不能随便套在外面的 <section></section> 上<figure></figure> + <figcaption></figcaption> 是图片/图表与其标题的绑定对，不要只用 <figure></figure> 包一张图却不加说明真正卡住人的从来不是“会不会写 <h1></h1>”，而是写完之后不知道该去哪验证、怎么判断对错。DOM 树、W3C 校验器、网络面板里的请求路径——这些才是你每天该盯的界面。
