PHP小码农

Appearance

title 提示文本 ​

title 全局属性为元素提供额外的提示信息。当用户将鼠标悬停在元素上时，浏览器通常会以工具提示（tooltip）的形式显示 title 的内容。

前置知识

阅读本节前，建议先了解：style 内联样式

基础概念 ​

什么是 title 属性 ​

html
<!-- 鼠标悬停时显示提示 -->
<abbr title="HyperText Markup Language">HTML</abbr>

<a href="https://example.com" title="访问示例网站">示例链接</a>

<img src="photo.jpg" alt="风景照片" title="2024年春天拍摄的樱花">

title vs alt ​

特征titlealt
目的补充提示信息图片的替代文本
触发方式鼠标悬停图片无法显示时
无障碍大部分屏幕阅读器不读取屏幕阅读器必须读取
必需性可选<img> 必需
适用于几乎所有元素仅 <img>、<input> 等
html
<!-- alt：图片无法显示时的替代文本 -->
<img src="logo.png" alt="公司Logo">

<!-- title：鼠标悬停时的额外信息 -->
<img src="logo.png" alt="公司Logo" title="点击返回首页">

语法与使用 ​

html
<!-- 链接的 title -->
<a href="/about" title="了解更多关于我们的信息">关于我们</a>

<!-- 缩写的 title -->
<abbr title="Cascading Style Sheets">CSS</abbr>

<!-- 图片的 title -->
<figure>
  <img src="chart.png" alt="销售数据柱状图" title="2024年Q1-Q4销售趋势">
  <figcaption>图1：2024 年销售数据</figcaption>
</figure>

<!-- 表单元素的 title -->
<input type="text" title="请输入您的真实姓名" placeholder="姓名">

<!-- 元素的 title -->
<dfn title="文档对象模型">DOM</dfn>

详细说明 ​

适合使用 title 的场景 ​

html
<!-- 1. 缩写和术语 -->
<p>使用 <abbr title="eXtensible Markup Language">XML</abbr> 格式存储数据。</p>

<!-- 2. 链接的补充说明 -->
<nav>
  <a href="/help" title="查看帮助文档和常见问题">帮助</a>
  <a href="/api" title="API 接口文档">API</a>
</nav>

<!-- 3. iframe 标题 -->
<iframe src="https://example.com" title="第三方嵌入内容"></iframe>

不适合使用 title 的场景 ​

html
<!-- 1. 重复已有的可见文本 -->
<p title="这是一段文字">这是一段文字</p>
<!-- title 和可见内容相同，没有额外价值 -->

<!-- 2. 关键信息不应只放在 title 中 -->
<a href="/download" title="下载PDF文件">下载</a>
<!-- 用户可能看不到 title 提示 -->

<!-- 3. 表单标签的替代 -->
<input type="email" title="邮箱地址">
<!-- 应该使用 label 而非 title -->
<label for="email">邮箱地址</label>
<input type="email" id="email">

实战示例 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>title 属性示例</title>
  <style>
    body { font-family: -apple-system, sans-serif; padding: 2rem; line-height: 1.7; }
    .demo-section { margin: 2rem 0; padding: 1.5rem; background: #f8fafc; border-radius: 8px; }
    code { background: #e2e8f0; padding: 0.15rem 0.4rem; border-radius: 3px; font-size: 0.9em; }
    a { color: #3b82f6; }
  </style>
</head>
<body>
  <h1>title 属性使用示例</h1>

  <div class="demo-section">
    <h2>缩写和术语</h2>
    <p>
      <abbr title="HyperText Markup Language" style="text-decoration: underline dotted;">HTML</abbr> 是构建网页的标准语言。
      配合 <abbr title="Cascading Style Sheets">CSS</abbr> 和
      <abbr title="JavaScript">JS</abbr> 可以创建丰富的 Web 应用。
    </p>
  </div>

  <div class="demo-section">
    <h2>链接补充信息</h2>
    <p>
      <a href="https://developer.mozilla.org" title="Mozilla 开发者网络，提供全面的 Web 技术文档">
        MDN Web Docs
      </a> 是 Web 开发者的必备资源。
      你也可以访问
      <a href="https://github.com" title="全球最大的代码托管平台">GitHub</a>
      查看开源项目。
    </p>
  </div>

  <div class="demo-section">
    <h2>图片信息</h2>
    <figure>
      <img src="placeholder.png"
           alt="前端技术栈示意图"
           title="包含 HTML、CSS、JavaScript 三大核心技术"
           width="400" height="200">
      <figcaption>
        图1：前端技术栈
        <small>（悬停查看更多描述）</small>
      </figcaption>
    </figure>
  </div>
</body>
</html>

注意事项 ​

  1. 移动端不显示 tooltip：触屏设备无法悬停，title 内容不可见
  2. 屏幕阅读器行为不一致：部分屏幕阅读器会读取 title，部分不会
  3. 避免过长的 title：保持简洁，通常不超过 50 个字符
  4. 不要依赖 title 传递关键信息：重要信息应直接显示在页面上

最佳实践 ​

  1. 补充而非替代：title 是可见内容的补充，不是替代
  2. 保持简短：一两个短句即可
  3. 用于缩写和术语：为专业术语提供全称解释
  4. 不要重复可见内容：title 应提供额外信息
  5. 考虑触屏用户：关键信息不要只放在 title 中

下一节

继续学习：lang 语言

参考链接 ​