必须置于最开头，否则浏览器按默认编码（如windows-1252）解码中文标题致乱码；lang属性缺失影响屏幕阅读器发音与seo；viewport缺失导致移动端布局异常。
charset 不写或写错，中文直接变 ；lang 属性漏掉，屏幕阅读器念不准，SEO 也悄悄掉权重；viewport 缺失，手机上页面缩成一团——这些不是“小问题”，是新手一保存就立刻可见的硬伤。
为什么 <meta charset="UTF-8"> 必须放在
浏览器解析 HTML 是从上到下逐行读的。一旦遇到中文字符，而此时还没看到 <meta charset="UTF-8">，它就会按默认编码（比如 Windows-1252）去解码，结果就是乱码。哪怕你把它放在 <title></title> 后面，中间那几十毫秒的误判也足够让标题显示异常。
- 必须紧跟在
开始之后，位置宁早勿晚 - 不要用
GB2312或GBK：现代项目统一用UTF-8，兼容性、扩展性、工具链支持都更好 - 记事本保存时务必选“UTF-8”编码，而不是“ANSI”——后者在 Win10/Win11 下默认就是 GBK，极易踩坑
这个属性实际影响三件事：搜索引擎对语言归属的判断、浏览器拼写检查的语言切换、以及最重要的——屏幕阅读器的发音逻辑。比如“行”字在中文里有 xíng/háng 两种读音，lang="zh-CN" 能帮辅助技术更准确地选择语境。
- 值必须规范：
zh-CN（简体中文）、zh-TW（繁体中文）、en或en-US，不能写成zh或chinese - 不写
lang不报错，但 WCAG（无障碍标准）明确要求必须声明 - 如果页面混用中英文，主语言仍按主体内容定，不必为个别英文词额外包裹
<span lang="en"></span>
<meta name="viewport"> 在手机上失效的常见原因
写了却没效果？大概率是被其他 meta 标签干扰，或者路径/部署环节出了问题。
- 确保它出现在
内，且没有被 JavaScript 动态插入——静态 HTML 中必须硬编码 -
content值别手误写成width=device-width, initial-scale=1（漏了.0），某些 Android WebView 会忽略整个声明 - 本地双击打开
file://协议的 HTML 文件时，部分浏览器（尤其是旧版 Safari）会无视 viewport，必须通过本地服务器（如 Python -m http.server）预览才真实
新手最容易忽略的「结构完整性」细节
你以为只要能显示就行？浏览器其实在后台默默补全了很多东西。但一旦补全逻辑出偏差，后续 CSS 选择器或 JS 获取元素就可能失效。
-
标签不能省：没有它，document.documentElement会是null，很多 JS 库初始化失败 -
和可以省略，但强烈不建议——它们是语义边界，缺失后<meta>放错位置（比如塞进）会导致部分属性不生效 -
<title></title>必须存在：不仅影响标签页显示，还是 PWA 添加到桌面时的默认名称来源
真正卡住新手的，往往不是“不会写什么”，而是“不知道哪一行缺了什么”。HTML 的容错性太强，掩盖了结构性缺陷；等你加了 CSS 或 JS，问题才集中爆发——那时再回头查 里的三行 meta，已经绕了一大圈。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
