title 标题

<title> 元素用于定义 HTML 文档的标题，它虽然位于 <head> 中不可见，但会显示在浏览器标签页、搜索引擎结果、书签等位置，是页面最重要的元信息之一。

前置知识

阅读本节前，建议先了解：body 元素

基础概念

title 的作用

<title> 是 <head> 中唯一必须的子元素，每个 HTML 文档都必须包含且只能包含一个 <title> 元素。它的作用涵盖多个方面：

浏览器标签页：显示在浏览器顶部的标签页标题上
搜索引擎结果：作为搜索结果中最重要的链接文字
浏览器书签：用户收藏页面时，书签默认使用 title 作为名称
浏览器历史记录：在历史记录列表中显示的标题
社交媒体分享：分享链接时作为默认的分享标题
屏幕阅读器：辅助技术在进入页面时首先朗读的内容

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>HTML5 教程 - 从入门到精通</title>
</head>
<body>
  <h1>HTML5 教程</h1>
</body>
</html>

title 在各场景中的展示

场景	展示位置	示例
浏览器标签页	标签页文字	`HTML5 教程 - 从入门到精通`
搜索引擎（Google）	搜索结果链接	`HTML5 教程 - 从入门到精通 - example.com`
浏览器书签	收藏夹名称	`HTML5 教程 - 从入门到精通`
历史记录	浏览历史列表	`HTML5 教程 - 从入门到精通`
社交分享	分享卡片标题	`HTML5 教程 - 从入门到精通`
屏幕阅读器	页面朗读开头	"HTML5 教程 - 从入门到精通，页面"

语法

基本语法

html

<head>
  <title>页面标题</title>
</head>

语法规则

<title> 只能出现在 <head> 中
一个文档只能有一个 <title>
标签内只能包含纯文本，不能包含其他 HTML 标签
文本内容会被 HTML 实体解析

html

<!-- 正确 -->
<title>我的网站 - 首页</title>
<title>HTML &amp; CSS 教程</title>
<title>5 &lt; 10 的比较</title>

<!-- 错误！title 中不能包含 HTML 标签 -->
<title>我的<b>网站</b></title>  <!-- <b> 不会被渲染 -->
<title>换行<br>标题</title>    <!-- <br> 不会被渲染 -->

<!-- 不推荐！空标题 -->
<title></title>

详细说明

title 的 SEO 重要性

搜索引擎（如 Google、百度）将 <title> 作为判断页面主题的最重要信号之一。一个优秀的 title 能显著影响：

点击率（CTR）：吸引人的标题能提高搜索结果的点击率
关键词排名：标题中的关键词对排名有直接影响
搜索结果展示：Google 通常展示约 50~60 个字符的标题

SEO 标题优化要点

包含目标关键词：将页面核心关键词放在标题中
关键词靠前：重要的关键词放在标题前面
独特且准确：每个页面的标题都应该独一无二
长度控制：中文标题建议 20~30 个字，英文建议 50~60 个字符
避免关键词堆砌：不要重复使用相同关键词

title 长度建议

搜索引擎	桌面端显示长度	移动端显示长度	超出处理
Google	~60 个字符（约 30 个中文字）	~50 个字符	用省略号截断
百度	~56 个字符（约 28 个中文字）	~48 个字符	用省略号截断
Bing	~65 个字符	~55 个字符	用省略号截断

html

<!-- 推荐：长度适中 -->
<title>HTML5 教程 - 文档结构详解 | 前端学习指南</title>

<!-- 不推荐：标题过长（会被截断） -->
<title>HTML5 教程 - 文档结构详解 - DOCTYPE声明 - html根元素 - head元素 - body元素 - meta标签 - title标签 - 前端学习指南</title>

<!-- 不推荐：标题过短（信息量不足） -->
<title>教程</title>

<!-- 不推荐：关键词堆砌 -->
<title>HTML教程, HTML5教程, HTML学习, HTML入门, HTML基础, HTML视频</title>

标题的常见格式

不同类型的页面适合不同的标题格式：

页面类型	推荐格式	示例
首页	`网站名称 - 一句话描述`	`前端学习指南 - 从零开始学Web开发`
文章页	`文章标题 - 网站名称`	`CSS Grid 布局完全指南 - 前端学习指南`
分类页	`分类名称 - 网站名称`	`JavaScript 教程 - 前端学习指南`
标签页	`标签: 标签名 - 网站名称`	`标签: 响应式设计 - 前端学习指南`
搜索结果	`"搜索词" 的搜索结果 - 网站名称`	`"CSS Flex" 的搜索结果 - 前端学习指南`

html

<!-- 首页标题 -->
<title>前端学习指南 - 从零开始学 Web 开发</title>

<!-- 文章页标题 -->
<title>CSS Grid 布局完全指南 - 前端学习指南</title>

<!-- 分类页标题 -->
<title>JavaScript 教程目录 - 前端学习指南</title>

<!-- 关于页标题 -->
<title>关于我们 - 前端学习指南</title>

title 与 OG 标签的关系

在社交媒体分享时，平台优先使用 Open Graph（OG）标签中的标题：

html

<head>
  <!-- 浏览器和搜索引擎使用 title -->
  <title>文章标题 - 网站名称</title>

  <!-- 社交媒体分享优先使用 og:title -->
  <meta property="og:title" content="社交媒体专用的标题">
</head>

如果页面没有设置 og:title，社交平台会回退使用 <title> 的内容。

实战示例

动态设置页面标题

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动态标题演示</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      max-width: 600px;
      margin: 40px auto;
      padding: 0 20px;
      line-height: 1.6;
    }
    .current-title {
      background: #f5f5f5;
      padding: 15px;
      border-radius: 4px;
      font-family: monospace;
      margin: 15px 0;
    }
    input {
      width: 100%;
      padding: 10px;
      font-size: 16px;
      border: 1px solid #ddd;
      border-radius: 4px;
      box-sizing: border-box;
    }
    button {
      padding: 10px 20px;
      margin-top: 10px;
      cursor: pointer;
      background: #0066cc;
      color: white;
      border: none;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <h1>动态修改页面标题</h1>
  <p>当前标题：</p>
  <div class="current-title" id="current-title"></div>

  <label for="new-title">输入新标题：</label>
  <input type="text" id="new-title" placeholder="输入新的页面标题..." maxlength="60">
  <br>
  <button id="update-btn">更新标题</button>
  <button id="time-btn">显示当前时间</button>
  <button id="reset-btn">重置标题</button>

  <script>
    var currentTitleEl = document.getElementById('current-title');
    var newTitleInput = document.getElementById('new-title');

    // 显示当前标题
    function showCurrentTitle() {
      currentTitleEl.textContent = document.title;
    }
    showCurrentTitle();

    // 更新标题
    document.getElementById('update-btn').addEventListener('click', function() {
      var newTitle = newTitleInput.value.trim();
      if (newTitle) {
        document.title = newTitle;
        showCurrentTitle();
      }
    });

    // 显示时间标题
    document.getElementById('time-btn').addEventListener('click', function() {
      var now = new Date();
      document.title = '当前时间: ' + now.toLocaleTimeString('zh-CN');
      showCurrentTitle();
    });

    // 重置标题
    document.getElementById('reset-btn').addEventListener('click', function() {
      document.title = '动态标题演示';
      newTitleInput.value = '';
      showCurrentTitle();
    });

    // 输入框回车更新
    newTitleInput.addEventListener('keydown', function(e) {
      if (e.key === 'Enter') {
        document.getElementById('update-btn').click();
      }
    });
  </script>
</body>
</html>

未读消息数提示（类似微博/邮箱）

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的邮箱</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      max-width: 600px;
      margin: 40px auto;
      padding: 0 20px;
    }
    .mail-item {
      padding: 15px;
      border-bottom: 1px solid #eee;
      cursor: pointer;
      transition: background 0.2s;
    }
    .mail-item:hover {
      background: #f5f5f5;
    }
    .mail-item.unread {
      font-weight: bold;
      border-left: 3px solid #0066cc;
    }
    button {
      padding: 10px 20px;
      margin: 10px 5px 10px 0;
      cursor: pointer;
      background: #0066cc;
      color: white;
      border: none;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <h1>我的邮箱</h1>
  <div>
    <button id="add-btn">模拟收到新邮件</button>
    <button id="read-all-btn">全部已读</button>
  </div>
  <div id="mail-list">
    <div class="mail-item">欢迎使用邮箱系统</div>
  </div>

  <script>
    var unreadCount = 0;
    var baseTitle = '我的邮箱';

    function updateTitle() {
      if (unreadCount > 0) {
        // 在标签页标题前显示未读数
        document.title = '(' + unreadCount + ') ' + baseTitle;
      } else {
        document.title = baseTitle;
      }
    }

    // 模拟收到新邮件
    document.getElementById('add-btn').addEventListener('click', function() {
      unreadCount++;
      var mailList = document.getElementById('mail-list');
      var item = document.createElement('div');
      item.className = 'mail-item unread';
      item.textContent = '新邮件 #' + unreadCount + ' - 测试邮件内容';
      mailList.insertBefore(item, mailList.firstChild);

      // 点击标记为已读
      item.addEventListener('click', function() {
        item.classList.remove('unread');
        unreadCount = Math.max(0, unreadCount - 1);
        updateTitle();
      });

      updateTitle();
    });

    // 全部已读
    document.getElementById('read-all-btn').addEventListener('click', function() {
      unreadCount = 0;
      var items = document.querySelectorAll('.mail-item.unread');
      items.forEach(function(item) {
        item.classList.remove('unread');
      });
      updateTitle();
    });
  </script>
</body>
</html>

注意事项

1. title 不能为空

html

<!-- 错误！空标题 -->
<title></title>

<!-- 不推荐！使用默认标题 -->
<title>Untitled Document</title>
<title>无标题文档</title>

2. title 中不要包含 HTML 标签

html

<!-- 错误！标签不会被渲染，而是显示为纯文本 -->
<title>我的<b>网站</b></title>
<!-- 浏览器显示: 我的<b>网站</b> 或 我的网站（标签被忽略） -->

3. 避免所有页面使用相同标题

html

<!-- 不推荐：所有页面都用同一个标题 -->
<!-- index.html -->
<title>我的网站</title>
<!-- about.html -->
<title>我的网站</title>
<!-- contact.html -->
<title>我的网站</title>

<!-- 推荐：每个页面有独特的标题 -->
<!-- index.html -->
<title>首页 - 我的网站</title>
<!-- about.html -->
<title>关于我们 - 我的网站</title>
<!-- contact.html -->
<title>联系我们 - 我的网站</title>

4. 特殊字符需要转义

html

<!-- HTML 实体在 title 中会被解析 -->
<title>5 &lt; 10 的比较</title>         <!-- 显示: 5 < 10 的比较 -->
<title>HTML &amp; CSS 入门教程</title>  <!-- 显示: HTML & CSS 入门教程 -->
<title>价格: 100&yen;</title>           <!-- 显示: 价格: 100¥ -->

5. title 更改的时机

使用 JavaScript 动态修改 document.title 不会触发页面重新加载，但会立即更新浏览器标签页的显示。这在单页应用（SPA）中非常常用。

最佳实践

1. 遵循"页面标题 - 网站名称"格式

html

<title>CSS Grid 完全指南 - 前端学习指南</title>

2. 控制标题长度

html

<!-- 推荐：20~30 个中文字 -->
<title>HTML5 文档结构详解 - 前端学习指南</title>

3. 将重要关键词放在前面

html

<!-- 推荐：关键词靠前 -->
<title>JavaScript Promise 教程 - 异步编程指南</title>

<!-- 不推荐：关键词被网站名称挤到后面 -->
<title>我的博客 - 关于 JavaScript Promise 的使用方法和技巧教程</title>

4. 每个页面都有唯一标题

确保网站中的每个页面都有独特且有意义的标题。

5. SPA 中动态更新标题

javascript

// 在路由切换时更新标题
function navigateTo(page) {
  switch (page) {
    case 'home':
      document.title = '首页 - 我的网站';
      break;
    case 'about':
      document.title = '关于我们 - 我的网站';
      break;
    case 'contact':
      document.title = '联系我们 - 我的网站';
      break;
  }
}

title 速查表

项目	说明
语法	`<title>标题文本</title>`
位置	`<head>` 内，只能有一个
内容类型	纯文本，不可包含 HTML 标签
SEO 重要性	极高，是搜索排名的核心因素之一
推荐长度	中文 20~30 字，英文 50~60 字
推荐格式	`页面标题 - 网站名称`
JavaScript 访问	`document.title`
必须性	是，每个文档必须有

继续学习：meta 字符编码

title 标题 ​

基础概念 ​

title 的作用 ​

title 在各场景中的展示 ​

语法 ​

基本语法 ​

语法规则 ​

详细说明 ​

title 的 SEO 重要性 ​

SEO 标题优化要点 ​

title 长度建议 ​

标题的常见格式 ​

title 与 OG 标签的关系 ​

实战示例 ​

动态设置页面标题 ​

未读消息数提示（类似微博/邮箱） ​

注意事项 ​

1. title 不能为空 ​

2. title 中不要包含 HTML 标签 ​

3. 避免所有页面使用相同标题 ​

4. 特殊字符需要转义 ​

5. title 更改的时机 ​

最佳实践 ​

1. 遵循"页面标题 - 网站名称"格式 ​

2. 控制标题长度 ​

3. 将重要关键词放在前面 ​

4. 每个页面都有唯一标题 ​

5. SPA 中动态更新标题 ​

title 速查表 ​

参考链接 ​

title 标题

基础概念

title 的作用

title 在各场景中的展示

语法

基本语法

语法规则

详细说明

title 的 SEO 重要性

SEO 标题优化要点

title 长度建议

标题的常见格式

title 与 OG 标签的关系

实战示例

动态设置页面标题

未读消息数提示（类似微博/邮箱）

注意事项

1. title 不能为空

2. title 中不要包含 HTML 标签

3. 避免所有页面使用相同标题

4. 特殊字符需要转义

5. title 更改的时机

最佳实践

1. 遵循"页面标题 - 网站名称"格式

2. 控制标题长度

3. 将重要关键词放在前面

4. 每个页面都有唯一标题

5. SPA 中动态更新标题

title 速查表

参考链接