HTML - title 属性

HTML 的title 属性用于提供有关元素的附加信息，通常在用户将鼠标悬停在元素上时显示为工具提示。

通过提供清晰的解释或工具提示，此属性有利于辅助功能并改善用户体验。它有助于提高所有用户的辅助功能和清晰度，并且可以被 Web 开发人员用来为网页上的内容提供有用的上下文或解释。

语法

<element title="text">

此属性接受文本作为值。

应用于

由于 style 是 HTML 中的全局属性，因此所有非结构化标签都支持 title 属性。一些例外是<html>，<head>，<title> 等，因为它们是结构化元素。

HTML title 属性示例

下面的示例将说明 HTML title 属性，以及我们应该在哪里以及如何使用此属性！

为段落定义标题

在以下示例中，让我们看看 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 属性的继承。如果未为 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>

支持的浏览器

属性
title	是	是	是	是	是

html_attributes_reference.htm

打印页面