<!DOCTYPE html>必须顶格写在第一行，前面不能有任何字符（含BOM、空格、注释），否则触发怪异模式，导致box-sizing失效、position: sticky不工作、getBoundingClientRect()异常。

!DOCTYPE html 必须顶格写在第一行，前面不能有任何字符（包括 BOM、空格、注释），否则浏览器会进怪异模式——box-sizing 失效、position: sticky 不工作、getBoundingClientRect() 返回异常值。

VS Code 里怎么一键生成标准 HTML 骨架？

别手敲 !DOCTYPE，也别复制粘贴旧模板。在 VS Code 新建一个 .html 文件，输入 ! 后按 Tab，Emmet 就会自动补全完整结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
</body>
</html>

这个行为依赖 Emmet 默认启用（VS Code 2024+ 版本默认开启）。如果没反应，检查设置里 emmet.triggerExpansionOnTab 是否为 true；lang 属性默认是 en，你得手动改成 zh-CN——写成 zh 或 zh_CN 会导致屏幕阅读器发音错乱、拼写检查器不匹配简体词库。

<meta charset="UTF-8"> 为什么必须紧贴 <head> 开头？

浏览器只扫描 <head> 前 1024 字节来确定编码。如果它被 <title>、JS 注释或空行挡在后面，中文就会变成方框，且刷新也无法恢复。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

立即学习“前端免费学习笔记（深入）”；

• <meta charset="UTF-8"> → <meta name="viewport"> → <title> 是推荐顺序
• 别写 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">——HTML5 已废弃，Chrome 120+ 直接忽略
• 大小写敏感：UTF-8 正确，utf8 或 utf-8（小写 u）可能被部分解析器拒识
• 服务器响应头不能替代它——HTTP 头可被覆盖或缺失，<meta> 是最终兜底

保存文件时最容易被忽略的三个编码陷阱

用记事本或某些编辑器另存为时，默认可能选的是 ANSI 或 UTF-8 with BOM，这会导致开头多出不可见字节 EF BB BF，直接触发怪异模式。

• VS Code 右下角确认编码显示为 UTF-8（不是 UTF-8 with BOM）
• 用命令行检查：运行 hexdump -C your.html | head -n 1，前三个字节必须是 3c 21 44（即 <! 的十六进制）
• 保存时显式选择 UTF-8 编码，不要依赖“自动检测”

真正卡住人的往往不是不会写标签，而是开头那几行看不见的字符、编码格式和属性值大小写——这些细节一旦出错，整个页面渲染逻辑就偏了，而且错误不报在控制台，只悄悄失效。