HTML - title 属性

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

打印本页