HTML中class和id混用、标签非法嵌套、属性值未加引号、script位置不当是四大高频问题：id须全局唯一，class用于复用；非法嵌套致DOM结构异常；属性值须统一用双引号包裹；依赖DOM的脚本应置于前或加defer。
HTML 中 class 和 id 混用导致样式失效
很多人在写 HTML 时，把 class 当成“备用 id”用，结果 CSS 不生效、JS 找不到元素、甚至影响可访问性。根本原因是浏览器对两者语义和作用域的处理完全不同。
实操建议：
-
id必须全局唯一，一个页面只能出现一次；重复会导致document.getElementById()返回第一个匹配项，后续逻辑全错 -
class是批量标记，适合复用样式或 JS 批量操作，但不能用getElementById()查找 - 用 CSS 选择器时，
#header只匹配id="header"，.header只匹配class="header"，写反了就啥也不生效 - 现代框架（如 React）中，动态生成的
id若没做唯一性控制，服务端渲染 + 客户端水合时容易报错Hydration failed
HTML 标签嵌套错误引发 DOM 解析异常
浏览器解析 HTML 时会自动“修复”非法嵌套，比如把 <div> 塞进 <code><p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill9263" title="Html2md"><img
src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill9263" title="Html2md">Html2md</a>
<p>使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p>
</div>
<a href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div> 里，结果 <p></p> 被强制闭合，DOM 结构和预期完全不一致。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
-
<p></p> <div>内容</div>→ 实际变成<p></p> <div>内容</div> <p></p> -
<span><h2>标题</h2></span>→<h2></h2>被踢出<span></span>，破坏行内语义 - 表格相关标签（
<tr>、<code><td>）被包在非表格容器里，导致渲染错乱或兼容性问题 <p>检查方法：打开浏览器开发者工具的 Elements 面板，看实际生成的 DOM 结构是否和你写的 HTML 一致。</p> <h3>HTML 属性值未加引号引发解析失败</h3> <p>HTML5 允许部分属性省略引号，但只要值里含空格、<code>=、、<code>>或其他特殊字符，不加引号就会截断或误解析。典型场景：
-
<img src="logo.png" alt="My" logo>→alt实际只取到My，后面被当新属性处理 -
<a href="/path?k=v&next=/home"></a>→&被当成实体开始符，可能触发&next解析错误 - 服务端模板（如 Jinja2、EJS）输出变量时，若没做转义+引号包裹，极易注入无效 HTML
安全做法：所有属性值统一用双引号包裹，包括布尔属性（
<input required="required">），虽然冗余但零歧义。HTML 中 script 标签位置不当导致 JS 执行时机错乱
把
<script></script>放在里又没加defer或async，JS 就会阻塞 HTML 解析，还可能因 DOM 尚未加载而报Cannot read property 'xxx' of null。关键判断点：
- 依赖 DOM 的脚本（如
document.querySelector()）必须等 DOM 构建完成，推荐放在前，或加defer属性 - 第三方分析脚本（如 GA、Sentry）适合用
async，避免阻塞，但注意它不保证执行顺序 - 模块化脚本（
type="module"）默认是defer行为，不用额外加，但老浏览器不支持 - 用
DOMContentLoaded事件监听时，确保没在脚本里提前调用 DOM 方法
高频问题\_实用场景汇总介绍【汇总】不是文档目录，而是真实开发中反复踩坑的集合——比如
id重复、script放错位置、属性漏引号，这些地方一松懈，问题就藏得深、查得慢。 -
