HTML <img> alt-attribut

Definition och användning

alt Attributet är ett nödvändigt attribut som specificerar ersättnings文本 när bilden inte kan visas.

Om användaren inte kan se bilden på grund av följande orsaker, kan alt-attributet tillhandahålla alternativ information för bilden:

  • Internetuppkopplingen är för långsam
  • Fel i src-attributet
  • Webbläsaren inaktiverar bilder
  • Användaren använder en skärmläsare

Alt-attributet för <img>-taggen specificerar ersättnings文本 som används när bilden inte kan visas eller när användaren inaktiverar bildvisning. Detta visar innehållet i webbläsaren istället för bilden.

Vi rekommenderar starkt att du använder detta attribut för varje bild i dokumentet. På så sätt kan användaren fortfarande se vilken information som saknas även om bilden inte kan visas. Och för funktionshindrade är alt-attributet ofta det enda sättet att förstå innehållet i bilden.

Tips:För att skapa en verktygstips för bilden, använd title-attribut!

Tips och kommentarer

Kommentar:alt Värdet på attributet är en sträng som kan innehålla högst 1024 tecken, inklusive mellanslag och punkter. Denna sträng måste inkludera i citattecken. Denna alt-text kan innehålla referenser till specialtecken, men tillåter inte andra kategorier av taggar, särskilt inga stylingsetiketter.

Kommentar:När användaren flyttar muspekaren över img-elementet, visar Internet Explorer värdet på alt-attributet. Detta beteende är inte korrekt. Alla andra webbläsare följer normen, och ersättnings文本 visas endast när bilden inte kan visas.

Tips:Om du behöver skapa en verktygstips för bilden, använd title-attribut.

Exempel

Exempel 1

<img src="/i/eg_tulip.jpg" alt="上海鲜花港 - 郁金香" />

Prova själv

Om bilden inte kan visas, visar webbläsaren en ersättnings文本,liksom detta:

Shanghai Flower Port - Tulip

Dessutom, när användaren flyttar musen över bilden, visar de senaste webbläsarna en textflik med beskrivande text. Följande kod lägger till beskrivande text i alt-egenskapen för bilden: }}

Du kan flytta musen över bilden nedan och se den motsvarande effekten:

Shanghai Flower Port - Tulip

Texten i den röda cirkeln är den effekt som IE7-webbläsaren visar när användaren flyttar musen över bilden:

Shanghai Flower Port - Tulip

Exempel 2

Bilden har specificerats som alternativtext:

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

Prova själv

syntaks

<img alt="text">

egenskapsvärde

värde beskrivning
text

Definiera alternativtext för bilden.

Principer för användning av alt-text:

  • Om bilden innehåller information - använd alt för att beskriva bilden
  • Om bilden är i en a-element - använd alt för att beskriva mållänken
  • Om bilden endast är dekorerande - använd alt=""

Webbläsarstöd

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Stöd Stöd Stöd Stöd Stöd