html结构问题常导致样式错乱、交互失效等，需优先检查标签闭合与嵌套、路径属性拼写、dom节点冗余及语义化标签误用，浏览器不报错但会 silently 破坏后续js/css执行。
HTML写出来没反应、样式错乱、点击失效、滚动卡顿——这些问题通常不是JS或CSS在捣鬼，而是HTML结构本身出了问题。直接改代码比调样式更快见效。
标签闭合与嵌套错误怎么一眼揪出来
浏览器会“自动修复”不合法的嵌套（比如 <div><p>内容</p></div>
querySelector选不到目标、getBoundingClientRect()返回异常值。- 打开开发者工具的 Elements 面板，按
Ctrl+F（Win）或Cmd+F（Mac）搜，看有没有孤立的闭合标签； - 右键任意元素 → “Edit as HTML”，删掉几行再回车，如果整个页面结构塌陷，说明附近存在未闭合的
<div> 或 <code><section></section>； - 对
<table>、<code><ul></ul>、<select></select>这类严格嵌套容器，务必确认子元素只能是<tr>、<code><li>、<option></option>—— 混进一个<div> 就会触发匿名盒子，布局立刻不可控；<li>用 VS Code 安装 “Auto Rename Tag” 和 “Highlight Matching Tag” 插件，光标停在 <code><main></main>上，高亮会直接标出对应位置。 -
href和src值**必须用引号包裹**，<link href="style.css">在某些服务器上会解析失败，改成<link href="style.css">； - 本地双击打开 HTML 文件时，
./assets/img/logo.png能工作，但部署到 Nginx 后可能变成 404 —— 因为 Nginx 默认不支持file://协议下的相对路径跳转，统一改用根相对路径：/assets/img/logo.png； - 检查大小写：Linux 服务器区分
Image.jpg和image.jpg，而本地 Windows 不区分，上传前用ls -l确认文件名完全一致； -
<a href="javascript:void(0)"></a>这种写法虽能阻止跳转，但可访问性差，屏幕阅读器会读作“javascript void zero”，优先改用<a href="#" onclick="doSomething(); return false;"></a>或直接用<button></button>。 - 删掉所有
<!-- 注释 -->，它们不渲染，但占内存、拖慢 HTML 解析，构建时没开压缩的话，100 行注释 ≈ 多传 2KB； - 合并无意义的包裹层：
<div class="container"><div class="inner">...</div></div>直接写成<div class="container inner">...</div>，除非 CSS 依赖两层 class 才能生效； - 把
<img>的width和height属性补全（哪怕只是预估像素值），否则浏览器无法预留空间，加载后触发布局重排； - 禁用
display: none但仍在 DOM 中的模块，用if (condition) { container.remove() }真删掉，而不是靠 CSS 隐藏。 -
<main></main>、<article></article>、<aside></aside>默认是display: block，且不会生成匿名盒子，而一堆<div> 在没设 <code>display时，浏览器要反复推断上下文； - 误用语义标签反而更慢：比如把轮播图容器硬套
<nav></nav>，浏览器会额外注入导航逻辑，实测帧率下降 8–12fps； - 判断标准很简单：这个区域是否能独立存在、是否与主内容有明确逻辑关系？如果是，再选对应标签；如果只是为了撑样式，就老实用
<div>。<p>最常被忽略的是：HTML 错误往往不报红，只默默让后续所有 JS 和 CSS 变得不可靠。每次改完 HTML，顺手在 Elements 面板里点两下，比等用户反馈快得多。</p> </div>
路径和属性写错导致资源加载失败
链接点不动、图片不显示、CSS没生效，90% 是路径或属性拼写问题。浏览器 Network 面板里出现 404 的 .css 或 .js，别急着查服务器，先看 HTML 里怎么写的。
DOM 节点爆炸式增长引发卡顿
页面滚动掉帧、首屏慢、DevTools 里 Layout 频繁触发，先别优化 JS —— 先跑一句 document.querySelectorAll('*').length。超过 2000 就该动手砍了。
语义化标签不是加分项，是性能刚需
用 <header></header> 替代 <div class="header"> 不是为了 SEO 好听，是因为浏览器对语义标签有底层优化：解析快、计算样式少、<code>offsetHeight 调用响应更快。
