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