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="上海鲜花港 - 郁金香" />
Om bilden inte kan visas, visar webbläsaren en ersättnings文本，liksom detta:
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:
Texten i den röda cirkeln är den effekt som IE7-webbläsaren visar när användaren flyttar musen över bilden:
Exempel 2
Bilden har specificerats som alternativtext:
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
syntaks
<img alt="text">
egenskapsvärde
| värde | beskrivning |
|---|---|
| text |
Definiera alternativtext för bilden. Principer för användning av alt-text:
|
Webbläsarstöd
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| Stöd | Stöd | Stöd | Stöd | Stöd |
