Heim Web-Frontend HTML-Tutorial So verwenden Sie das img-Bild-Tag in HTML/XHTML

So verwenden Sie das img-Bild-Tag in HTML/XHTML

Jan 24, 2018 am 09:22 AM
html xhtml 标签

Dieses Mal zeige ich Ihnen, wie Sie das img-Bild-Tag in HTML/XHTML verwenden. Was sind die Vorsichtsmaßnahmen für die Verwendung des img-Bild-Tags in HTML/XHTML? Schauen Sie mal rein.

Der Bild-Tag wird verwendet, um ein Bild auf einer Webseite anzuzeigen.
HTML/XHTML-Bild--Tag
In XHTML wird das -Tag verwendet, um ein anzuzeigendes Bild zu definieren. ist ein ungepaartes Tag.

Grundsätzliche Syntax:

bestimmt die Quelle des Bildes über das src-Attribut . Die URL ist eine relative oder absolute Bildadresse.

Bild-Tag-Attribute:

src:
Bild Quelle, erforderlich. Geben Sie die Quelladresse des angezeigten Bildes an. Dabei kann es sich um eine relative oder eine absolute Adresse handeln. alt: Alternativtext, kann weggelassen werden. Es wird verwendet, um den angezeigten Text zu ersetzen, wenn das Bild nicht angezeigt werden kann oder der Browser das Bild blockiert.
Titel: Bildaufforderungstext, kann weggelassen werden. Wenn Sie mit der Maus über das Bild fahren, wird der entsprechende Text angezeigt.

Breite: Die Breite der Bildanzeige, die weggelassen werden kann. Einheiten sind Pixel.
Höhe: Die Höhe der Bildanzeige, die weggelassen werden kann. Einheiten sind Pixel.

Textersetzungsattribut (alt)

Textersetzungsattribut des Bild-Tags alt Obwohl es sich nicht um ein erforderliches Attribut handelt, ist es ein sehr wichtiges Attribut. Wenn der Browser das Bild aus irgendeinem Grund nicht lesen kann, wird dieser alternative Text angezeigt, um das Originalbild zu ersetzen und die verlorenen relevanten Bildinformationen bereitzustellen. Dieses Attribut hilft auch Benutzern, die Nur-Text-Browser verwenden, den Inhalt der Seite zu verstehen.
Daher empfiehlt es sich, jedem Bild ein aussagekräftiges Alt-Text-Ersetzungsattribut hinzuzufügen.

Geben Sie die Bildanzeigegröße an

Sie können das Breiten- oder Höhenattribut zum -Tag hinzufügen, um die Bildanzeigegröße manuell festzulegen:

Tipps

Allgemeine Situation Das Bildgrößenattribut wird ignoriert und die ursprüngliche Bildgröße oder die adaptive Größenanzeige des Browsers wird standardmäßig angezeigt. Die Angabe einer ungeeigneten Bildanzeigegröße kann dazu führen, dass das Bild verzerrt erscheint.
Da das Laden von Bildern eine gewisse Zeit in Anspruch nimmt, sollten Sie versuchen, die Größe des Bildes zu reduzieren und gleichzeitig die Qualität des Bildes sicherzustellen, um ein gutes Benutzerzugriffserlebnis zu erzielen.

Erweiterte Lektüre

Pixel: Wir können uns ein Pixel anschaulich als den kleinsten Punkt vorstellen, den ein Computer anzeigen kann. Beispielsweise sagen wir oft, dass die Bildschirmauflösung 1024 * 768 beträgt, was bedeutet, dass der Bildschirm vorhanden ist 1024 (Pixel) Punkte horizontal und 768 (Pixel) Punkte vertikal. Wenn es als Einheit verwendet wird, wird es im Allgemeinen standardmäßig als pix geschrieben.

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

Wie man die Tabellenränder anzeigt

Wie man die Download-Funktion in HTML implementiert

Was ist der Unterschied zwischen Klasse und ID beim Markieren von HTML-Elementen

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das img-Bild-Tag in HTML/XHTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Tabellenrahmen in HTML Tabellenrahmen in HTML Sep 04, 2024 pm 04:49 PM

Anleitung zum Tabellenrahmen in HTML. Hier besprechen wir verschiedene Möglichkeiten zum Definieren von Tabellenrändern anhand von Beispielen für den Tabellenrand in HTML.

HTML-Rand links HTML-Rand links Sep 04, 2024 pm 04:48 PM

Anleitung zum HTML-Rand links. Hier besprechen wir einen kurzen Überblick über HTML margin-left und seine Beispiele sowie seine Code-Implementierung.

Verschachtelte Tabelle in HTML Verschachtelte Tabelle in HTML Sep 04, 2024 pm 04:49 PM

Dies ist eine Anleitung für verschachtelte Tabellen in HTML. Hier diskutieren wir anhand der entsprechenden Beispiele, wie man eine Tabelle innerhalb der Tabelle erstellt.

HTML-Tabellenlayout HTML-Tabellenlayout Sep 04, 2024 pm 04:54 PM

Leitfaden zum HTML-Tabellenlayout. Hier besprechen wir die Werte des HTML-Tabellenlayouts zusammen mit den Beispielen und Ausgaben im Detail.

HTML-Eingabeplatzhalter HTML-Eingabeplatzhalter Sep 04, 2024 pm 04:54 PM

Leitfaden für HTML-Eingabeplatzhalter. Hier besprechen wir die Beispiele für HTML-Eingabeplatzhalter zusammen mit den Codes und Ausgaben.

HTML-geordnete Liste HTML-geordnete Liste Sep 04, 2024 pm 04:43 PM

Leitfaden zur HTML-geordneten Liste. Hier besprechen wir auch die Einführung von HTML-geordneten Listen und Typen sowie deren Beispiele

Text in HTML verschieben Text in HTML verschieben Sep 04, 2024 pm 04:45 PM

Anleitung zum Verschieben von Text in HTML. Hier besprechen wir eine Einführung, wie Marquee-Tags funktionieren, mit Syntax und Beispielen für die Implementierung.

HTML-Onclick-Button HTML-Onclick-Button Sep 04, 2024 pm 04:49 PM

Anleitung zum HTML-OnClick-Button. Hier diskutieren wir deren Einführung, Funktionsweise, Beispiele und Onclick-Events in verschiedenen Veranstaltungen.

See all articles