HTML标签闭合错位会导致浏览器自动修复DOM结构，引发样式失效、JS获取元素失败等问题；script位置不当易致ReferenceError；编码声明缺失或冲突造成乱码；表单提交需正确绑定submit事件于form元素。
HTML 标签闭合错位导致页面结构崩塌
浏览器遇到未闭合或错误嵌套的标签（比如 <div><p></div></p>），会自动尝试“修复”，但修复逻辑因浏览器而异，结果常是 DOM 树和你写的完全对不上。最典型表现：CSS 样式突然失效、JS 获取不到预期元素、布局错乱且控制台不报错。
- 用浏览器开发者工具的 Elements 面板 看实际渲染出的 DOM 结构，不是看源码——它已经过修正
- 重点关注
<table>、<ul>、<ol>内部，这些标签对嵌套规则极其敏感；<div>里直接塞<p>虽合法，但若漏闭合，容易引发连锁错位 - VS Code 推荐装
Auto Close Tag和Auto Rename Tag插件，但别依赖——它们对条件注释、模板字符串里的 HTML 无效
script 标签位置不当引发 ReferenceError
<script> 放在 <head> 里又没加 defer 或 async，脚本执行时 DOM 还没加载完，document.getElementById() 或 querySelector() 必然返回 null，后续调用直接抛 TypeError: Cannot read property 'xxx' of null。
- 默认优先把
<script>放在</body>前——这是最稳的兜底方案 - 如果必须放
<head>，且依赖 DOM，就加defer（注意：仅对外部脚本有效，<script>console.log(...)</script>不生效） - 别信“DOMContentLoaded 万能”——它只保证 DOM 解析完成，不保证图片、字体等资源加载完毕，更不解决脚本执行顺序问题
字符编码声明缺失或冲突引发乱码
页面显示 或方块字，八成是编码没对上。常见组合：文件存为 UTF-8，但 HTML 没声明 <meta charset="UTF-8">；或服务器返回了 Content-Type: text/html; charset=GBK，覆盖了 HTML 里的声明。
- 检查响应头：浏览器开发者工具 Network → 选 HTML 请求 → Headers → Response Headers → 查看
Content-Type - 确保
<meta charset="UTF-8">是<head>中**第一个** meta 标签（位置靠前才能被及时识别） - 服务端配置优先级高于 HTML 声明：Nginx 用
charset utf-8;，Apache 用AddDefaultCharset UTF-8，PHP 用header('Content-Type: text/html; charset=utf-8');
表单提交后页面刷新却拿不到数据
点击 <button type="submit"> 后页面跳转或刷新，但 JS 里用 event.preventDefault() 没生效，通常是因为事件监听没绑对、或者绑在了非表单元素上。
立即学习“前端免费学习笔记（深入）”；
- 监听对象必须是
<form>元素本身，不是里面的按钮：form.addEventListener('submit', e => { e.preventDefault(); ... }) - 确认没有多个同名表单，JS 选中的是第一个还是最后一个？用
console.log(form)实锤 - 如果用了框架（如 Vue/React），别直接操作原生
form——它们可能劫持了 submit 行为，得按框架约定写（例如 Vue 的@submit.prevent）
真正卡住人的，往往不是语法错误，而是浏览器悄悄修正了你的 HTML，然后 JS 基于“你以为的结构”去操作——结果对象不存在、属性读不到、事件没绑上。多看 Elements 面板里的真实 DOM，少信源码缩进。
