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" />
Hvis billedet ikke kan vises, viser browseren erstatnings tekst, som f.eks.:

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:

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

Eksempel 2
Billedet med erstatningstekst specificeret:
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
syntaks
<img alt="tekst">
egenskabsværdi
værdi | beskrivelse |
---|---|
tekst |
Definerer billedets erstatningstekst. Principper for brug af alt-tekst:
|
浏览器支持
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
Chrome | Edge | Firefox | Safari | Opera |
支持 | 支持 | 支持 | 支持 | 支持 |