HTML不是编程语言，掌握标签嵌套与闭合规则比记忆标签更重要；自闭合标签如<img>可写为<img />，但<p>、<div>等必须显式闭合，否则破坏DOM结构；alt属性必填以保障无障碍访问；表单需正确设置action、method及name属性；脚本位置影响DOM操作，依赖DOM的应放</body>前或加defer；<label>必须与控件正确绑定。
html 不是编程语言，写对标签嵌套和闭合规则，比记多少标签更重要。
怎么判断一个标签该不该闭合
浏览器对部分标签（如 <p>、<li>、<tr>）会自动补全或修正闭合，但这不等于可以省略。真实问题是：省略后 DOM 结构可能意外改变，JS 操作 document.querySelector 时找不到预期节点。
-
<img>、<input>、<br>是自闭合标签，写成<img />或<img>都合法，但统一用<img src="..." alt="..." />更稳妥（XHTML 兼容、团队可读性高） -
<p>必须显式闭合：<p>文字</p>；写成<p>文字<p>另一段会导致第二个<p>被解析为新段落，中间无闭合 —— 浏览器会自动插入</p>，但 JS 获取p的children时可能为空 -
<div>和<span>绝对不能省闭合，否则后续所有块级元素都会被包进这个没闭的<div>里，样式和脚本全乱
alt 属性为什么必须写，哪怕留空
alt 不是“可选提示”，而是图像加载失败或屏幕阅读器访问时的替代内容。W3C 标准要求所有 <img> 必须有 alt，否则 HTML 验证失败，部分无障碍检测工具直接报错。
- 纯装饰图：用
alt=""（空字符串），告诉屏幕阅读器跳过；别写alt=" decorative "或删掉属性 - 图标按钮中的图：
alt="删除"或alt="返回首页"，和按钮功能一致，不是描述图片形状 - 带链接的图：如果链接本身已有文字说明（如
<a href="...">点击查看报告</a>），图的alt可为空；否则需补充关键信息
form 表单提交前最容易漏的三件事
表单能显示、能点提交，不代表数据一定能到后端。常见问题出在语义缺失和属性遗漏。
-
<form>必须有action（提交地址）和method（GET或POST），缺一不可；method默认是GET，但含敏感数据或大文本时必须显式写method="POST" - 每个
<input>、<select>、<textarea>必须有name属性，否则提交时不会携带该字段 ——id或class不能代替name - 提交按钮要用
<button type="submit">或<input type="submit">；写成<button>（无type）默认是type="button"，点它不会触发表单提交
script 标签放哪儿，影响页面渲染和变量作用域
不是所有 <script> 都适合扔在 <head> 里。位置决定执行时机、DOM 可用性、以及是否阻塞渲染。
立即学习“前端免费学习笔记（深入）”；
- 依赖 DOM 的脚本（比如要
document.getElementById某个<div>），必须等 DOM 加载完再执行：放在</body>前，或加defer属性（<script src="..." defer></script>） - 内联脚本（
<script>console.log(...)</script>）没defer或async，会立即执行并阻塞 HTML 解析 —— 放<head>里时，DOM 还没生成，document.body是null -
async适合独立工具脚本（如统计代码），但多个async脚本执行顺序不确定，不能互相依赖
最常被忽略的其实是 <label> 和表单控件的绑定 —— 不写 for 和 id 匹配，或不用 <label><input>...</label> 包裹，会导致点击文字无法聚焦输入框，移动端体验直接打折。
