必须放在中且只能有一个，否则导致SEO失效、标签页显示异常及无障碍访问中断；多写会被忽略，应通过document.title修改。
页面标题必须写在 里，且只能有一个 <title></title> 标签；写错位置或重复定义会导致 SEO 失效、浏览器标签页显示异常、无障碍访问中断。
为什么 <title></title> 必须放在
HTML 规范明确要求 <title></title> 是 的**强制子元素**，不能出现在 或其他任意位置。浏览器解析时若在 里遇到 <title></title>，会尝试“修复”——把它挪进 ，但这个过程不可控：部分旧版 Safari 或 WebView 可能忽略、静默丢弃，或导致 DOM 构建延迟。
常见错误现象包括：
- 刷新后浏览器标签页标题为空或显示默认文件名（如
index.html） - 搜索引擎结果中显示“未命名网页”或抓取到错误文本
- 屏幕阅读器无法正确播报页面主题
<title></title> 能不能写多个？写了会怎样？
不能。HTML5 明确规定文档中**只能有一个 <title></title> 元素**。如果写了多个，浏览器只取第一个生效，后续所有 <title></title> 都被忽略——连警告都不会抛。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑：
- 模板系统中父模板和子模板都写了
<title></title>（比如 Django 的{% block title %}没覆盖好） - SPA 应用里用 JS 动态插入新
<title></title>标签，却忘了移除旧的 - 复制粘贴代码时带进了隐藏的注释或编码 BOM，导致解析器误判结构
正确做法始终是：用 JS 修改时调用 document.title = '新标题'，而不是 document.body.appendChild(...) 插入新标签。
设置标题时要注意哪些实际限制？
<title></title> 内容虽支持 Unicode，但有几条硬约束直接影响可用性：
- 不能包含 HTML 标签（
<strong></strong>、 - 长度建议控制在 50–60 字符内：超出部分在 Google 搜索结果中会被截断（显示为省略号），移动端标签页空间更小
- 避免使用纯符号开头（如
• 产品页），某些爬虫或微信内置浏览器可能跳过识别 - 动态页面中，服务端渲染（SSR）时应确保
<title></title>已含真实内容，不要依赖客户端 JS 补全——否则首屏无标题，SEO 和分享卡片都会失败
最常被忽略的一点：标题内容不是纯展示字段，它参与页面唯一性判定、history.state 关联、PWA 安装横幅文案生成。一旦为空或动态滞后，整个导航上下文就可能断裂。
