Kursus anbefaling:

HTML <img> alt egenskab

Værktøjslinje og kommentarer Definition og brug

Egenskaben er en obligatorisk egenskab, der bestemmer erstatnings teksten, der vises, når billedet ikke kan vises.

  • Antag, at brugeren ikke kan se billedet af følgende årsager, kan alt-attributten give billedet en erstatnings information:
  • For langsom internetforbindelse
  • Fejl i src egenskaben
  • Browseren deaktiverer billeder

Brugeren bruger en skærmlæser

img tags alt egenskab definerer erstatnings tekst, der bruges til at erstatte billedet i browseren, når billedet ikke kan vises eller når brugeren deaktiverer visning af billeder.

Bemærk:Vi anbefaler kraftigt, at du bruger denne egenskab til hver enkelt billede i dokumentet. På denne måde kan brugeren stadig se nogle oplysninger om, hvad der mangler, selvom billedet ikke kan vises. Og for handicappede er alt-attributten ofte den eneste måde at forstå indholdet af billedet på. title egenskabHvis du har brug for at oprette en værktøjslinje for et billede, skal du bruge

Kommentar:Værktøjslinje og kommentarer Værdien af egenskaben er en streng, der maksimalt kan indeholde 1024 tegn, herunder mellemrum og tegnsætning. Denne streng skal være i anførselstegn. Denne alt-tekst kan indeholde referencer til specielle tegn, men må ikke indeholde andre kategorier af markeringer, især må der ikke være nogen stil tags.

Kommentar:Når brugeren flytter musen over img-elementet, viser Internet Explorer værdien af alt-attributten. Dette opførsel er ikke korrekt. Alle andre browsere følger standarden, og der vises kun erstatnings tekst, når billedet ikke kan vises.

Bemærk:Hvis du har brug for at oprette en værktøjslinje for et billede, skal du bruge title egenskab

Eksempel

Eksempel 1

<img src="/i/eg_tulip.jpg" alt="Shanghai Flower Port - Tulip" />

Prøv det selv

Hvis billedet ikke kan vises, viser browseren erstatnings tekst, som f.eks.:

Shanghai Flower Port - Tulip

Desuden viser de nyeste browsere en tekstboks med beskrivende tekst, når brugeren flytter musen over billedet. Følgende kode tilføjer beskrivende tekst til billedets alt-attribut:

Du kan flytte musen over det nedenstående billede og se den tilsvarende effekt:

Shanghai Flower Port - Tulip

Teksten i den røde cirkel er effekten, der vises, når brugeren flytter musen over billedet i IE7-browseren:

Shanghai Flower Port - Tulip

Eksempel 2

Billedet med erstatningstekst specificeret:

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

Prøv det selv

syntaks

<img alt="tekst">

egenskabsværdi

værdi beskrivelse
tekst

Definerer billedets erstatningstekst.

Principper for brug af alt-tekst:

  • Hvis billedet indeholder information - brug alt-beskrivelse af billedet
  • Hvis billedet er i et a-element - brug alt-beskrivelse af mållinken
  • Hvis billedet kun er dekorerende - brug alt=""

浏览器支持

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
支持 支持 支持 支持 支持