Maison interface Web tutoriel HTML Tutoriel HTML : attribut title et attribut alt_HTML/Xhtml_Production de pages Web

Tutoriel HTML : attribut title et attribut alt_HTML/Xhtml_Production de pages Web

May 16, 2016 pm 04:43 PM
alt title 图像 属性 教程 文字 显示 替换 浏览器


XHTML est la base de la mise en page CSS. jb51.net a toujours mis l'accent sur l'apprentissage des connaissances XHTML, en prêtant attention à la sémantique et à la structure des documents. Les attributs title et alt me ​​donnent le sentiment le plus intuitif qu'ils peuvent améliorer l'adaptabilité du document et augmenter raisonnablement la densité des mots clés. Dans le standard XHTML, l'attribut alt des images est obligatoire.
XHTML est la base de la mise en page CSS. jb51.net a toujours mis l'accent sur l'apprentissage des connaissances XHTML, en se concentrant sur la sémantique et la structure des documents. Les attributs title et alt me ​​donnent le sentiment le plus intuitif qu'ils peuvent améliorer l'adaptabilité du document et augmenter raisonnablement la densité des mots clés. Dans le standard XHTML, l'attribut alt des images est obligatoire.
attribut alt
Pour les agents utilisateurs (UA) qui ne peuvent pas afficher d'images, de formulaires ou d'applets, l'attribut alt est utilisé pour spécifier le texte de remplacement. La langue du texte de remplacement est spécifiée par l'attribut lang. L'attribut Alt (notez « attribut » plutôt que « étiquette ») contient les instructions de remplacement, qui sont requises pour les images et les points chauds d'image. Il ne peut être utilisé que dans les éléments img, area et input (y compris les éléments applet). Pour les éléments d'entrée, l'attribut alt est destiné à remplacer l'image du bouton de soumission.
Par exemple : utilisez l'attribut alt pour fournir des descriptions textuelles aux spectateurs qui ne peuvent pas voir les images de votre document. Cela inclut les utilisateurs qui utilisent des navigateurs qui ne prennent pas en charge nativement l'affichage des images ou dont l'affichage des images est désactivé, les utilisateurs malvoyants et les utilisateurs qui utilisent des lecteurs d'écran. Le texte alternatif est utilisé pour remplacer une image plutôt que pour fournir un texte descriptif supplémentaire.
Réfléchissez bien avant d'écrire un texte alternatif pour vous assurer qu'il fournit réellement des informations aux personnes qui ne peuvent pas voir l'image et qu'il a du sens dans le contexte. Pour les images décoratives, utilisez une valeur vide (alt="", sans espaces entre guillemets) au lieu d'un texte de remplacement non pertinent tel que "blue bullet" ou "spacer.gif". Ne l'ignorez pas. Si vous l'ignorez, certains lecteurs d'écran liront directement le nom du fichier image, et les navigateurs de texte comme Lynx afficheront le nom du fichier image, et cela ne sera d'aucune utilité à votre navigateur. .
Il est plus simple de définir un texte alternatif pour les images contenant du texte. De manière générale, le texte contenu dans l'image peut être utilisé comme valeur d'attribut alt.
attribut titre
L'attribut title fournit des informations suggérées pour l'élément sur lequel il est défini.
L'attribut title peut être utilisé dans toutes les balises sauf base, basefont, head, html, meta, param, script et title. Mais ce n'est pas nécessaire. C'est peut-être pour cela que beaucoup de gens ne comprennent pas quand l'utiliser.
Utilisez l'attribut title pour fournir des informations supplémentaires non essentielles. La plupart des navigateurs visuels affichent le texte du titre sous forme d'info-bulle lorsque la souris survole un élément spécifique. Cependant, c'est au fabricant de décider comment restituer le texte du titre. Certains navigateurs afficheront le texte du titre dans la barre d'état. Par exemple, les premières versions du navigateur Safari.
Une bonne utilisation de l'attribut title consiste à ajouter un texte descriptif à un lien, en particulier lorsque le lien lui-même n'exprime pas clairement le but du lien. De cette façon, les visiteurs savent où les liens les mèneront et ils ne chargeront pas une page qui ne les intéresserait pas du tout. Une autre application potentielle consiste à fournir des informations descriptives supplémentaires pour les images, telles que des dates ou d'autres informations non essentielles.
 La valeur de l'attribut title peut être définie plus longtemps que la valeur de l'attribut alt. Sachez cependant que certains navigateurs tronqueront les textes trop longs (comme les infobulles ou autres). Par exemple, le navigateur principal de Mozilla ne peut afficher que les 60 premiers caractères. Ceci est considéré comme un bug de Mozilla et vous devez en être conscient.
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Où trouver la courte de la grue à atomide atomique
1 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment réaliser un effet d'écart sur la disposition de la carte et des coupons avec fond de gradient? Comment réaliser un effet d'écart sur la disposition de la carte et des coupons avec fond de gradient? Apr 05, 2025 am 07:48 AM

Réalisez l'effet d'écart de la disposition des coupons de carte. Lors de la conception de la disposition des coupons de carte, vous rencontrez souvent la nécessité d'ajouter des lacunes sur les coupons de carte, surtout lorsque l'arrière-plan est le gradient ...

Comment afficher correctement le 'Jingnan Mai Round Body' installé localement sur la page Web? Comment afficher correctement le 'Jingnan Mai Round Body' installé localement sur la page Web? Apr 05, 2025 pm 10:33 PM

En utilisant récemment des fichiers de police installés localement dans les pages Web, j'ai téléchargé une police gratuite à partir d'Internet et je l'ai installée avec succès dans mon système. Maintenant...

Pourquoi les marges négatives ne prennent-elles pas effet dans certains cas? Comment résoudre ce problème? Pourquoi les marges négatives ne prennent-elles pas effet dans certains cas? Comment résoudre ce problème? Apr 05, 2025 pm 10:18 PM

Pourquoi les marges négatives ne prennent-elles pas effet dans certains cas? Pendant la programmation, les marges négatives dans CSS (négatif ...

Comment obtenir des données d'application et de visionneuse en temps réel sur la page de travail 58.com? Comment obtenir des données d'application et de visionneuse en temps réel sur la page de travail 58.com? Apr 05, 2025 am 08:06 AM

Comment obtenir des données dynamiques de la page de travail 58.com tout en rampant? Lorsque vous rampez une page de travail de 58.com en utilisant des outils de chenilles, vous pouvez rencontrer cela ...

Comment personnaliser le symbole de redimensionnement via CSS et le rendre uniforme avec la couleur d'arrière-plan? Comment personnaliser le symbole de redimensionnement via CSS et le rendre uniforme avec la couleur d'arrière-plan? Apr 05, 2025 pm 02:30 PM

La méthode de personnalisation des symboles de redimension dans CSS est unifiée avec des couleurs d'arrière-plan. Dans le développement quotidien, nous rencontrons souvent des situations où nous devons personnaliser les détails de l'interface utilisateur, tels que l'ajustement ...

Le texte sous la disposition Flex est omis mais le conteneur est ouvert? Comment le résoudre? Le texte sous la disposition Flex est omis mais le conteneur est ouvert? Comment le résoudre? Apr 05, 2025 pm 11:00 PM

Le problème de l'ouverture des conteneurs en raison d'une omission excessive du texte sous disposition flexible et de solutions est utilisé ...

Comment utiliser CSS et Flexbox pour implémenter la disposition réactive des images et du texte à différentes tailles d'écran? Comment utiliser CSS et Flexbox pour implémenter la disposition réactive des images et du texte à différentes tailles d'écran? Apr 05, 2025 pm 06:06 PM

Implémentation de dispositions réactives à l'aide de CSS lorsque nous voulons implémenter des modifications de mise en page sous différentes tailles d'écran dans la conception Web, CSS ...

Quelle est la raison de l'encodage des exceptions lors de l'utilisation de la bibliothèque de demande pour obtenir du texte HTML dans Node.js? Comment le résoudre? Quelle est la raison de l'encodage des exceptions lors de l'utilisation de la bibliothèque de demande pour obtenir du texte HTML dans Node.js? Comment le résoudre? Apr 05, 2025 am 07:03 AM

La raison et la solution pour coder des exceptions lors de l'utilisation de la bibliothèque de requêtes pour obtenir du contenu de texte HTML dans l'environnement Node.js. Pendant le processus de développement de l'utilisation de Node.js, il est souvent nécessaire de ...

See all articles