必须将charset声明放在HTML最前面，因为它是浏览器解析HTML的“第一把钥匙”，若未在前1024字节内声明，浏览器会按默认编码解码，导致含中文、emoji等的JS字符串报SyntaxError。
为什么必须放在最前面？
它不是可有可无的装饰，而是浏览器解析HTML的“第一把钥匙”。如果<meta charset="UTF-8">没在<title></title>之前、且位于前1024字节内，浏览器会按默认编码（如ISO-8859-1）解码——这时含中文、emoji或特殊符号的JS字符串就会触发Uncaught SyntaxError: Invalid or unexpected token，尤其在<script>里写死中文提示时极易复现。</script>
常见错误包括：
- 把
<meta charset="UTF-8">写在<title></title>之后 - 在
<meta charset="UTF-8">前插入了注释、空行或BOM头 - 同时写了
<meta charset="UTF-8">和<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">，造成冗余甚至冲突
viewport meta标签怎么写才不踩坑？
关键不是“写了”，而是“写对位置+写对参数组合”。<meta name="viewport" content="width=device-width, initial-scale=1">必须紧跟<meta charset="UTF-8">之后，且不能被其他<meta>或<link>打断。
容易被忽略的风险点：
立即学习“前端免费学习笔记（深入）”；
-
maximum-scale=1.0, user-scalable=no会禁用双指缩放，在iOS Safari和部分Android WebView中直接导致辅助功能失效（如视力障碍用户无法放大阅读） -
width=375这类固定值在UC等非标准内核浏览器里可能强制拉伸布局，反而破坏响应式 - 嵌入iframe的微页面/小程序WebView中，该标签可能被宿主环境忽略，需额外通过JS动态注入
content-security-policy要防什么？怎么配才有效？
CSP不是加了就安全，而是必须明确声明“只允许什么”，否则等于没设。比如只写<meta http-equiv="Content-Security-Policy" content="default-src 'self'">，但没放开script-src，连内联<script></script>都会被拦截。
实操建议：
- 开发阶段先用
report-only模式：<meta http-equiv="Content-Security-Policy-Report-Only" content="...">，配合report-uri收集违规行为 - 禁止使用
'unsafe-inline'和'unsafe-eval'，改用nonce或hash白名单控制内联脚本 - 若页面依赖CDN资源（如Google Fonts、jQuery CDN），必须显式列出域名，通配符
*在script-src或style-src中基本无效
lang属性和author等元数据有什么实际影响？
直接影响屏幕阅读器发音语调，写错成lang="zh"或漏写，会导致语音合成生硬难懂；而<meta name="author" content="xxx">这类字段纯属自定义，搜索引擎不索引，也不影响渲染，但若混用过时的http-equiv="content-language"，反而可能干扰HTTP响应头中的Content-Language逻辑。
真正该关注的是：
-
lang必须与页面主体语言严格一致，简体中文用zh-CN，繁体中文用zh-TW或zh-HK -
<meta name="robots" content="noindex, nofollow">这类指令需确认是否真需要屏蔽爬虫，误配会导致SEO流量归零 - 所有
name为viewport、description、keywords的<meta>，都应在<title></title>之后、<link>之前集中声明，避免被解析器跳过
最常被绕过的细节是：meta标签顺序不是风格问题，而是浏览器解析器的硬性规则。哪怕只是多了一个空格或换行，都可能让charset失效、viewport被忽略、CSP降级为report-only——这些不会报错，但会在特定设备或辅助工具下悄然崩坏。
