必须将置于文件最开头，前面不能有任何字符（包括空格、注释、bom），否则浏览器会进入怪异模式，导致flex、grid、margin等样式失效；应明确声明语言以支持无障碍和seo；须紧随之后、所有含文本标签之前，确保前1024字节内被解析，避免乱码与脚本错误。
不写 ，浏览器大概率会进怪异模式（Quirks Mode），<code>flex、grid、甚至 margin 都可能失效——这不是 bug，是浏览器在“猜”你想要什么。
为什么 必须放在第一行
它不是注释，也不是可选标签，而是触发标准渲染模式的开关。哪怕前面多一个空格、一行注释、甚至 UTF-8 BOM 字节，都可能导致浏览器降级到怪异模式。
- 必须严格位于文件最开头，前面不能有任何字符（包括空行、
<!-- -->、BOM） 或 <code> 也合法，但小写 <code> 更易被 lint 工具识别- 旧项目里看到
..>？那是过时写法，现代项目只用
加。不是“建议”，是实际影响：屏幕阅读器靠它切换语音，CSS 的 :lang() 伪类靠它匹配，搜索引擎也用它判断内容语言。不写默认为 und（未定义），等于放弃这部分语义。
-
lang="zh"和lang="zh-CN"都可，后者更精确（区分简体中文与繁体） - 如果页面混用中英文，可在局部元素上覆盖，比如
<span lang="en">API</span> - 不要写成
—— 属性名是lang，不是language
<meta charset="UTF-8"> 为什么必须放
浏览器解析 HTML 是流式进行的。如果 <meta charset> 出现在 <title></title> 后面，前面那部分标题文字就可能被按系统默认编码（比如 GBK）错误解码，导致乱码或 emoji 显示为方块。
- 必须紧贴
开始标签之后，越早越好（理想位置：第二行） - 不能省略引号：
<meta charset="UTF-8">在某些解析器下会失败 - 不需要写
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">——<meta charset>是 HTML5 简化写法，等效且更安全
<meta name="viewport"> 在移动端不生效的常见原因
写了却缩放异常？大概率是位置或值的问题。这个标签只对移动浏览器和桌面 Chrome 的响应式模拟起作用，但它不会“自动适配”，得靠参数配合 CSS 单位（如 rem、vh）才能真正生效。
- 必须写在
里，且要在所有 CSS 和 JS 加载前（否则样式可能已按错误宽度计算） -
content="width=device-width, initial-scale=1.0"是底线配置；漏掉initial-scale=1.0，iOS Safari 可能默认放大 1.5 倍 - 不要加
user-scalable=no—— 这会破坏可访问性，Lighthouse 直接扣分 - 如果用了
rem布局，记得 JS 动态设置根字体大小时，要监听orientationchange事件，否则横竖屏切换后rem基准错乱
真正容易被忽略的，不是某个标签怎么写，而是它们之间的**顺序依赖**：<meta charset> 影响文本解析，<meta viewport> 影响布局上下文，lang 影响 DOM 行为——这些不是孤立配置，而是一条隐性执行链。写错一行位置，后面所有样式和脚本都可能在错误前提下运行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
