Heim > Web-Frontend > HTML-Tutorial > Sprechen Sie über den Unterschied zwischen Alt- und Title-Attributen in HTML-Tag-Elementen

Sprechen Sie über den Unterschied zwischen Alt- und Title-Attributen in HTML-Tag-Elementen

青灯夜游
Freigeben: 2020-10-12 17:53:50
nach vorne
2997 Leute haben es durchsucht

Sprechen Sie über den Unterschied zwischen Alt- und Title-Attributen in HTML-Tag-Elementen

Dieser Artikel stellt Ihnen den Unterschied zwischen Alt- und Title-Attributen in HTML-Tag-Elementen vor. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Übersicht

Sie können dieser Frage wahrscheinlich ein Qualifikationsmerkmal hinzufügen. Wir werden das Tag <title> vorerst aus dieser Diskussion ausschließen. Was ist der Unterschied zwischen den Alt- und Title-Attributen<title> 标签排除在本次讨论之外。

元素的 alt 和 title 属性 有什么区别?

(推荐教程:html教程

ALT 属性

最常见用在 <img> 标签上,那我们先来看下 <img> 标签的 alt 属性。

alt 属性是一个必需的属性,它规定在图像无法显示时的替代文本。

假设由于下列原因用户无法查看图像,alt 属性可以为图像提供替代的信息:

  • 网速太慢
  • src 属性中的错误
  • 浏览器禁用图像
  • 用户使用的是屏幕阅读器

<img> 标签的 alt 属性指定了替代文本,用于在图像无法显示或者用户禁用图像显示时,代替图像显示在浏览器中的内容。

强烈推荐您在文档的每个图像中都使用这个属性。这样即使图像无法显示,用户还是可以看到关于丢失了什么东西的一些信息。而且对于残疾人来说,alt 属性通常是他们了解图像内容的唯一方式。

注释和提示:

注释:alt 属性的值是一个最多可以包含 1024 个字符的字符串,其中包括空格和标点。这个字符串必须包含在引号中。这段 alt 文本中可以包含对特殊字符的实体引用,但它不允许包含其他类别的标记,尤其是不允许有任何样式标签。

注释:当用户把鼠标移动到 img 元素上时,Internet Explorer 会显示出 alt 属性的值。这种行为并不正确。所有其他的浏览器正在向规范靠拢,只要当图像无法显示时,才会显示出替代文本。

提示:如果需要为图像创建工具提示,请使用 title 属性。

用法和语法:

用法:alt 属性只能用在 imgareainput 元素中(包括 applet 元素)。对于 input 元素,alt 属性意在用来替换提交按钮的图片。比如:

<input type="image" src="image.gif" alt="Submit" />
Nach dem Login kopieren

语法:
规定图像的替代文本

alt 文本的使用原则:

  • 如果图像包含信息 - 使用 alt 描述图像
  • 如果图像在 a 元素中 - 使用 alt 描述目标链接
  • 如果图像仅供装饰 - 使用 alt=""

TITLE 属性

定义和用法:

title 属性规定关于元素的额外信息。

这些信息通常会在鼠标移到元素上时显示一段工具提示文本(tooltip text)。

提示:title 属性常与 form 以及 a 元素一同使用,以提供关于输入格式和链接目标的信息。同时它也是 abbracronym 元素的必需属性。当然 title 属性是比较广泛使用的,可以用在除了basebasefontheadhtmlmetaparamscripttitle 之外的所有标签。但是并不是必须的。

title 属性有一个很好的用途,即为链接添加描述性文字,特别是当连接本身并不是十分清楚的表达了链接的目的。这样就使得访问者知道那些链接将会带他们到什么地方,他们就不会加载一个可能完全不感兴趣的页面。另外一个潜在的应用就是为图像提供额外的说明信息,比如日期或者其他非本质的信息。

TITLE 标签

看时间还早,我们继续来看下 <title> 标签吧。

<title> 元素可定义文档的标题。

浏览器会以特殊的方式来使用标题,并且通常把它放置在浏览器窗口的标题栏或状态栏上。同样,当把文档加入用户的链接列表或者收藏夹或书签列表时,标题将成为该文档链接的默认名称。

提示: <title> 标签是 <head> des

-Elements?

(Empfohlenes Tutorial: HTML-Tutorial) 🎜ALT-Attribut🎜🎜 Es wird am häufigsten im <img>-Tag verwendet. Schauen wir uns also zunächst das alt-Attribut des <img>-Tags an. 🎜🎜Das Attribut alt ist ein erforderliches Attribut, das alternativen Text angibt, wenn das Bild nicht angezeigt werden kann. 🎜🎜Angenommen, der Benutzer kann das Bild aus folgenden Gründen nicht anzeigen, kann das Attribut alt alternative Informationen für das Bild bereitstellen: 🎜
  • Die Netzwerkgeschwindigkeit ist zu langsam li>
  • src Fehler im Attribut
  • Browser deaktiviert Bilder
  • Benutzer verwendet einen Bildschirmleser
🎜<img>alt-Attribut des /code>-Tags gibt alternativen Text an, der verwendet wird, um den Inhalt des im Browser angezeigten Bildes zu ersetzen, wenn das Bild nicht angezeigt werden kann oder der Benutzer das Bild deaktiviert Anzeige. 🎜🎜Es wird dringend empfohlen, dieses Attribut für jedes Bild in Ihrem Dokument zu verwenden. Selbst wenn das Bild nicht angezeigt werden kann, kann der Benutzer auf diese Weise dennoch einige Informationen darüber sehen, was fehlt. Und für Menschen mit Behinderungen ist das Attribut alt oft die einzige Möglichkeit, den Inhalt eines Bildes zu verstehen. 🎜🎜🎜Hinweise und Tipps: 🎜🎜🎜Hinweis: Der Wert des Attributs alt ist eine Zeichenfolge, die bis zu 1024 Zeichen enthalten kann, einschließlich Leerzeichen und Satzzeichen. Diese Zeichenfolge muss in Anführungszeichen gesetzt werden. Dieser alt-Text darf Entitätsverweise auf Sonderzeichen enthalten, darf aber keine anderen Arten von Markup enthalten und insbesondere keine Style-Tags enthalten. 🎜🎜Hinweis: Wenn der Benutzer die Maus über das Element img bewegt, zeigt Internet Explorer den Wert des Attributs alt an. Dieses Verhalten ist falsch. Alle anderen Browser nähern sich der Spezifikation an und zeigen alternativen Text nur dann an, wenn das Bild nicht angezeigt werden kann. 🎜🎜Tipp: Wenn Sie einen Tooltip für ein Bild erstellen müssen, verwenden Sie das Attribut title. 🎜🎜🎜Verwendung und Syntax: 🎜🎜🎜Verwendung: alt-Attribute können nur in img, area und input verwendet werden. code >-Element (einschließlich des <code>applet-Elements). Für das Element input soll das Attribut alt das Bild der Schaltfläche „Senden“ ersetzen. Zum Beispiel: 🎜rrreee🎜Syntax:
Geben Sie den alternativen Text des Bildes an🎜🎜alt Grundsätze für die Verwendung von Text: 🎜
  • Wenn das Bild Informationen enthält, verwenden Sie alt Beschreiben Sie das Bild
  • Wenn sich das Bild in einem a-Element befindet, verwenden Sie alt, um den Ziellink zu beschreiben
  • Wenn das Bild nur zur Dekoration dient – ​​verwenden Sie das alt=""
🎜TITLE-Attribut🎜🎜🎜Definition und Verwendung: 🎜🎜🎜 Der title Das -Attribut gibt zusätzliche Informationen über das Element an. 🎜🎜Diese Informationen zeigen normalerweise einen Tooltip-Text an, wenn die Maus über das Element bewegt wird. 🎜🎜Tipp: Das Attribut title wird oft mit den Elementen form und a verwendet, um Informationen über das Eingabeformat und das Linkziel bereitzustellen. Es ist außerdem ein erforderliches Attribut der Elemente abbr und acronym. Natürlich ist das Attribut title weit verbreitet und kann zusätzlich zu base, basefont, head verwendet werden. Alle Tags außer html, meta, param, script und title. Aber es ist nicht notwendig. 🎜🎜Das Attribut title eignet sich gut zum Hinzufügen von beschreibendem Text zu einem Link, insbesondere wenn der Link selbst den Zweck des Links nicht klar wiedergibt. Auf diese Weise wissen Besucher, wohin die Links sie führen, und sie laden keine Seite, an der sie möglicherweise überhaupt nicht interessiert sind. Eine weitere mögliche Anwendung besteht darin, zusätzliche beschreibende Informationen für Bilder bereitzustellen, beispielsweise Datumsangaben oder andere nicht wesentliche Informationen. 🎜🎜TITLE-Tag🎜🎜Es ist noch früh, es sich anzusehen, schauen wir uns also weiterhin das <title>-Tag an. Das 🎜🎜<title>-Element definiert den Titel des Dokuments. 🎜🎜Browser verwenden Titel auf besondere Weise und platzieren sie normalerweise in der Titelleiste oder Statusleiste des Browserfensters. Wenn ein Dokument zur Linkliste oder Favoriten- oder Lesezeichenliste eines Benutzers hinzugefügt wird, wird der Titel ebenfalls zum Standardnamen für den Link zum Dokument. 🎜🎜Tipp: Das <title>-Tag ist das Einzige, was im <head>-Tag enthalten sein muss. 🎜🎜🎜Erweiterte Lektüre:🎜Was steht im Titel? 🎜

Achten Sie darauf, den richtigen Titel zu wählen. Es ist wichtig, Ihr Dokument zu definieren und sicherzustellen, dass es effektiv im Web verwendet werden kann.

Denken Sie daran, dass Benutzer auf jedes Dokument in der Sammlung unabhängig und in beliebiger Reihenfolge zugreifen können. Daher sollte der Titel eines Dokuments nicht nur im Kontext anderer Dokumente definiert werden, sondern auch eigene Merkmale aufweisen.

Titel, die die Reihenfolge der Zitierung von Dokumenten enthalten, sind im Allgemeinen keine guten Titel. Beispielsweise trägt ein Titel wie „Kapitel 16“ oder „Teil 5“ nicht dazu bei, dass der Leser den Inhalt versteht. Ein aussagekräftigerer Titel wie „Kapitel 16: HTML-Überschriften“ oder „Teil 5: Verwendung von Überschriften“ drückt nicht nur seinen Platz in einer größeren Sammlung von Dokumenten aus, sondern erklärt auch, worum es in dem Dokument geht, und lockt Leser an mehr Interesse am Lesen haben.

Auch selbstreferenzielle Titel nützen wenig. Titel wie „Homepage“ haben nichts mit dem Inhalt zu tun, und ähnliche Titel umfassen „Feedback-Seite“ oder „Häufig verwendete Links“. Sie sollten einen Titel entwerfen, der einen bestimmten Inhalt und Zweck vermitteln kann, damit die Leser beurteilen können, ob ein Besuch dieser Seite erforderlich ist. „Was ist der Unterschied zwischen Alt und Titel eines Elements – Problem“, das ist ein beschreibender Titel.

Menschen verbringen oft viel Zeit damit, Webdokumente zu erstellen, aber all diese Mühe wird oft nur wegen eines unattraktiven oder bedeutungslosen Titels verschwendet. Als spezielle Software, die automatisch Links für Benutzer sammelt, im Web immer beliebter wurde, wurde nur der Titel einer Webseite als beschreibende Wörter für die Seite in die umfangreiche Datenbank mit Links eingefügt. Deshalb können wir es nicht genug betonen: Wählen Sie für jedes Ihrer Dokumente sorgfältig einen Titel, der beschreibend, nützlich und kontextunabhängig ist.

ENDE.

Das obige ist der detaillierte Inhalt vonSprechen Sie über den Unterschied zwischen Alt- und Title-Attributen in HTML-Tag-Elementen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:csdn.net
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage