<head>中仅<title>为HTML规范强制要求且唯一必需；<meta charset="UTF-8">须置于最前防乱码，<meta name="viewport">应紧随其后保移动端渲染，<base><link><style><script>等按功能需谨慎 placement 与顺序。
<head> 里能放的子标签，不是“越多越好”，而是“按需且守序”。只有 <title> 是 HTML 规范强制要求的，其余全看功能需要——加错位置、漏关键项、顺序颠倒，都会在用户看不见的地方埋雷。
哪些标签必须放且只能放 <head> 里
浏览器解析时会严格校验这些标签的位置，放错地方（比如塞进 <body>）可能被自动纠正，也可能直接失效：
-
<title>：唯一必需，且整个文档只能有一个；内容不能含 HTML 标签，否则会被当作纯文本截断 -
<meta charset="UTF-8">：虽非强制，但必须放在<head>最开头；否则浏览器可能先用默认编码（如 ISO-8859-1）解析后续内容，触发重解析，导致中文乱码或样式错位 -
<meta name="viewport">：移动端页面不加会导致缩放异常；建议紧接<meta charset>后，避免 iOS Safari 等早期渲染 bug -
<base>：若使用，必须带href或target属性；它会影响页面内所有相对 URL 的解析基准，放错位置会导致所有链接跳转错误
<link> 和 <style> 的加载顺序很关键
CSS 是渲染阻塞资源，浏览器按 <head> 中出现顺序逐个加载并应用，顺序一错，轻则 FOUC（闪白），重则样式覆盖失败：
- 外部 CSS（
<link rel="stylesheet">）必须早于内联<style>；否则后者声明的样式可能被前者重置 - 多个
<link>按依赖顺序排：基础重置（如 normalize.css）→ 组件库（如 Bootstrap）→ 当前页定制样式 -
<style>内禁止用@import；它会引发额外网络请求并阻塞渲染，现代项目应全部走构建工具合并
<script> 放 <head> 里要非常谨慎
默认脚本会阻塞 HTML 解析，放 <head> 里等于让整个页面“卡住等 JS 执行完”，除非有明确理由：
立即学习“前端免费学习笔记（深入）”；
- Google Analytics、Clarity 等监测脚本可放
<head>，但务必加defer；async不适合依赖 DOM 的逻辑，执行时机不可控 - 内联脚本（无
src）若操作 DOM，必须包裹在DOMContentLoaded或document.readyState === 'complete'判断中，否则大概率报Cannot read property 'xxx' of null - 绝大多数业务 JS 应移至
<body>底部，或用defer+ 外部文件方式加载
容易被忽略但一出问题就首当其冲的细节
这些标签不出错不报警，但一旦配置失误，用户第一眼看到的就是缺陷：
-
<meta charset>位置不对 → 页面加载一半突然乱码，刷新也不解决 -
<link rel="icon">路径写成相对路径且未配<base>→ favicon 不显示，但控制台零报错 -
<title>里写了<span>或其他 HTML 标签 → 浏览器只取纯文本，多余标签被丢弃，SEO 描述变空 - HTML5 已废弃
<head profile="...">→ 现代浏览器直接忽略，别再抄老教程代码
真正难的不是“能放什么”，而是“为什么这个位置、这个顺序、这个属性值才对”。很多问题不是语法错，而是语义和加载时机错——而这些错，往往只在真机、弱网、旧浏览器上才暴露出来。
