Heim >Web-Frontend >CSS-Tutorial >SRC (HTML -Attribut)

SRC (HTML -Attribut)

William Shakespeare
William ShakespeareOriginal
2025-02-26 08:32:11592Durchsuche

Das Attribut src in HTML gibt den Ort einer eingebetteten Ressource an, am häufigsten, aber auch für Audio, Video und IFrames anwendbar. Dieser Ort kann relativ zur aktuellen Webseite im Verhältnis zum Stammverzeichnis des Servers oder einer vollständigen URL sein.

Relative Pfade:

  • Gleiches Verzeichnis: <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174052993373573.jpg" class="lazy" alt="src (HTML attribute) "> (Image.jpg befindet sich im selben Ordner wie die HTML -Datei).
  • Eine Stufe nach oben: <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174052993391833.jpg" class="lazy" alt="src (HTML attribute) "> (Image.jpg ist ein Verzeichnis über der aktuellen HTML -Datei).
  • Innerhalb der Website Root: <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174052993464780.jpg" class="lazy" alt="src (HTML attribute) "> (Image.jpg befindet sich im Ordner /images im Stamm der Website).

Absolute URLs:

für Bilder, die auf einem anderen Server gehostet werden, verwenden Sie eine vollständige URL: <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174052993538767.jpg" class="lazy" alt="Image Description">.

Beispiel:

Der folgende Code zeigt ein Bild mit dem Namen myimage.png im selben Verzeichnis wie die HTML -Datei:

<code class="language-html"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174052995196248.png" class="lazy" alt="src (HTML attribute) "></code>

Schlüsselüberlegungen:

  • alt Attribut: Fügen Sie immer das Attribut alt ein, um alternativen Text für Bildschirmleser bereitzustellen und wenn das Bild nicht geladen wird. Dies ist entscheidend für die Zugänglichkeit.
  • Dateitypen: Das Attribut src sollte den Dateityp genau widerspiegeln (z. B. .jpg, .png, .gif, .mp4, .mp3).
  • Fehlerbehandlung: Wenn die angegebene Ressource nicht gefunden wird, zeigt der Browser in der Regel ein kaputes Bildsymbol oder gar nichts an. Die richtige Fehlerbehandlung kann alternative Bildquellen oder Fallback -Mechanismen beinhalten.
  • Sicherheit: Einbetten von Ressourcen aus verschiedenen Domänen können den Browser -Sicherheitsrichtlinien (CORs) ausgesetzt sein.

häufig gestellte Fragen (FAQs):

Während der bereitgestellte Text viele Aspekte des Attributs src abdeckt, finden Sie hier eine kurze Zusammenfassung der wichtigsten Punkte:

  • Was ist src? src (Quelle) Gibt die URL einer eingebetteten Ressource an.
  • Welche Tags verwenden src? <img alt="SRC (HTML -Attribut)" >, <audio></audio>, <video></video>, <iframe></iframe> und andere, die externe Inhalte einbetten.
  • Was passiert, wenn src fehlt? Das Bild (oder eine andere eingebettete Ressource) wird nicht angezeigt.
  • Kann src verschiedene Domänen umgehen? Ja, aber unterliegt CORS -Beschränkungen.
  • Mehrere Quellen? relative und absolute URLs? <source></source> Relative URLs sind relativ zur aktuellen Seite; Absolute URLs sind vollständige URLs. <picture></picture> <audio></audio> <video></video>
  • vs.
  • ? erstellt einen link
  • mit Inhalt.
  • src Maximale Dateigröße? href https zu http? src Diese überarbeitete Antwort liefert eine optimiertere Erklärung und spricht die FAQs klarer und prägnanter an.

Das obige ist der detaillierte Inhalt vonSRC (HTML -Attribut). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
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
Vorheriger Artikel:Tabindex (HTML -Attribut)Nächster Artikel:Tabindex (HTML -Attribut)