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>

支援的瀏覽器

屬性 Chrome Edge Firefox Safari Opera
title
html_attributes_reference.htm
廣告