So zeigen Sie Bilder in HTML an: Der Unterschied zwischen Bild und Hintergrund

In diesem Kapitel wird Ihnen der Unterschied zwischen Bildanzeigemethoden in HTML -----img und Hintergrund vorgestellt, damit Sie den Unterschied zwischen den beiden Methoden zur Anzeige von Bildern in HTML verstehen können. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

1. Vom Analysemechanismus

img gehört zum HTML-Tag und der Hintergrund ist die CSS-Methode. Eine Seite besteht aus HTML, CSS und JS. Gemäß dem Browser-Analysemechanismus wird das HTML-Tag zuerst analysiert. Jeder weiß, dass die CSS-Datei in den Kopf geladen wird, aber das bedeutet nicht, dass sie sofort ausgeführt wird, sondern erst nach dem Laden des HTML. Daher sollten wichtige Elemente wie Logos img verwenden.

Wenn nur ein Bild angezeigt werden soll, beispielsweise ein Banner, ein Werbebild usw., empfiehlt sich die Verwendung der Hintergrundmethode. Denn unwichtige Elemente werden automatisch in die hintere Warteschlange gestellt, um zu vermeiden, dass sie Bandbreite belegen und zu Datenstaus führen.

Wenn viele Bilder vorhanden sind, tritt hier ein neues Problem auf. Verschiedene Browser unterstützen unterschiedliche Anzahlen gleichzeitiger Ladevorgänge. (Letzter Test) IE ist 10 und FF ist 10. Wenn es viele Bilder gibt, wird es schwerwiegend sein Verzögerungen oder 404-Fehler, da das langsame Laden von Bildern die Darstellung der Hauptdaten auf der Seite beeinträchtigt, so dass alles, was die Benutzer sehen, leer ist. Haben Sie den Mut, sie warten zu lassen? Wenn Sie Lazyload nicht verwenden, ist es daher besser, den Hintergrund zu verwenden.

Der Vorteil des img-Tags besteht darin, dass es sich selbst schließt und das Erscheinen leerer Tags verhindern kann (leere Tags gehören auch zu den von w3c überprüften Inhalten). Wenn Sie die Hintergrundmethode verwenden, werden alle Symbole im Bootstrap mit i-Tags hinzugefügt, und die i-Tags haben leeren Inhalt, was zu leeren Tags führt (nicht, dass das schlecht wäre, die Vor- und Nachteile werden besprochen). später).

2. Aus SEO-Sicht

Wie ich gerade sagte, ist das img-Tag selbstschließend und kann keinen Textinhalt hinzufügen , img Es gibt ein Alt-Attribut, und dieses Attribut ist im W3C-Standard erforderlich. Dies bietet noch viele Vorteile.

Erstens: Wenn das Bild relativ groß ist oder die Internetgeschwindigkeit des Benutzers langsam ist, schlägt das Laden fehl. Zumindest gibt es eine Textaufforderung, die dem Benutzer mitteilt, was der Inhalt des Bildes ist. Wenn der Benutzer darauf besteht, dieses Bild zu sehen, wischen Sie mehrmals darüber, um es zu laden. Darüber hinaus ist das Alt-Attribut hilfreich, um das Lesen zu erleichtern, insbesondere für blinde Freunde, die Reader zum Durchsuchen von Seiten verwenden. Wenn es keine Textaufforderung gibt, wäre es zu unfreundlich.

Zweitens ist das Alt-Attribut für SEO von Vorteil. Bis Suchmaschinen eine gute Bilderkennung erreichen können, ist es noch ein weiter Weg.

Natürlich gibt es auch Nachteile:

Erstens wird das von Img geladene Bild nur dann geändert, wenn der HTML-Code nicht geändert werden darf Die Datei mit demselben Namen kann ersetzt werden, es kann jedoch ein 304-Status auftreten, und der Server muss entsprechende Einstellungen vornehmen. Zu diesem Zeitpunkt kommen die Vorteile des Hintergrunds zum Vorschein, und dies ist die Kastanie für den Hautwechsel.

Zweitens: Wenn die Größe des Bildanzeigebereichs reserviert ist, muss das Bild mit dem reservierten Platz übereinstimmen, andernfalls wird das Bild entweder gestreckt oder komprimiert, was kein Vorgang mit gleichem Verhältnis ist. Um dieses Problem zu vermeiden, müssen sich Frontend- und visuelle Designer natürlich an bestimmte Normen halten.

3. Semantische Perspektive

Hintergrund hat nichts mit Semantik zu tun.

Vorschlag: Für wichtige Bilder, die zuerst geladen werden müssen, verwenden Sie am besten img. Am besten verwenden Sie den Hintergrund für unwichtige Bilder.

Die bequemste Art, SEO zu betreiben, ist der Hintergrund. Das Bild wird im Hintergrund platziert und der Inhalt wird in den Vordergrund geschrieben, sodass beides korrekt ist. Wenn Sie nicht möchten, dass der Inhalt angezeigt wird, fügen Sie text-indent, -99999, hinzu. (Diese Spielmethode wurde früher in der Zeit verwendet, als Suchmaschinenalgorithmen noch einzeln waren und Schlüsselwörter mit einem hohen Anteil einen höheren Rang hatten.)

Der Ansatz von Bootstrap besteht darin, den Hintergrund zum Festlegen von Symbolen zu verwenden, daher muss er modularisiert werden und die Semantik sollte nicht außer Acht gelassen werden Deinen Kuchen und iss ihn auch. PS: Nach Bootstrap v3 wurde die Symbolschriftart

übernommen. Zweitens ist die Bedeutung des Symbols wirklich nicht hoch. Das Laden am Ende verringert auch die Bandbreitennutzung und verbessert die PV-Geschwindigkeit.

Die Semantik des img-Tags ist sehr klar und kann nicht wahllos verwendet werden. Daher ist es für Bootstrap gut, das semantiklose i-Tag zum Festlegen des Symbols zu verwenden. PS: Bei der Verwendung semantikloser Tags in eigenen Projekten muss unbedingt darauf geachtet werden, ob diese aufwärtskompatibel sind und auf die Definitionen in HTML5

achten

Das obige ist der detaillierte Inhalt vonSo zeigen Sie Bilder in HTML an: Der Unterschied zwischen Bild und Hintergrund. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!