HTML 中 <head> 不能直接用 <include>，因浏览器原生不支持服务端 include 语法；可行方案仅三种：服务端注入（最稳、SEO 友好）、构建时处理（适合现代前端）、客户端 JS 加载（慎用，仅限非关键内容）。
HTML 中 <head> 不能直接用 <include>？
浏览器原生不支持类似服务端的 include 语法，<!--#include--> 或 <include src="..."> 在纯 HTML 文件里完全无效——打开就是空白或报错。这不是你写错了，是标准没这功能。
真正能落地的复用方式只有三种：服务端注入、构建时处理、客户端 JS 加载。选哪种，取决于你有没有后端、用不用打包工具、是否允许 JS 执行后才补全 head。
用 Node.js / PHP 等后端动态生成 <head>
最稳、SEO 友好、首屏即完整。所有 meta、link、script 都在服务端拼好再吐给浏览器，爬虫和用户看到的是同一份渲染结果。
- PHP 示例：
include 'head-frag.php';放在每个页面<head>内，head-frag.php里直接写<meta>、<link rel="stylesheet">等 - Node.js（Express）：
res.render('page', { title: '首页' })，模板中用<%- include('partials/head') %> - 注意：路径必须相对于模板根目录；变量要提前传入，比如
<title><%= title %></title>
用 Webpack / Vite 构建时注入 <head> 片段
适合现代前端项目。不是运行时加载，而是在打包阶段把公共 head 内容“编译进去”，最终 HTML 是静态文件，但内容已复用。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- Vite 插件如
vite-plugin-html：在vite.config.ts中配置inject: { data: { headContent: '<meta name="theme-color" content="#2563eb">' } }，模板里写<%= headContent %> - Webpack 的
html-webpack-plugin：通过templateParameters注入，再用 EJS 语法嵌入<%= htmlWebpackPlugin.options.headFragment %> - 风险点：如果 head 里有需要 runtime 判断的内容（如用户登录态），构建时无法动态生成，得留空或改用 JS 注入
用 JS 动态插入 <head> 内容（慎用）
仅适用于非关键、可延迟、不影响 SEO 的场景，比如统计脚本、A/B 测试配置。它会在 DOM 加载后执行，搜索引擎可能忽略，LCP 等指标也会受影响。
- 基础写法：
document.head.innerHTML += '<meta name="foo" content="bar">';—— 但会重写整个 head，破坏原有节点顺序和事件绑定 - 安全做法：用
document.createElement+appendChild逐个加，例如：const meta = document.createElement('meta'); meta.name = 'viewport'; meta.content = 'width=device-width'; document.head.appendChild(meta); - 别忘了加
defer或放在<body>底部，避免阻塞解析；也别在DOMContentLoaded前就操作document.head
真正难的不是怎么写，而是判断哪部分 head 必须服务端/构建时搞定（比如 <title>、<meta name="description">、关键 CSS）、哪部分可以放 JS 里（比如热更新的埋点 ID）。混用时容易漏掉一两个 meta，上线后才发现分享卡片没图没描述——这种细节，比语法本身更常出问题。
