标签至关重要，必须正确使用：字符编码用且置于最前；viewport需含initial-scale=1.0防缩放异常；description要简洁真实，robots控制收录，keywords已失效；http-equiv多数被现代机制替代。
<meta> 标签不是装饰品，它不显示在页面上，但浏览器、搜索引擎、社交平台、缓存系统全靠它做判断——漏掉或写错，轻则乱码、跳转失败，重则被搜索引擎降权、移动端缩放异常。
控制字符编码必须用 charset，不能靠 http-equiv="Content-Type"
早期写法 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 在 HTML5 中已过时，且部分浏览器（如旧版 Safari）可能忽略。HTML5 明确要求使用简化形式：<meta charset="utf-8">。这个标签必须出现在 最前面（越靠前越好），否则在解析到它之前出现的中文、emoji 等可能已被错误解码，导致首屏乱码。不要把它放在 CSS 或 JS 引入之后。
viewport 不只是“适配手机”，它直接决定页面能否正常缩放
常见错误是只写 <meta name="viewport" content="width=device-width">，漏掉 initial-scale=1.0。结果是：iOS Safari 会强制将页面渲染为 980px 宽，再整体缩小显示，文字模糊、点击区域偏移。正确写法必须包含缩放控制：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">。注意：user-scalable=no 会影响可访问性，仅在特定场景（如 H5 游戏、表单锁定）使用；多数网站应保留缩放能力。
description 和 robots 影响搜索结果和爬虫行为
description 不是 SEO 排名因子，但它是搜索结果摘要的默认来源——长度超过 155 字符会被截断，含堆砌关键词反而降低点击率。写法要像一句话简介：<meta name="description" content="用纯 CSS 实现响应式导航栏，兼容 IE11+，无 JS 依赖。">。robots 则直接影响收录：<meta name="robots" content="noindex, nofollow"> 会让当前页彻底不出现在搜索结果中，测试环境常用；而 content="index, follow" 是默认值，不写也行。别误用 keywords，Google 自 2009 年起已完全忽略它。
立即学习“前端免费学习笔记（深入）”；
http-equiv 模拟 HTTP 头，但多数已被现代机制替代
<meta http-equiv="Refresh" content="5; url=/new-page"> 能跳转，但会中断页面生命周期、丢失 referrer、被 Chrome 视为“非用户触发跳转”而拦截；应改用 JS 的 window.location.href 或服务端 302。同理，http-equiv="Expires" 和 "Pragma" 控制缓存的效果极不可靠，现代前端应交由 HTTP 响应头（Cache-Control）管理。唯一还值得保留的是 <meta http-equiv="X-UA-Compatible" content="IE=edge">，仅用于兼容遗留 IE11 场景，新项目可直接去掉。
