doctype声明错误或缺失会导致浏览器进入怪异模式，引发布局错乱、flex/grid失效、api异常；必须严格写作，位于第一行且前面无任何字符。

DOCTYPE 声明写错或缺失会导致什么

浏览器会退回到怪异模式（quirks mode），页面布局可能错乱，CSS flex/grid 失效，getBoundingClientRect() 等 API 返回值异常。尤其在 IE 或旧版 Edge 中表现更明显。

必须写成 ，注意：

• 全大写 DOCTYPE，小写 html，中间有空格，前后无斜杠
• 不能写成 或 <code>!DOCTYPE html?> —— 后者会被当作文本节点处理
• 必须是文档第一行，前面不能有任何字符（包括 BOM、空格、注释）

的 lang 属性为什么不能省略

省略后屏幕阅读器可能用错误语言朗读，SEO 识别地域相关性下降，部分浏览器默认使用系统语言（比如英文 Win10 可能读中文内容为英语音调）。

lang 值推荐按 IETF BCP 47 标准写：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 简体中文用 zh-CN，繁体中文用 zh-TW 或 zh-HK
• 不要写 zh 单独存在，缺乏地域信息，对多语言站点不友好
• 如果页面混用语言，可在局部元素上覆盖，例如 <p lang="en">Hello</p>

<meta charset="UTF-8"> 放错位置会怎样

必须放在 内、且尽可能靠前（最好第二行）。如果它出现在 <title></title> 后面，或被 <script></script>、<link> 标签挡住，浏览器可能已按默认编码（如 ISO-8859-1）解析了前面的字节，导致标题乱码、CSS 路径解析失败。

常见陷阱：

• VS Code 保存时选了 “UTF-8 with BOM”，Windows 记事本默认带 BOM —— 浏览器会把 BOM 当作不可见字符，破坏 的首行地位
• 复制粘贴代码时带了隐藏的零宽空格（U+200B），也会让 charset 失效
• 某些 CMS 或模板引擎自动注入脚本，把 meta 挤到后面，需检查最终 HTML 源码

viewport meta 标签漏掉的典型症状

移动端页面文字极小、无法缩放、横向滚动条莫名出现，iOS Safari 里点击按钮无响应（因为点击区域被缩放压缩）。

标准写法是：<meta name="viewport" content="width=device-width, initial-scale=1.0">，注意：

• width=device-width 是核心，不能只写 initial-scale=1.0
• 不要加 user-scalable=no —— 违反 WCAG 可访问性要求，且 iOS 10+ 已限制该属性生效
• 如果项目需适配 iPad Pro 等高 DPI 设备，可补充 maximum-scale=1.0 防止双击放大，但慎用

实际搭建时最容易被忽略的不是标签怎么写，而是它们的**顺序和上下文约束**：DOCTYPE 必须顶格、lang 属性影响整个 DOM 树、charset 必须早于所有文本解析、viewport 必须在 head 里且不能被其他 meta 干扰。这些不是“语法正确就行”，而是浏览器解析器的硬性规则。

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