内容直接显示在浏览器标签页顶部，是用户识别页面最直观的标识；现代浏览器均原样使用该文本作为tab标题，不依赖js或css，长度超限（chrome约48–52字符）会被截断，动态修改须用document.title而非操作dom节点。
<title></title> 的内容直接显示在浏览器标签页（tab）顶部，不是页面内、不是地址栏、也不是收藏夹弹窗里——就是你每次切窗口时扫一眼就能看到的那个小标题。
浏览器标签页显示规则
所有现代浏览器（Chrome、Firefox、Edge、Safari）都把 <title></title> 文本原样用作 tab 标题。它不依赖 JS 渲染，也不受 CSS 影响，HTML 解析到它就立刻更新标签页文字。
- 没写
<title></title>？标签页通常显示空、index.html或 “Untitled” - 长度超限（Chrome 约 48–52 个 Unicode 字符）会被截断为
…，移动端更短 - 微信/QQ 内置 WebView 可能缓存初始标题，JS 后改的只影响当前 tab，不影响分享卡片
为什么 document.querySelector('title').textContent = 'x' 不生效
改 DOM 节点不会同步更新标签页显示——这是常见误解。浏览器只监听 document.title 属性变化。
-
document.title = "新标题"✅ 立即生效 -
document.querySelector('title').textContent = "新标题"❌ 标签页不变，DOM 虽改但无意义 - SPA 路由切换后必须手动调用
document.title，不能靠模板重绘自动触发
构建工具悄悄覆盖你写的 title
Vite、Webpack 的 HTML 插件（如 html-webpack-plugin）常通过配置注入 title，比如 title: 'My App'。你手写的 <title>首页</title> 在源码里看着正常，构建后可能被完全替换。
- 排查方法：直接打开最终生成的
index.html，别只看源码 - 修复方式：改插件配置，或用模板语法（如 EJS：
）接管 - 硬编码的
<title>Vite App</title>是上线前最常被忽略的坑
最容易出问题的地方不在语法对错，而在于“你以为它在那儿，其实它早被构建流程抹掉了”。检查最终产物 HTML，比反复确认源码有用得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
