<meta charset="UTF-8">必须置于<head>最顶部，紧贴起始标签后，前1024字节内无其他内容（含注释、空格、<title>），否则浏览器将回退至ISO-8859-1等默认编码导致乱码。
HTML 的 <meta> 标签没有“全攻略”这种东西——它只是按需使用的声明工具，不是功能模块。面试问得多，是因为容易混淆语义、滥用或忽略兼容性细节。
charset 声明必须放在最前面
浏览器解析 HTML 时，一旦遇到非 ASCII 字符（比如中文），而 <meta charset> 又没在前 1024 字节内出现，就可能触发编码回退（如 ISO-8859-1），导致乱码。这不是“偶尔出错”，是确定性行为。
-
<meta charset="UTF-8">必须写在<head>最顶部，紧贴<head>开始标签之后，前面不能有任何内容（包括注释、空格、<title>） - 不要写
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">—— 这是旧写法，且解析优先级更低，现代 HTML5 只认charset属性 - 服务端 HTTP Header 中的
Content-Type: text/html; charset=utf-8优先级高于<meta>，但不能依赖它覆盖前端缺失声明
viewport 设置不等于响应式，但写错会直接失效
<meta name="viewport"> 控制移动端缩放行为，但它的参数组合稍有偏差，页面就会“不缩放”或“不可缩放”，和设计稿完全对不上。
- 最基本可用组合：
<meta name="viewport" content="width=device-width, initial-scale=1.0"> -
width=device-width是关键——它让布局视口宽度等于设备物理像素宽度除以 devicePixelRatio 后的 CSS 像素数；写成width=375或width=1024会导致横滚或缩放异常 - 禁止用户缩放（
user-scalable=no）已被 iOS Safari 10+ 忽略，安卓部分浏览器也逐步弃用，别再当“防作弊手段”用 - 如果项目用 rem/vw 布局，还要注意
initial-scale=1.0和maximum-scale=1.0的组合是否影响调试时的手动缩放
SEO 相关 meta 多数已失效，但 description 仍被 Google 用
Google 在 2019 年后明确表示：keywords 完全不参与排名；author、generator 等只用于内部日志，不影响索引。唯一还起实际作用的是 description，但它不是关键词堆砌区。
立即学习“前端免费学习笔记（深入）”；
-
<meta name="description" content="...">内容会被 Google 搜索结果摘要直接采用，长度建议控制在 155–160 字符（含空格），超长会被截断 - 不要重复标题文字，也不要写“本站提供XX服务”，要描述页面核心价值，比如：“React 18 useTransition 实战：如何避免 UI 卡顿并保留用户输入”
-
robots仍有用：<meta name="robots" content="noindex, nofollow">可阻止收录，但仅适用于无法配置服务器头或 robots.txt 的临时页面 - Open Graph 和 Twitter Card 使用
property或name（如<meta property="og:title" content="...">），它们不属于传统 SEO meta，但分享到社交平台时必须存在
HTTP-Equiv 不是 JS 替代品，滥用会阻塞渲染
http-equiv 模拟 HTTP 响应头，但浏览器执行它时，会同步处理、可能中断解析流程。尤其 refresh 和 set-cookie 已被主流浏览器限制或废弃。
-
<meta http-equiv="refresh" content="5; url=/new">是跳转兜底方案，但会触发完整页面重载，且无状态传递能力；现代应用应优先用 JSwindow.location.replace() -
http-equiv="X-UA-Compatible"只对 IE 有效，且仅在 IE8–IE11 生效；content="ie=edge"已无意义，可安全删除 -
http-equiv="Content-Security-Policy"虽支持，但 CSP 应优先通过 HTTP Header 发送；用<meta>设置时，无法设置report-uri或report-to，且策略生效时机晚于 Header 版本
真正难的不是记住所有 name 值，而是判断某个 <meta> 是否真被当前目标环境（浏览器、爬虫、微信 WebView、iOS WKWebView）识别和执行。比如微信内置浏览器对 apple-mobile-web-app-capable 的支持程度，就和 Safari 不完全一致——这种差异不会写在 MDN 上，得靠实测。
