Heim > Web-Frontend > HTML-Tutorial > Detaillierte grafische Erläuterung des Unterschieds zwischen alt-Attribut und title-Attribut im -Tag

Detaillierte grafische Erläuterung des Unterschieds zwischen alt-Attribut und title-Attribut im -Tag

yulia
Freigeben: 2018-09-21 17:18:43
Original
11825 Leute haben es durchsucht

Im Seitenlayout werden zwangsläufig Bilder verwendet. Apropos Bilder: Jeder sollte mit den Alt-Attributen und Titelattributen des img-Tags vertraut sein. In diesem Artikel erfahren Sie mehr über den Unterschied zwischen dem alt-Attribut und dem title-Attribut im img-Tag. Interessierte Freunde können unten weiterlesen.

Die Ähnlichkeiten und Unterschiede zwischen dem Alt-Attribut und dem Title-Attribut

Gleichheit: Beide verfügen über eine kleine schwebende Ebene, um bildbezogene Inhalte anzuzeigen

Die Unterschiede sind wie folgt folgt Zeigen Sie die Eigenschaften des

alt-Attributs an:

① Wenn das Bild nicht erfolgreich geladen wurde und nicht angezeigt werden kann, wird an der Stelle, an der das Bild nicht angezeigt wird, ein Textstück angezeigt. Diese Funktion dient dazu, Informationen zu entladenen Bildern bereitzustellen, Benutzern das Durchsuchen von Webseiten zu erleichtern und Entwicklern auch die Pflege von Webseiten zu erleichtern.

② Suchmaschinen können Bilder über die Textbeschreibung dieses Attributs erhalten

Merkmale des Titelattributs:

Das Titelattribut kann für jedes Element verwendet werden, wenn der Benutzer Wenn Sie die Maus auf ein Element bewegen, wird der Inhalt des Titels angezeigt, der als Beschreibung des Bildes dient. Sein Wesen ist eine Notiz oder Anmerkung für das Bild.

Laienhaft ausgedrückt ist das Wesen des Alt-Attributs um das Bild durch Text zu ersetzen, und das Wesentliche des Titelattributs ist die Beschreibung oder Anmerkung des Bildes.

Beispieldemonstration

Der Alt-Attributeffekt ist wie folgt:

<img src="img/frui.jpg" alt="图片未显示出来时,提醒你这是一张图片"/>
Nach dem Login kopieren

Rendering:

Detaillierte grafische Erläuterung des Unterschieds zwischen alt-Attribut und title-Attribut im <img  alt=-Tag" >-Tag"/>

Wenn das Bild nicht normal angezeigt wird, ist das Ergebnis wie in der Abbildung dargestellt und es wird nur der in alt festgelegte Inhalt angezeigt. Die Wirkung des

title-Attributs ist wie folgt:

<img  src="img/fruit.jpg" title="介绍这张图片是创意水果图片"/ alt="Detaillierte grafische Erläuterung des Unterschieds zwischen alt-Attribut und title-Attribut im <img>-Tag" >
Nach dem Login kopieren

Rendering:

Detaillierte grafische Erläuterung des Unterschieds zwischen alt-Attribut und title-Attribut im <img>-Tag

Wie im Bild gezeigt, wird dieses Bild angezeigt Wenn die Maus über das Bild fährt, erscheint normalerweise der Inhalt im Titel, der das Bild beschreibt.

Zusammenfassung: Unabhängig davon, ob das Bild normal angezeigt wird oder nicht, legt das Bild nur das Titelattribut fest. Wenn Sie mit der Maus über das Bild fahren, können Sie die Textbeschreibung des Bildes sehen. Wenn für das Bild nur das Alt-Attribut festgelegt ist, können Sie mit der Maus über das Bild fahren, um den Alternativtext für das Alt-Attribut des Bildes anzuzeigen. Wenn für das Bild sowohl das Titelattribut als auch das Alt-Attribut festgelegt sind, wird beim Bewegen der Maus nur das Titelattribut des Bildes angezeigt. Das Obige stellt hauptsächlich den Unterschied zwischen dem Alt-Attribut und dem Title-Attribut im IMG-Tag vor. Ich hoffe, Sie können es verstehen.

Das obige ist der detaillierte Inhalt vonDetaillierte grafische Erläuterung des Unterschieds zwischen alt-Attribut und title-Attribut im -Tag. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
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