HTML基础过关的标准是Elements面板中DOM树与手写源码完全一致；需避免浏览器自动补全标签、禁止块级元素嵌套在<p>内、表单必须含action/method/name、img需有有效src和语义化alt、script应defer或置于body末尾。
能手写一个结构正确、语义清晰、浏览器不自动修复的静态页，就是 HTML 基础过关了——不需要背完所有标签，但必须让 Elements 面板里看到的 DOM 树和你写的源码一致。
为什么浏览器“显示正常”却算不过关
浏览器会默默补 <tbody>、把 <p><div>文本</div></p> 拆成三个独立块、甚至忽略缺失的 <html>。这导致你写的源码和真实 DOM 完全不同。
JS 操作的是真实 DOM，不是你写的源码。比如 document.querySelector('p').children 返回空 NodeList，往往就是因为 <p> 被浏览器重排过。
- 打开开发者工具 →
Elements面板，逐层展开看结构是否符合预期 - 用 W3C Validator 提交 HTML 文件，重点看 Warning 级提示（如
Section lacks heading、img missing alt） - 特别注意
<p>内不能嵌套<div>、<h1>等块级元素——它只接受短语级内容
表单提交不了？先盯住这三个硬性字段
表单渲染正常、按钮可点，不代表后端能收到数据。漏掉任意一项，对应字段就彻底“消失”在请求体里。
立即学习“前端免费学习笔记（深入）”；
-
<form>必须有action（目标地址）和显式声明的method（GET或POST）；method默认是GET，但含敏感内容或大文本时得写method="POST" - 每个控件（
<input>、<select>、<textarea>）必须带name属性；id和class不参与提交 - 提交按钮要用
<button type="submit">或<input type="submit">；<button>在<form>内默认是type="button"，点它不会触发表单提交
<img> 的 src 和 alt 为什么不能省
src 为空字符串 "" 或 "#" 会导致无效请求或页面跳顶；alt 缺失则破坏可访问性，影响 SEO 和图片加载失败时的 fallback 显示。
-
src必须是有效路径：相对路径如"./images/logo.png"，或绝对 URL 如"https://example.com/photo.jpg" -
alt不是“可选描述”，而是内容等价文本：功能性图填动作（alt="删除此项"），纯装饰图用空字符串alt=""（不是删掉属性，也不是写alt="decorative"） - 加
width和height仍有意义：提前预留布局空间，避免图片加载时页面抖动（CLS 问题）
<script> 放 <head> 里拿不到元素？别急着改逻辑
脚本在 <head> 中执行时，DOM 还没加载完，document.getElementById('app') 返回 null 是必然结果。
- 最简单解法：把
<script>移到</body>前，确保 DOM 已就绪 - 若必须放
<head>，加defer属性：<script defer src="main.js"></script>，它会等 HTML 解析完成再执行 -
async不适合依赖 DOM 的脚本——它下载完立刻执行，时机不可控
真正卡住人的，往往不是记不住标签名，而是这些“写了但不起作用”的隐性规则：DOM 结构被浏览器悄悄改写、表单字段因缺 name 而丢失、alt 写成空格或乱填导致验证失败。多看一眼 Elements 面板里的真实树形结构，比背十遍语法手册更管用。
