<title>-文档标题
<title>标签是HTML文档中不可或缺的一部分，它定义了浏览器标签页或窗口标题栏显示的文本。搜索引擎也会使用这个标题作为搜索结果中的链接标题，因此它对SEO至关重要。
<title>标签的基本语法
<title>标签必须放在<head>部分内，且每个HTML文档只能有一个<title>标签。基本语法如下：
<!DOCTYPE html>
<html>
<head>
<title>这里是页面标题</title>
</head>
<body>
<!-- 页面内容 -->
</body>
</html>
这个简单的例子展示了如何在HTML文档中使用<title>标签。浏览器会显示"这里是页面标题"作为页面标题。
<title>标签的重要性
<title>标签在多个方面发挥着关键作用：
- 浏览器显示：出现在浏览器标签页、窗口标题栏和书签中
- SEO优化：搜索引擎将标题作为搜索结果中的主要链接文本
- 用户体验：帮助用户识别和区分多个打开的标签页
- 社交媒体分享：许多社交平台在分享链接时会优先使用标题文本
<title>标签的最佳实践
长度控制
理想的标题长度通常在50-60个字符之间，超过这个长度可能会被搜索引擎截断。例如：
<title>如何制作美味的巧克力蛋糕 - 家庭烘焙指南</title>
这个标题既包含了主要内容，又保持在合理长度内。
内容结构
好的标题通常遵循"主要内容 - 次要信息"的结构：
<title>HTML教程：从入门到精通 | 编程学习网</title>
关键词优化
将重要的关键词放在标题开头可以提高SEO效果：
<title>JavaScript闭包详解：作用域和内存管理</title>
动态设置<title>
在单页应用(SPA)或需要动态更改标题的情况下，可以使用JavaScript：
// 使用原生JavaScript
document.title = "新的页面标题";
// 在React中
import { useEffect } from 'react';
function MyComponent() {
useEffect(() => {
document.title = "React应用 - 用户仪表盘";
}, []);
return <div>内容</div>;
}
// 在Vue中
export default {
mounted() {
document.title = "Vue应用 - 产品列表";
}
}
多语言站点的<title>
对于多语言网站，可以根据用户语言动态设置标题：
<script>
const userLang = navigator.language || navigator.userLanguage;
if(userLang.startsWith('zh')) {
document.title = "中文标题";
} else {
document.title = "English Title";
}
</script>
<title>与Open Graph协议
当网页被分享到社交媒体时，可以使用Open Graph协议覆盖<title>：
<meta property="og:title" content="社交媒体分享时显示的不同标题">
常见错误与避免方法
-
忘记添加
<title>标签：<!-- 错误示例 --> <head> <meta charset="UTF-8"> </head> -
在
<title>中使用过多关键词：<!-- 不佳示例 --> <title>买手机,智能手机,便宜手机,最新手机,手机促销</title> -
所有页面使用相同标题：
<!-- 不佳示例 - 所有页面 --> <title>我的网站</title>
<title>标签的特殊用例
状态通知
有些网站会在标题中显示通知数量：
function updateNotificationCount(count) {
document.title = count > 0
? `(${count}) 我的收件箱`
: "我的收件箱";
}
页面状态指示
在表单页面，可以提示用户保存状态：
let isChanged = false;
form.addEventListener('input', () => {
isChanged = true;
document.title = (isChanged ? "* " : "") + "编辑个人资料";
});
<title>标签的浏览器行为
不同浏览器对长标题的处理方式略有不同：
- Chrome和Firefox通常显示约60个字符后截断
- 移动设备上显示的空间更有限
- 浏览器历史记录和书签可能显示完整标题
测试不同长度标题的显示效果很重要：
<title>这是一个非常长的标题，用来测试浏览器如何截断过长的标题文本，观察显示效果...</title>
<title>与无障碍访问
屏幕阅读器会首先朗读页面标题，因此：
- 确保标题准确描述页面内容
- 避免使用"首页"、"新页面"等模糊描述
- 对于表单提交结果页，可以在标题中体现状态
<!-- 表单提交后 -->
<title>注册成功 - 用户账户已创建</title>
<title>标签的历史演变
HTML规范对<title>标签的要求一直很稳定：
- HTML 2.0 (1995)：首次标准化
- HTML 4.01：成为必需元素
- XHTML：必须正确闭合
- HTML5：保持基本功能不变
服务器端设置<title>
在PHP、ASP.NET等服务器端技术中动态设置标题：
<?php
$pageTitle = "动态生成的标题";
?>
<!DOCTYPE html>
<html>
<head>
<title><?php echo htmlspecialchars($pageTitle); ?></title>
</head>
<body>
<title>与单页应用框架
现代前端框架通常提供专门的方式来管理标题：
React Helmet示例：
import { Helmet } from 'react-helmet';
function Page() {
return (
<div>
<Helmet>
<title>使用React Helmet设置的标题</title>
</Helmet>
{/* 页面内容 */}
</div>
);
}
Vue Meta示例：
export default {
metaInfo: {
title: 'Vue Meta设置的页面标题'
}
}
<title>标签的测试方法
验证标题是否正确的几种方法：
- 查看浏览器标签页
- 检查搜索引擎结果预览
- 使用开发者工具：
console.log(document.title); - 使用SEO工具分析
<title>与浏览器扩展
一些浏览器扩展会修改页面标题，常见于：
- 密码管理器
- 标签页管理工具
- SEO分析工具
开发者应该考虑这些情况，避免完全依赖标题进行页面逻辑。
<title>在打印时的表现
打印页面时，标题通常出现在：
- 打印预览的标题栏
- PDF文件的元数据中
- 部分浏览器会在页眉或页脚显示标题
可以通过CSS指定打印时使用的标题：
@media print {
title {
display: none;
}
/* 或者使用生成内容 */
body:first-child::before {
content: "打印专用标题";
display: block;
}
}
<title>与HTTP头部
虽然罕见，但服务器可以通过HTTP头部设置标题：
X-HTML-Title: 通过HTTP头部设置的标题
然后在HTML中：
<title><script>document.write(document.querySelector('meta[http-equiv="X-HTML-Title"]')?.content || '默认标题')</script></title>
<title>标签的替代方案
虽然<title>是标准做法，但某些环境下可能使用替代方案：
- PDF文档：有自己的标题元数据
- 电子邮件：使用Subject作为标题
- 桌面应用：使用窗口标题属性
<title>与Web组件
在Web组件中使用<title>需要注意：
<template id="my-component">
<title>这个标题不会生效，因为模板中的title不属于文档head</title>
<!-- 组件内容 -->
</template>
正确做法是在组件挂载时设置文档标题：
class MyComponent extends HTMLElement {
connectedCallback() {
document.title = "组件标题";
}
}
<title>与iframe
iframe中的标题不会影响父文档的标题：
<iframe srcdoc="<html><head><title>iframe标题</title></head></html>"></iframe>
父文档需要显式获取iframe标题：
document.querySelector('iframe').contentDocument.title;
<title>与SVG
SVG文档也可以包含自己的<title>元素，用于无障碍访问：
<svg>
<title>一个红色圆形</title>
<circle cx="50" cy="50" r="40" fill="red" />
</svg>
这与HTML的<title>标签是不同的概念，虽然名称相同。
<title>与性能优化
频繁修改标题可能影响性能：
// 不佳做法 - 每秒钟修改60次标题
function animateTitle() {
let angle = 0;
setInterval(() => {
angle += 0.1;
document.title = `标题动画 ${Math.sin(angle).toFixed(2)}`;
}, 1000/60);
}
应该避免这种高频更新，特别是在移动设备上。
<title>与浏览器历史记录
修改document.title不会创建新的历史记录条目：
history.pushState({}, "新标题", "/new-url");
document.title = "新标题"; // 不会额外产生历史记录
<title>与页面加载指示器
一些浏览器在标题变化时会显示加载指示器：
document.title = "加载中...";
fetch('/data').then(() => {
document.title = "加载完成";
});
<title>与WebSocket
实时应用可以通过WebSocket更新标题：
const socket = new WebSocket('wss://example.com');
socket.onmessage = (event) => {
if(event.data.type === 'notification') {
document.title = `(${event.data.count}) 我的应用`;
}
};
<title>与Web Workers
在Web Worker中无法直接修改标题，需要通过postMessage：
// 主线程
const worker = new Worker('worker.js');
worker.onmessage = (e) => {
if(e.data.type === 'setTitle') {
document.title = e.data.title;
}
};
// worker.js
self.postMessage({type: 'setTitle', title: '来自Worker的标题'});
<title>与内容安全策略(CSP)
CSP通常不会限制<title>的内容，但会限制动态设置标题的脚本：
<meta http-equiv="Content-Security-Policy" content="script-src 'self'">
<!-- 这个脚本会被阻止 -->
<script>document.title = "动态标题";</script>
<title>与Shadow DOM
Shadow DOM内部的<title>元素不会影响主文档：
const shadow = element.attachShadow({mode: 'open'});
shadow.innerHTML = '<title>Shadow标题</title>';
// 主文档标题不受影响
<title>与WebAssembly
从WebAssembly修改标题需要调用JavaScript：
// Rust示例 (wasm-bindgen)
#[wasm_bindgen]
pub fn set_title(title: &str) {
web_sys::window().unwrap().document().unwrap().set_title(title);
}
<title>与服务器推送
HTTP/2服务器推送不能直接修改客户端标题，但可以发送包含新标题的HTML：
:status: 200
content-type: text/html
<head><title>服务器推送的标题</title></head>
<title>与Web Components API
Document.title是Document接口的一部分，可以通过多种方式访问：
const title = window.document.title;
const title = self.document.title;
const title = document.title;
const title = new Document().title; // 新文档实例
<title>与浏览器扩展API
浏览器扩展可以通过API修改标题：
// Chrome扩展示例
chrome.tabs.executeScript(tabId, {
code: 'document.title = "修改后的标题";'
});
<title>与自动化测试
在测试中验证标题：
// Jest + Puppeteer示例
test('页面标题正确', async () => {
await page.goto('http://example.com');
expect(await page.title()).toBe('预期标题');
});
<title>与页面跳转
页面跳转时，浏览器会立即显示新页面的标题：
window.location.href = '/new-page'; // 标题会立即变为新页面的标题
<title>与浏览器缓存
缓存的页面会保留其原始标题，即使服务器上的标题已更改。
<title>与Service Worker
Service Worker可以拦截请求并修改响应中的标题：
self.addEventListener('fetch', (event) => {
event.respondWith(
fetch(event.request).then((response) => {
if(response.headers.get('content-type').includes('text/html')) {
return response.text().then((text) => {
const modified = text.replace('<title>原标题</title>', '<title>新标题</title>');
return new Response(modified, response);
});
}
return response;
})
);
});
<title>与Web性能
测量标题设置时间：
performance.mark('title-start');
document.title = '新标题';
performance.mark('title-end');
performance.measure('title-update', 'title-start', 'title-end');
console.log(performance.getEntriesByName('title-update')[0].duration);
<title>与Web动画API
虽然不常见，但可以动画化标题变化：
let start = 0;
function animateTitle(timestamp) {
if(!start) start = timestamp;
const progress = timestamp - start;
document.title = `加载... ${Math.min(100, (progress / 1000 * 100).toFixed(0)}%`;
if(progress < 1000) {
requestAnimationFrame(animateTitle);
} else {
document.title = "加载完成";
}
}
requestAnimationFrame(animateTitle);
<title>与WebRTC
在视频通话应用中动态更新标题：
const pc = new RTCPeerConnection();
pc.onconnectionstatechange = () => {
document.title = `通话中 (${pc.connectionState})`;
};
<title>与Web Audio API
音频应用可以显示播放状态：
const audioContext = new AudioContext();
function updateTitle() {
document.title = audioContext.state === 'running'
? "正在播放音频"
: "音频已暂停";
}
audioContext.onstatechange = updateTitle;
<title>与WebGL
3D应用可以在标题显示性能指标：
function render() {
// WebGL渲染逻辑
const fps = calculateFPS();
document.title = `3D场景 (${fps} FPS)`;
requestAnimationFrame(render);
}
render();
<title>与WebXR
VR/AR应用可以显示XR会话状态：
navigator.xr.requestSession('immersive-vr').then((session) => {
document.title = "VR会话进行中";
session.onend = () => {
document.title = "VR会话结束";
};
});
<title>与Progressive Web Apps
PWA可以区分在线/离线状态：
window.addEventListener('online', () => {
document.title = document.title.replace("(离线)", "(在线)");
});
window.addEventListener('offline', () => {
document.title += " (离线)";
});
<title>与Web Share API
分享页面时，标题通常作为默认分享文本：
navigator.share({
title: document.title,
url: location.href
});
<title>与Payment Request API
支付流程中可以更新标题：
const paymentRequest = new PaymentRequest(methodData, details);
paymentRequest.show().then(() => {
document.title = "支付处理中...";
});
<title>与Credential Management API
登录状态反映在标题中：
navigator.credentials.get({password: true}).then((cred) => {
document.title = `欢迎回来，${cred.id}`;
});
<title>与Page Visibility API
当页面隐藏时修改标题：
document.addEventListener('visibilitychange', () => {
if(document.hidden) {
document.title = "请回来！";
} else {
document.title = "欢迎回来";
}
});
<title>与Fullscreen API
全屏状态下标题仍然可见：
document.documentElement.requestFullscreen();
document.title = "全屏模式"; // 仍然有效
<title>与Resize Observer
响应布局变化更新标题：
const ro = new ResizeObserver(() => {
document.title = `${window.innerWidth}×${window.innerHeight}`;
});
ro.observe(document.body);
<title>与Intersection Observer
滚动位置反映在标题中：
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if(entry.isIntersecting) {
document.title = `查看: ${entry.target.id}`;
}
});
}, {threshold: 0.5});
document.querySelectorAll('section').forEach(section => {
observer.observe(section);
});
<title>与Performance Timeline API
测量标题设置对性能的影响：
const observer = new PerformanceObserver((list) => {
for(const entry of list.getEntriesByName('title-update')) {
console.log('标题更新耗时:', entry.duration);
}
});
observer.observe({entryTypes: ['measure']});
<title>与User Timing API
标记标题更新时间点：
performance.mark('before-title-update');
document.title = "新标题";
performance.mark('after-title-update');
<title>与Navigation Timing API
获取标题设置时间相对于导航开始的时间：
const navEntry = performance.getEntriesByType('navigation')[0];
console.log('标题在导航后', performance.now() - navEntry.startTime, 'ms设置');
<title>与Resource Timing API
虽然不直接相关，但可以比较资源加载和标题设置：
const resources = performance.getEntriesByType('resource');
resources.forEach(res => {
console.log(res.name, '在标题设置前完成?',
res.responseEnd < performance.now());
});
<title>与Storage API
保存和恢复标题：
// 保存
localStorage.setItem('savedTitle', document.title);
// 恢复
document.title = localStorage.getItem('savedTitle') || '默认标题';
<title>与Index
本站部分内容来自互联网,一切版权均归源网站或源作者所有。
如果侵犯了你的权益请来信告知我们删除。邮箱：cc@cccx.cn
上一篇：-文档头部容器
下一篇：<body>-文档主体内容
