HTML基础过关需手写结构正确、语义清晰、无浏览器自动修复的静态页：用开发者工具Elements面板核验真实DOM树，提交W3C Validator检查警告（如section缺heading、img缺alt/src），确保表单input有name、语义标签合规使用。
不需要背完所有标签，能手写一个结构正确、语义清晰、浏览器不报 warning 的静态页，就是 HTML 基础过关了。
怎么写出不被浏览器自动修复的 HTML
浏览器会默默帮你补 <tbody>、把错嵌套的 <div> 挪出 <p>、甚至忽略缺失的 <html>，但这不代表结构是对的。真实 DOM 树和你写的源码可能完全不同。
- 写完立刻按
F12打开开发者工具，切到Elements面板，看实际生成的树形结构 - 检查
<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。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
-
<input type="text">→ 后端收不到；<input type="text" name="username">→ 正常提交username=xxx -
<button>在<form>内默认是type="submit"，点一下就触发表单提交，要阻止就得显式写type="button" -
<input type="checkbox">和<input type="radio">必须配name才能分组，否则多个 checkbox 无法形成数组式提交
语义化标签不是装饰，是约束
用 <header> 替代 <div class="header"> 不只是为了好看，而是告诉浏览器和辅助技术：“这部分是页眉”，进而影响导航逻辑、SEO 权重分配、屏幕阅读器朗读顺序。
-
<main>页面中只能出现一次，且不应嵌套在<article>或<aside>内 -
<article>表示可独立分发的内容单元（如博客文章），它内部可以有自己的<header>、<footer>，但不能随便套在外面的<section>上 -
<figure>+<figcaption>是图片/图表与其标题的绑定对，不要只用<figure>包一张图却不加说明
真正卡住人的从来不是“会不会写 <h1>”，而是写完之后不知道该去哪验证、怎么判断对错。DOM 树、W3C 校验器、网络面板里的请求路径——这些才是你每天该盯的界面。
