<title>是唯一强制标签，<meta charset="UTF-8">必须为首项（前1024字节内第一个<meta>），<meta name="viewport">须紧随其后，三者顺序错乱会导致乱码、缩放异常或SEO降权。
<title> 是唯一强制要求的标签，其余都是按需添加——加错位置、顺序混乱或遗漏关键项，页面可能不乱码但会缩放异常、SEO 降权、字体加载延迟，甚至脚本执行报 Cannot read property 'xxx' of null。
哪些标签必须放 head 里且有固定顺序？
浏览器只认 <title> 是强制项，但实际项目中，<meta charset="UTF-8"> 和 <meta name="viewport"> 必须存在，且顺序不能错：
-
<meta charset="UTF-8">必须是<head>中前 1024 字节内第一个<meta>，否则中文乱码、Ajax 提交字段为空、localStorage 读写异常都可能发生 -
<title>可以放在<meta charset>前或后，但绝不能在它之后再插其他<meta>（比如把viewport放在charset前面） -
<meta name="viewport">必须紧随<meta charset>之后，否则 iOS Safari 默认以 980px 渲染，小屏上文字极小、按钮点不中
<script> 放 head 里会不会阻塞页面？
会，但取决于怎么写：
- 没
src的内联脚本（如<script>console.log('hi')</script>）默认同步执行，遇到就停住 HTML 解析，DOM 还没建完就操作元素，大概率报错 - 带
src的外部脚本，默认也阻塞解析；加defer会等 DOM 构建完再执行，适合初始化逻辑；加async则一下载完就执行，顺序不可控，只适合无依赖的统计脚本 - 绝对不要把
defer或async用在内联脚本上——它们只对带src的有效
<link rel="stylesheet"> 和 <style> 的顺序影响什么？
顺序直接决定样式是否生效、是否闪屏（FOUC）：
立即学习“前端免费学习笔记（深入）”；
- 外部 CSS（
<link rel="stylesheet">）必须早于内联<style>，否则后者可能被前者重置，导致“写了样式却没效果” - 多个
<link>按依赖关系排：重置样式 → 组件库 CSS → 当前页定制样式；反着写容易覆盖失败 -
<style>里写@import是大忌——它会额外发请求、阻塞渲染，现代项目应直接用构建工具合并 CSS
最容易被忽略但一出问题就立刻暴露的三项
它们不出错不报警，但用户第一眼就能感知：
-
<meta charset>位置错了，页面刚打开就是一堆 ，刷新也无效 -
<link rel="icon">路径写相对路径（如favicon.ico），部署到子目录时图标消失，必须用绝对路径（如/favicon.ico） -
<meta name="description">内容和页面实际不符，搜索结果摘要错乱，点击率断崖下跌
