标题
title
全局属性 包含表示与其所属元素相关的建议信息的文本。
试一试
title
属性的主要用途是为辅助技术标记 <iframe>
元素。
title
属性也可用于标记 数据表 中的控件。
当将title
属性添加到<link rel="stylesheet">
时,会创建一个备用样式表。当使用<link rel="alternate">
定义备用样式表时,此属性是必需的,并且必须设置为非空字符串。
如果包含在<abbr>
的开始标签中,则title
必须是缩写或首字母缩略词的完整展开。在可能的情况下,不要使用title
,而是在第一次使用时以纯文本形式提供缩写或首字母缩略词的展开,并使用<abbr>
标记缩写。这使所有用户都能知道缩写或首字母缩略词缩短了什么名称或术语,同时为用户代理提供有关如何宣布内容的提示。
多行标题
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 表格仅在浏览器中加载
另请参阅
- 所有全局属性。
HTMLElement.title
反映了此属性。