Verwenden Sie HTMLs und <figcaption>, um Bildern oder Medien intuitiv und semantisch einen Bildunterschriftstext hinzuzufügen. 1. wird verwendet, um unabh?ngige Medieninhalte wie Bilder, Videos oder Codebl?cke einzuwickeln. 2. <figcaption> wird als erkl?render Text platziert und kann über oder unter den Medien gefunden werden. 3. Sie verbessern nicht nur die Klarheit der Seitenstruktur, sondern verbessern auch die Zug?nglichkeits- und SEO -Effekte. 4. Wenn Sie es verwenden, sollten Sie darauf achten, Missbrauch zu vermeiden, und sich auf Inhalte bewerben, die eher von Anweisungen als von gew?hnlichen dekorativen Bildern betont und begleitet werden müssen. 5. Das Alt -Attribut von kann nicht ignoriert werden, das sich von Figcaption unterscheidet; 6. Die Figur ist flexibel und kann nach Bedarf oben oder unten in der Figur platziert werden. Die korrekte Verwendung dieser beiden Tags hilft beim Erstellen semantischer, leicht verst?ndlicher Webinhalte.

Beim Hinzufügen von Bildunterschriftentext zu Bildern oder Medien ist die Verwendung von HTML <figure></figure> und <figcaption></figcaption> ein sehr intuitiver und semantischer Ansatz. Sie helfen nicht nur dabei, Seitenstruktur zu organisieren, sondern verbessern auch die Zug?nglichkeit und die SEO -Leistung. Der Schlüssel ist, den Zweck und die korrekte Art, diese beiden Tags zu schreiben, zu verstehen.

Grundlegende Struktur: So verbinden Sie Bilder und erkl?rende Texte

Mit dem <figure></figure> Tag wird ein unabh?ngiger Inhaltsblock wie Bilder, Diagramme, Videos usw.; W?hrend <figcaption></figcaption> ist sein "Titel" oder "Erkl?rungstext", der normalerweise in <figure></figure> platziert ist und vor oder hinter dem Inhalt erscheinen kann.

Zum Beispiel:

 <Abus>
  <img  src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/175182660322237.jpeg"  class="lazy"  src = "example.jpg" Alt = "Beispiel Bild" alt="Wie assoziieren Sie Bildunterschriften mit Bildern oder Medien mithilfe der HTML -Figur und der Figcaption -Elemente?" >
  <Figcaption> Dies ist eine kurze Beschreibung des Bildes </Figcaption>
</figur>

Auf diese Weise wissen die Browser- und Bildschirmleser, dass dieser Text eine Beschreibung des Bildes ist. Sie k?nnen auch <figcaption> oben in <figure> platzieren und den Bildunterschriftstext über dem Bild angezeigt werden.

Verschiedene Medien sind geeignet, nicht nur Bilder

Obwohl die h?ufigste darin besteht <figure> es mit <img alt="Wie assoziieren Sie Bildunterschriften mit Bildern oder Medien mithilfe der HTML -Figur und der Figcaption -Elemente?" > zu verwenden, eignen sich auch für andere Medienarten wie Audio-, Video- oder <figcaption> .

Zum Beispiel ein Video mit Anweisungen einbetten:

 <Abus>
  <Videokontrollen>
    <Source Src = "Beispiel.MP4" Typ = "Video/mp4">
    Ihr Browser unterstützt keine Video -Wiedergabe.
  </Video>
  <Figcaption> Dies ist ein Demonstrationsvideo, das den Produktverbrauchsprozess </figcaption> zeigt
</figur>

Zeigen Sie zum Beispiel ein Stück Code:

 <Abus>
  <pre class="brush:php;toolbar:false"> <code> Funktion HelloWorld () {console.log ("Hallo, Welt!"); } </code> 

Solange der Inhalt eine "unabh?ngige Einheit" ist, k?nnen Sie in Betracht ziehen, ihn mit <figure></figure> zu wickeln und Anweisungen mit <figcaption></figcaption> hinzuzufügen.

In praktischen Anwendungen werden mehrere Details beachtet

• Missbrauche es nicht : Wenn es sich nur um ein normales Inline -Bild handelt ( <figure></figure> . Es ist besser für Medieninhalte geeignet, die separate Betonung und Beschreibung erfordert.
• Semantische Priorit?t : Diese Tags werden haupts?chlich zur Verbesserung der Dokumentensemantik und nicht zur Style -Layout verwendet. Obwohl Sie CSS verwenden k?nnen, um den Stil anzupassen, zwingen Sie ihn nicht, ihn für die Typografie willen anzuwenden.
• ALT -Text ist immer noch wichtig : Auch wenn es <figcaption></figcaption> gibt, vergessen Sie nicht das alt -Attribut von <img alt="Wie assoziieren Sie Bildunterschriften mit Bildern oder Medien mithilfe der HTML -Figur und der Figcaption -Elemente?" > . Sie tun unterschiedlich: alt ist der alternative Text, wenn das Bild selbst nicht sichtbar ist, w?hrend Figcaption eine zus?tzliche Beschreibung ist.
• Flexibler Ort : <figcaption></figcaption> kann oben oder unten in der Innenseite von <figure></figure> platziert werden, je nachdem, ob es über oder unterhalb der Medien erscheint.

Grunds?tzlich ist das

Insgesamt sind <figure></figure> und <figcaption></figcaption> ein sehr praktischer Satz von Tags in HTML, die zum Hinzufügen von Anweisungen zu Medieninhalten verwendet werden. Sie machen die Struktur nicht nur klarer, sondern helfen auch, Zug?nglichkeit zu erhalten, und Suchmaschinen identifizieren die Inhaltsabsicht. Achten Sie auf Semantik und Szenen, wenn Sie sie verwenden, und überbeanspruchen Sie sie nicht.

Das obige ist der detaillierte Inhalt vonWie assoziieren Sie Bildunterschriften mit Bildern oder Medien mithilfe der HTML -Figur und der Figcaption -Elemente?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!