必须写的是title，其他如meta charset="UTF-8"、meta name="viewport"、link rel="icon"、base等按需添加但极易遗漏；script和link默认阻塞解析或渲染，需用async/defer/preload优化。
head 标签本身没有实际渲染作用，但它的存在和内部结构直接影响页面能否正确解析、SEO 是否生效、资源是否阻塞渲染。它不接受 profile 这类已废弃属性，只支持 HTML 全局属性（如 id、class、data-*），真正起作用的是它包裹的子元素。
哪些子标签必须写、哪些容易漏掉
必须存在的只有 title —— 浏览器报错不会发生，但 SEO 和可访问性会直接受损；其他标签按需添加，但以下三类几乎每个现代页面都该有：
-
meta charset="UTF-8"：不加会导致中文乱码，且必须放在head最前面（早于所有script和style） -
meta name="viewport" content="width=device-width, initial-scale=1.0"：缺失时移动端页面会缩放异常，文字小到无法阅读 -
title：内容应控制在 50–60 字符内，避免被搜索引擎截断，且不能全站重复
漏掉 base 或 link rel="icon" 不影响加载，但会影响链接跳转逻辑或 favicon 显示，属于“后期才暴露的问题”。
script 和 link 放在 head 里会不会卡住页面
会，而且非常容易被忽略。默认同步加载的 script 会阻塞 HTML 解析，导致白屏时间变长；link rel="stylesheet" 虽不阻塞解析，但会阻塞渲染（render-blocking）。
立即学习“前端免费学习笔记（深入）”；
- 用
async：仅适用于无依赖的独立脚本（如统计代码），加载完立即执行，顺序不确定 - 用
defer：适用于依赖 DOM 的脚本，等 HTML 解析完再按顺序执行，推荐用于主业务 JS - 用
link rel="preload"：提前加载关键 CSS/字体，但需配合as属性，否则浏览器可能忽略
错误写法：<script src="app.js"></script>（没加任何属性）—— 这是首屏性能杀手之一。
meta 标签的 name 和 http-equiv 到底怎么选
两者语义不同，混用会导致行为不可控：
-
name用于描述页面元信息，供搜索引擎或浏览器 UI 使用，比如name="description"、name="author" -
http-equiv是模拟 HTTP 响应头，影响浏览器解析行为，比如http-equiv="Content-Security-Policy"、http-equiv="refresh" -
charset是特例：它是meta的单独属性，不是name或http-equiv，且只能出现一次
常见错误：<meta name="Content-Type" content="text/html; charset=utf-8"> —— 这个写法无效，浏览器只认 <meta charset="UTF-8">。
最常被低估的是 base 标签：一旦设了 href，所有相对路径（包括 img、a、script、link）都会基于它解析，本地开发时容易因路径错位导致资源 404，上线前务必验证。
