HTML中img、br、input等自闭合标签不可闭合，p、div、span等必须闭合；li、tbody等虽可省略闭合但不推荐；id须全局唯一，class用于多值归类；script放head需defer或DOMContentLoaded；form提交需preventDefault并手动处理逻辑。
HTML里哪些标签必须闭合，哪些可以不闭合
浏览器对标签闭合其实挺宽容，但“能不闭合”不等于“该不闭合”。像 <img>、<br>、<input> 这类是**自闭合标签（void elements）**，语法上就不允许写 <img></img> —— 浏览器会直接忽略后半截，甚至可能破坏后续结构。
而 <p>、<div>、<span> 必须成对出现。漏掉 </p> 很容易导致样式错乱或JS获取不到预期节点——尤其在用 document.querySelector('p') 时，返回的可能是嵌套异常的 DOM 树。
- 常见误操作：把
<li>当成可选闭合，实际<ul><li>A<li>B</ul>中第二个<li>会被自动补全闭合，但语义已模糊 - HTML5 允许省略某些闭合（如
</li>、</tbody>），但别依赖它——Prettier、VS Code 自动格式化默认仍补全，团队协作时容易引发 diff 污染 - 服务端渲染（如 PHP/Node）若拼接 HTML 字符串，漏闭合会直接导致整页解析失败，错误信息常是
Unexpected end of input
class 和 id 的区别不只是“一个能重复一个不能”
id 是全局唯一标识，浏览器用它做锚点跳转（#header）、CSS 选择器（#nav）、JS 获取节点（document.getElementById('modal')）。一旦页面出现两个相同 id，getElementById 只返回第一个，CSS 里 #btn 也只会命中首个——这比样式失效更隐蔽，因为看起来“好像没出错”。
class 是关系型标记，用于归类、复用样式和行为。一个元素可以有多个 class（class="btn btn-primary loading"），JS 也常用 querySelectorAll('.active') 批量操作。
立即学习“前端免费学习笔记（深入）”；
- 别用
id做纯样式控制，比如<div id="red-text">—— 后续想加第二个红色文字就得复制ID或改逻辑，违背语义 - Vue/React 组件中动态生成
id要格外小心，v-for循环里写死id="item"是典型翻车现场 - 无障碍访问（a11y）依赖
id关联label for="xxx"或aria-labelledby，这里重复 ID 会导致读屏软件静默失败
script 标签放 head 里为什么 JS 经常报错找不到元素
脚本执行时，浏览器按 HTML 解析顺序从上到下构建 DOM。放在 <head> 里的 <script> 会立刻下载并执行，此时 <body> 根本还没开始解析，document.getElementById('main') 当然返回 null。
解决办法不是“全扔到 </body> 前”，而是分场景处理：
- 纯工具函数（如工具库、埋点 SDK）可放
<head>，只要不立即操作 DOM - 需要操作页面元素的脚本，优先用
defer：<script defer src="app.js"></script>—— 它会并行下载，等 DOM 解析完再执行，且保证顺序 - 实在要内联脚本又得操作 DOM？用
DOMContentLoaded事件包裹：document.addEventListener('DOMContentLoaded', () => { /* 操作代码 */ }) - 注意：IE8 及以下不支持
defer，如果还要兼容，老老实实挪到</body>上方
form 表单提交时页面刷新了，怎么阻止
原生 <form> 提交默认触发页面跳转（GET）或刷新（POST），这是语义行为，不是 bug。想用 JS 控制流程，核心就一条：event.preventDefault()。
但光阻止还不够——表单验证、按钮状态、错误提示都得手动补上，否则用户点完按钮没反馈，以为卡了。
- 监听
submit事件，不是click：form.addEventListener('submit', e => { e.preventDefault(); /* 处理逻辑 */ }) - 别忘了给提交按钮加
type="button"，否则在某些框架里（如 Alpine.js）可能意外触发两次 submit - 用
FormData收集数据比遍历input.value更可靠，尤其遇到<select multiple>或文件上传时 - 提交成功后，如果真要跳转，用
window.location.href = '/success'显式控制，别依赖表单的action自动跳
HTML 看似简单，但每个标签、每个属性背后都有解析规则、兼容边界和协作约定。写完一版 HTML，用浏览器的开发者工具 Elements 面板点开看看实际生成的 DOM 结构，比对着文档猜更管用。
