浏览器标签页标题由<title>标签定义，必须位于<head>内且唯一；写在<body>中无效，多标题仅首个生效；动态修改须用document.title，构建工具可能覆盖源码标题。
浏览器标签页上显示的名称，由 <title> 标签定义，它不是视觉样式标签，而是页面元信息的核心部分。
必须放在 <head> 里才有效
<title> 只能在 <head> 区域内起作用。写在 <body> 里，多数浏览器不会识别——不是“可能不显示”，而是 HTML 解析器根本不会读取它。微信内置浏览器、旧版 Safari WebView 或搜索引擎爬虫，会直接忽略，标签页显示为“无标题”或文件名。
- 检查是否漏写了 <head> 标签，<title> 直接跟在 <html> 后面是无效的
- 使用模板引擎（如 EJS、Vue 单文件组件）时，确认 <title> 真正被插入到了编译后的 <head> 中，而不是渲染逻辑误塞进 <body>
一个页面只能有一个 <title>
HTML5 规范要求 <title> 是 <head> 的唯一子元素之一，且只取第一个。后面写的多个 <title> 全部被静默丢弃，不报错、不合并。
- 常见冲突：html-webpack-plugin 配置了
title: '我的网站'，你又在模板里手写 <title>首页</title> —— 后者会被覆盖 - 单页应用（SPA）中用 JS 动态插入新 <title> 时，记得先移除旧节点，否则多余标签无效
- 多语言站点避免用条件渲染生成多个 <title>，应只保留一个并动态更新内容
动态修改要用 document.title
页面加载后想改标签页名称，不能操作 DOM 节点，比如 document.querySelector('title').textContent = '新标题' —— 这样标签页文字完全不会变。
立即学习“前端免费学习笔记（深入）”；
- 必须用
document.title = '用户中心 | MyApp'，这是规范强制要求的更新方式 - JS 中赋值无需手动转义特殊字符（如
&、<），浏览器内部自动处理 - 但服务端渲染或静态 HTML 中的原始 <title> 内容仍需转义，否则
<title>A & B</title>会破坏 HTML 结构
构建工具可能悄悄替换你的 <title>
Vite、Webpack 等工具常通过插件（如 vite-plugin-html 或 html-webpack-plugin）注入标题。你源码里写的 <title> 看着正常，实际构建后已被覆盖。
- 排查方法：打开最终生成的
dist/index.html，直接搜索 <title> 查看真实内容 - 检查插件是否启用了
inject: true或templateParameters，导致自定义标题被覆盖 - 需要灵活控制时，优先使用插件提供的变量注入机制（如
），而非硬编码静态 <title>
初始加载那一刻的标题，永远只取决于 <head> 里的那个 <title> 标签。它决定 SEO 抓取结果、微信/QQ 分享卡片标题、书签默认名称——这些都不会受后续 document.title 影响。
