<head>中必须且只能放一个<title>，紧随其后是<meta charset="UTF-8">（首个meta），再是<meta name="viewport">等，script/link/style需按加载特性合理安排。
<head> 里能放什么，不是“能放就放”，而是有明确规范和顺序陷阱。不按规则来，轻则中文乱码、脚本执行异常，重则 SEO 失效、移动端布局崩溃。
必须放且只能放一个：<title>
这是 HTML5 规范唯一强制要求的 <head> 子元素。没有它，文档结构就不合法。
-
<title>必须是纯文本，不能嵌套任何标签（比如<span>或<strong>） - 一个页面只允许存在一个
<title>，重复会导致浏览器忽略后续所有 - 它影响浏览器标签页标题、收藏夹显示、搜索引擎结果页（SERP）标题，别用空格或占位符糊弄
<meta charset="UTF-8"> 要紧挨 <title> 放，且必须是第一个 <meta>
它不是可选优化项，而是解析基石。缺它或放错位置，会立刻引发中文乱码、表单提交失败、fetch 响应解析异常等问题。
- 浏览器只在
<head>前 1024 字节内、且是第一个<meta>时才可靠识别charset - 不能写成
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">—— 已被弃用，兼容性差 - 不要把它塞到一堆
<script>或<link>后面；理想顺序就是：<title>→<meta charset="UTF-8">
<meta name="viewport"> 和其他 <meta> 的位置很关键
<meta name="viewport"> 不影响字符解析，但决定移动端渲染行为。放得太晚（比如在 CSS 或 JS 加载之后），可能导致页面先闪现未缩放状态再重排。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 建议放在
<meta charset>之后、<link rel="stylesheet">之前 -
<meta name="description">、<meta name="keywords">等 SEO 相关 meta 可随后放置，但无强制顺序 - 避免在
<head>中混入非标准<meta>（如自定义data-属性），部分爬虫或工具会跳过整段解析
<script>、<link>、<style> 的加载时机差异
这些资源类标签放 <head> 本身没问题，但行为天差地别：
-
<link rel="stylesheet">会阻塞渲染，建议只放关键 CSS；非关键样式用media="print"或 JS 动态注入 -
<script>默认同步执行并阻塞 HTML 解析；如需放<head>，必须加defer（保证执行顺序）或async（不保证顺序，适合统计脚本） -
<style>内联 CSS 没问题，但超过 1KB 建议外链，否则拖慢首字节时间（TTFB） -
<base href>如果使用，必须放在所有相对 URL 引用标签（<link>、<script>、<img>）之前，否则基准失效
真正容易被忽略的，是 <meta charset> 的位置刚性——它不像其他 meta 那样“写了就行”，而是一个字节级的硬约束。很多线上问题查半天，最后发现只是它被 <script> 标签挡在了第二行。
