DOCTYPE声明错误或缺失会导致浏览器进入怪异模式，引发布局错乱、flex/grid失效、API异常；必须严格写作<!DOCTYPE html>，位于第一行且前面无任何字符。
DOCTYPE 声明写错或缺失会导致什么
浏览器会退回到怪异模式（quirks mode），页面布局可能错乱，CSS flex/grid 失效，getBoundingClientRect() 等 API 返回值异常。尤其在 IE 或旧版 Edge 中表现更明显。
必须写成 <!DOCTYPE html>，注意：
- 全大写
DOCTYPE，小写html，中间有空格，前后无斜杠 - 不能写成
<!doctype html>或<?!DOCTYPE html?>—— 后者会被当作文本节点处理 - 必须是文档第一行，前面不能有任何字符（包括 BOM、空格、注释）
<html lang="zh-CN"> 的 lang 属性为什么不能省略
省略后屏幕阅读器可能用错误语言朗读，SEO 识别地域相关性下降，部分浏览器默认使用系统语言（比如英文 Win10 可能读中文内容为英语音调）。
lang 值推荐按 IETF BCP 47 标准写：
立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 简体中文用
zh-CN，繁体中文用zh-TW或zh-HK - 不要写
zh单独存在，缺乏地域信息，对多语言站点不友好 - 如果页面混用语言，可在局部元素上覆盖，例如
<p lang="en">Hello</p>
<meta charset="UTF-8"> 放错位置会怎样
必须放在 <head> 内、且尽可能靠前（最好第二行）。如果它出现在 <title> 后面，或被 <script>、<link> 标签挡住，浏览器可能已按默认编码（如 ISO-8859-1）解析了前面的字节，导致标题乱码、CSS 路径解析失败。
常见陷阱：
- VS Code 保存时选了 “UTF-8 with BOM”，Windows 记事本默认带 BOM —— 浏览器会把 BOM 当作不可见字符，破坏
<!DOCTYPE html>的首行地位 - 复制粘贴代码时带了隐藏的零宽空格（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防止双击放大，但慎用
