HTML title 属性用于提供有关元素的附加信息,当用户将鼠标悬停在元素上时,通常显示为工具提示。
通过提供清晰的说明或工具提示,此属性有利于辅助功能和改善用户体验。它有助于提高所有用户的可访问性和清晰度,并且可以被 Web 开发人员用来为网页上的内容提供有用的上下文或解释。
语法
<element title="text">
此属性接受文本作为值。
适用对象
由于 style 是 HTML 中的全局属性,因此所有非结构性标签都支持 title 属性。一些异常是 <html>、<head>、<title> 等,因为它们是结构元素。
HTML title 属性的示例
以下示例将说明 HTML title 属性,我们应该在何处以及如何使用此属性!
定义段落的标题
在以下示例中,让我们看看 HTML 文档中标题属性的工作原理。在输出中,当您将鼠标悬停在段落标签上时,将显示标题。
<!DOCTYPE html>
<html>
<body>
<h3>Example of title Attribute</h3>
<p title="HTML title Attribute Description">
HTML title attribute is used to provide
additional information about an element,
usually displayed as a tooltip when the
user hovers over the element.
</p>
</body>
</html>
iframe 元素的标题
考虑到以下示例,我们将在其中将 title 属性与 iframe 一起使用。
<!DOCTYPE html>
<html>
<body>
<h3>Example of title Attribute</h3>
<p>
Use the <code>title</code> attribute on an
<code>iframe</code> to clearly identify the
content of the <code>iframe</code> to screen readers.
If you hove over the top edge of the frame you
will the value of title attribute value
</p>
<iframe title="Wikipedia page for the HTML language"
src="https://en.m.wikipedia.org/wiki/HTML">
</iframe>
</body>
</html>
title 属性的继承
在下面的场景中,我们将观察 title 属性的继承。如果标题标签未提及标题,则父标签的标题可以继承到子标签。
<!DOCTYPE html>
<html>
<body>
<div title="CoolTip">
<p>
Hovering here will show "CoolTip".
</p>
<p title="">
Hovering here will show nothing.
</p>
</div>
</body>
</html>
支持的浏览器
浏览器 | |||||
---|---|---|---|---|---|
是否支持 | Yes | Yes | Yes | Yes | Yes |