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