浏览器解析HTML时会自动修正错误结构，导致Elements面板DOM与源码不一致，需以面板为准；路径、编码、属性引号等细节疏忽易引发静默失效。

浏览器 Elements 面板显示的 DOM 和你写的 HTML 对不上

这不是 bug，是浏览器在“救场”——遇到未闭合、交叉嵌套或非法结构时，它会按自己的规则重排 DOM。你写的是

文本

，实际解析出来可能是

文本

，甚至多出几个空

。后果是 CSS 选中失效、querySelector 找不到目标、JS 操作位置偏移。

• 永远以 Elements 面板为准，不是源码视图
• 重点盯 、
  、
  内部——这些标签的嵌套容错极低，一个错位就整块塌陷
  用 VS Code 装 Auto Close Tag 插件，但别全信：它不处理模板字符串里的 HTML 或条件注释

  img、script、link 加载失败但控制台没报错

  常见原因是路径拼写、大小写、协议或 MIME 类型不匹配。比如本地双击打开 HTML 文件（file:// 协议），fetch 请求会被 CORS 拦截，但控制台只显示“Network error”，不提 CORS；又或者服务器返回 text/plain 而不是 text/css，CSS 就静默失效。

  

  Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

  实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

  下载
  • Network 面板里点开每个请求，看 Status 是不是 200，Preview 是否有内容，Response Headers 的 Content-Type 是否正确
  • 图片路径别用 images/logo.png 硬写，优先用相对路径并确认当前 HTML 所在层级
  • 本地开发务必起服务：npx serve 或 VS Code 的 Live Server，绕过 file:// 限制

  alt、href、src 属性值缺失或引号不全

  属性值不加引号（如 href=about.html）在简单场景下能运行，但一旦值含空格、& 或 =，就会截断或解析失败；alt 空着（）虽不报错，却破坏可访问性，且部分屏幕阅读器会跳过该元素。

  • 所有属性值统一用双引号包裹：class="header"，不是 class=header
  • alt 不要留空，哪怕写 alt="装饰性图片" 或 alt=""（仅限纯装饰图）
  • href 和 src 值为空字符串时，浏览器会尝试加载当前页面或根路径，极易引发意外请求

  DOCTYPE 缺失或 位置靠后

  没有 ，浏览器进怪异模式，盒模型、浮动、Flex 布局行为全乱； 如果不在 最前面，中间夹了其他 或 ，部分浏览器会忽略它，导致中文变方块。

  • 必须是文件第一行，前面不能有任何字符（包括空格、BOM）
  • 必须是 中第一个标签，紧随 开始
  • 服务端响应头 Content-Type: text/html; charset=utf-8 优先级高于 HTML 内声明，Nginx/Apache/PHP 都得同步配

  真实项目里最麻烦的不是语法错误本身，而是它被浏览器悄悄修正后，只在特定设备、特定缩放比例或特定 JS 执行时机下才暴露——等你看到问题，DOM 已经被改得面目全非。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！