必须置于最前，否则浏览器按默认编码错误解析中文等字符导致乱码；其位置错误不可逆，且不能用http-equiv替代；服务端响应头可覆盖它，但它是前端最后一道防线。
<meta charset="UTF-8"> 必须放在 最靠前位置，否则中文、emoji 或特殊符号大概率乱码——这不是浏览器兼容性问题，是解析器已按错误编码读取了前面的字节。
为什么 <meta charset> 位置错了会直接导致乱码
浏览器在解析 HTML 时，一旦遇到非 ASCII 字符（比如中文），会立刻回查已读取的 <meta> 标签来确认编码。如果 <meta charset="UTF-8"> 出现在 <title></title> 或其他 <meta> 后面，前面的内容（包括 <title></title> 文本本身）可能已被按默认编码（如 ISO-8859-1）错误解码，后续无法挽回。
- 必须写成
<meta charset="UTF-8">，不能用<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">—— 后者在部分旧版 Safari 和某些嵌入式 WebView 中不触发编码重判 - 服务端响应头中的
Content-Type若含charset，会覆盖该标签；但前端无法控制 CDN 或 CMS 的响应头时，这个<meta>就是最后一道防线 - 检查方式：打开开发者工具 → Network → 点开 HTML 请求 → 查看 Response Headers 里的
Content-Type，再对比 Preview 标签页是否正常显示中文
<title></title> 和 <meta name="description"> 的实际作用边界
这两个标签不决定排名，但分别控制搜索结果中的标题行和摘要行，直接影响用户是否点进来。搜索引擎对它们有硬性截断逻辑，不是“写了就生效”。
-
<title></title>建议长度 50–60 字符（含空格），超出部分会被省略为 …；避免堆砌关键词，例如<title>前端|HTML|CSS|JavaScript|教程</title>反而降低可信度 -
<meta name="description" content="">不参与排序，但 CTR（点击率）下降常源于它与页面内容不符或过于笼统；长度建议 70–160 字符，且需真实反映当前页主体内容 - 单页应用（SPA）中，静态 HTML 的
<title></title>和<meta name="description">不随路由变化——必须用document.title或框架专用方案（如useHead、React Helmet）动态更新
<meta name="viewport"> 在移动端失效的常见原因
写了 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 却仍缩放异常，大概率不是代码没写，而是被其他逻辑覆盖或干扰。
- 该标签必须出现在
内，且不能被 JavaScript 动态插入（部分 iOS WebView 对动态注入的<meta>视口指令不识别） - 若页面通过 iframe 嵌入，父页面的视口设置可能影响子页面；尤其在微信内置浏览器中，需额外加
maximum-scale=1.0, user-scalable=no防止双指缩放（但慎用，影响可访问性） - CSS 中若存在
transform: scale()或强制固定宽度（如width: 375px）会破坏响应流，视口声明本身无法抵消这类样式副作用
作者信息该写在哪：三种方式的实际效力差异
作者元数据对 SEO 几乎无影响，但对内容溯源、CMS 管理和部分辅助技术有实际用途。不同写法的可见性与可控性差别很大。
-
<meta name="author" content="张明 <zm@example.com>">：仅存在于 HTML 源码，搜索引擎不索引，但 CMS 后台或爬虫可提取；邮箱需手动 URL 编码（如%3Czm%40example.com%3E）才安全 - HTTP 响应头
Author: 张明 <zm></zm>：需服务器配置（Nginx/Apache），前端不可控，但比 HTML 元素更难被篡改；可用 curl 或 Network 面板验证是否存在 -
<link rel="author" href="/humans.txt">：已基本废弃，现代浏览器和爬虫均不处理；/humans.txt文件本身仍可人工维护，但不属于标准元数据链路
真正容易被忽略的是：所有这些元数据标签的顺序不是风格偏好，而是解析依赖关系。比如 <meta charset> 必须早于 <title></title>，<title></title> 必须是 中第一个可渲染内容标签——错位一两行，就可能让整页语义从源头失准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
