必须放在最前面，因为浏览器流式解析html时，若在遇到非ascii字符前未读取该标签，会按默认编码（如iso-8859-1）错误解码，导致乱码不可逆；它须是中首个生效标签，且html5仅认charset属性，不推荐旧式http-equiv写法。
为什么 <meta charset="UTF-8"> 必须放在最前面
浏览器解析 HTML 时是自上而下流式读取的，一旦遇到非 ASCII 字符（比如中文），而此时还没看到 <meta charset="UTF-8">，就会按默认编码（通常是 ISO-8859-1 或系统 locale）尝试解码，导致乱码已发生——后续再补这个标签也无效。
- 它必须是
中第一个实际起作用的标签（<title></title>可以在它后面，但不能在它前面） - 不要写成
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">：这是旧写法，HTML5 明确只认charset属性 - 如果用了构建工具（如 Vite、Webpack），也要确认输出 HTML 模板里这行没被删或错位
<meta name="viewport"> 的三个关键参数怎么配
移动端适配失效，八成是因为 content 值写得不严谨。常见错误是只写 width=device-width 却忽略缩放控制，结果用户双指放大后页面卡死、文字变糊。
-
width=device-width：让视口宽度匹配设备物理宽度（不是分辨率，是 CSS 像素宽度） -
initial-scale=1.0：页面首次加载时的缩放比例，设为1.0才能避免 iOS Safari 自动缩放标题文字 -
user-scalable=no要慎用：禁用缩放会损害可访问性，WCAG 不推荐；如真需锁定，至少加maximum-scale=1.0和minimum-scale=1.0保持一致
<title></title> 标签的长度与 SEO 实际影响
搜索引擎现在对 <title></title> 的截断逻辑更动态了，但“30 个中文字符以内”仍是安全线。超长标题不仅在搜索结果中被省略，还会在浏览器标签页里显示不全，影响用户识别。
- 别堆砌关键词，例如
<title>HTML 教程 | HTML 入门 | HTML5 学习 | Web 开发</title>—— 这类会被视为低质信号 - 移动端 SERP 通常只显示约 60–70 个英文字符（含空格），中文按 UTF-8 字节数算更稳妥
-
<title></title>内容不能含 HTML 标签，也不能有换行或制表符，否则解析异常
favicon 和 <link rel="icon"> 的兼容写法
很多网站 favicon 不显示，不是图标文件问题，而是 <link> 标签漏了关键属性或路径没配对。
- 必须同时提供
rel="icon"和type="image/x-icon"，否则 Firefox 可能忽略 - 推荐加一行
<link rel="icon" href="/favicon.ico" sizes="any">（sizes="any"是为了兼容旧版 Edge） - 现代做法建议额外加 PNG 版本：
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">，iOS 和 Android PWA 更认这个 - 路径务必以
/开头（绝对路径），避免相对路径在子路由下 404
<meta charset="UTF-8"> 的位置和 <link rel="icon"> 的 type 属性——它们不报错，但一上线就暴露问题，且很难定位。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
