标题

title 全局属性 包含表示与其所属元素相关的建议信息的文本。

试一试

title 属性的主要用途是为辅助技术标记 <iframe> 元素。

title 属性也可用于标记 数据表 中的控件。

当将title属性添加到<link rel="stylesheet">时,会创建一个备用样式表。当使用<link rel="alternate">定义备用样式表时,此属性是必需的,并且必须设置为非空字符串。

如果包含在<abbr>的开始标签中,则title必须是缩写或首字母缩略词的完整展开。在可能的情况下,不要使用title,而是在第一次使用时以纯文本形式提供缩写或首字母缩略词的展开,并使用<abbr>标记缩写。这使所有用户都能知道缩写或首字母缩略词缩短了什么名称或术语,同时为用户代理提供有关如何宣布内容的提示。

虽然可以使用title<input>元素提供一个以编程方式关联的标签,但这并不是好的做法。请改用<label>

多行标题

title属性可以包含多行。每个U+000A LINE FEED (LF)字符表示一个换行符。需要注意的是,这意味着以下内容会跨两行呈现

HTML

html
<p>
  Newlines in <code>title</code> should be taken into account. This
  <span
    title="This is a
multiline title">
    example span
  </span>
  has a title a attribute with a newline.
</p>
<hr />
<pre id="output"></pre>

JavaScript

我们可以查询title属性并在空的<pre>元素中显示它,如下所示

js
const span = document.querySelector("span");
const output = document.querySelector("#output");
output.textContent = span.title;

结果

标题属性继承

如果某个元素没有title属性,则它会从其父节点继承该属性,父节点又可能从其父节点继承,依此类推。

如果此属性设置为空字符串,则意味着其祖先的title与之无关,不应在该元素的工具提示中使用。

HTML

html
<div title="CoolTip">
  <p>Hovering here will show "CoolTip".</p>
  <p title="">Hovering here will show nothing.</p>
</div>

结果

无障碍访问问题

title属性的使用对于以下人群来说存在很大问题:

  • 仅使用触控设备的人
  • 使用键盘导航的人
  • 使用辅助技术(如屏幕阅读器或放大镜)导航的人
  • 精细运动控制受损的人
  • 有认知障碍的人

这是由于浏览器支持不一致,再加上浏览器渲染页面后辅助技术的额外解析造成的。如果需要工具提示效果,最好使用更易访问的技术,以便能够使用上述浏览方法访问。

规范

规范
HTML 标准
# the-title-attribute

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅