先记住这个答案
<head> 承载文档级信息：标题、编码、视口、描述和资源链接等，浏览器会据此解码与加载页面。元素放在这里不等于自动完成 SEO；例如 <meta name="description"> 只是提供摘要候选，页面正文仍要可读。写基础骨架时先保证字符编码与页面标题正确，再按实际需要加视口和资源声明。
head放文档元数据charset应尽早声明- viewport 建立移动布局视口
title与正文标题职责不同
乱码和缩小页面先查 head
一个页面中文标题乱码，手机上又像缩小的桌面网页。先查 HTTP 响应的编码与 <meta charset> 是否一致，再看 <meta name="viewport">。<title> 会用于浏览器标签和搜索结果标题候选，description 提供页面摘要候选；它们应和正文内容一致。不要把脚本、样式、标题等都按随机顺序堆放，尤其字符编码声明应尽早出现。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>订单详情｜示例站</title>
<meta name="description" content="查看订单商品与配送进度">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
</head>浏览器在解析文档开头时需要尽早确定编码，避免先按错误编码解释后面的文字。
示例的 <meta charset> 要尽早出现在文档头部，让浏览器在读取中文标题和描述前确定编码。<title> 是浏览器标签文字，也是搜索摘要的重要候选；可见正文标题则仍由 <h1> 等元素表达。资源链接里的图标路径若返回 404，不会因为声明在 <head> 中就自动有回退，仍需查看网络请求与部署路径。
元数据不等于正文结构
title 是文档标题，不等于页面里的一级标题；meta description 是摘要提示，并不保证搜索引擎原样显示。viewport meta 影响移动浏览器建立布局视口的方式，CSS 才决定具体列数与字体。资源链接和脚本也可放在 head，但加载与执行行为取决于元素类型和属性，不能简单认为放进去就一定阻塞页面。
例如页面出现乱码时，先看响应头和文档的编码声明是否一致，而不是只给某个段落换字体；手机页面像缩小的桌面网站，则先查 viewport 声明，再看实际响应式 CSS。<title> 是浏览器标签和搜索结果的重要候选，和可见的 <h1> 可以相关但职责不同。<head> 中的资源加载也会影响首屏，第三方脚本不能因为看不见就随意堆在里面。
容易答错的地方
- 把
<head>当成页面顶栏 - 可见的站点页头属于
<body>，文档元数据才放<head>。 - 认为 meta description 保证搜索摘要
- 搜索引擎会根据查询和页面内容选择摘要，不保证照搬。
面试官还会怎么问？
title 和 <h1> 是一回事吗？
不是。前者是文档元数据，后者是正文标题；内容应相关但承担不同作用。
视口 meta 写了还要写媒体查询吗？
要。它提供布局视口基础，具体响应式布局仍由 CSS 决定。
编码优先看 HTTP 头还是 meta？
响应头的字符集声明通常优先，二者应保持一致以免解码混乱。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。