Corso raccomandato:
Proprietà alt di HTML <img>
Tooltip e note Definizione e uso
L'attributo è un attributo obbligatorio che definisce il testo alternativo da visualizzare quando l'immagine non può essere visualizzata.
- Supponiamo che l'utente non possa visualizzare l'immagine per una delle seguenti ragioni, l'attributo alt può fornire informazioni alternative per l'immagine:
- Velocità di connessione troppo lenta
- Errore nell'attributo src
- Il browser ha disattivato le immagini
L'utente utilizza un lettore di schermo
Proprietà alt del tag <img>
Suggerimento:Raccomandiamo vivamente di utilizzare questa proprietà in ogni immagine del documento. In questo modo, anche se l'immagine non può essere visualizzata, l'utente può vedere alcune informazioni su cosa è stato perso. E per i disabili, l'attributo alt è spesso l'unico modo per comprendere il contenuto dell'immagine. Proprietà titleSe si desidera creare un tooltip per l'immagine, utilizzare
!
Nota:Tooltip e note Il valore dell'attributo è una stringa che può contenere fino a 1024 caratteri, inclusi spazi e punteggiatura. Questa stringa deve essere inclusa tra virgolette. Questo testo alt può contenere riferimenti alle entità speciali, ma non è permesso includere altri tipi di tag, specialmente tag di stile.
Nota:Quando l'utente muove il mouse sull'elemento img, Internet Explorer mostrerà il valore dell'attributo alt. Questo comportamento non è corretto. Tutti gli altri browser stanno avvicinandosi alla specifica, mostrando il testo alternativo solo quando l'immagine non può essere visualizzata.
Suggerimento:Se si desidera creare un tooltip per l'immagine, utilizzare Proprietà title。
Esempio
Esempio 1
<img src="/i/eg_tulip.jpg" alt="上海鲜花港 - 郁金香" />
Se l'immagine non può essere visualizzata, il browser mostrerà il testo alternativo, come questo:
Inoltre, quando l'utente muove il mouse sopra l'immagine, i browser più recenti mostrano un testo descrittivo in una casella di testo. Il seguente codice aggiunge un testo descrittivo all'immagine nell'attributo alt:
Puoi muovere il mouse sull'immagine sottostante per vedere l'effetto corrispondente:
Il testo nel cerchio rosso è l'effetto visualizzato dal browser IE7 quando l'utente muove il mouse sull'immagine:
Esempio 2
Immagine specificata con testo alternativo:
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
Sintassi
<img alt="testo">
valore attributo
| valore | descrizione |
|---|---|
| testo |
Definire il testo alternativo dell'immagine. Principi dell'uso del testo alt:
|
Supporto browser
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| Supporto | Supporto | Supporto | Supporto | Supporto |
