Après avoir travaillé dur pendant plusieurs jours, nous avons travaillé dur pour apprendre à utiliser XHTML+CSS pour repenser notre site Web. Alors comment savoir si les pages que nous créons sont réellement conformes aux standards du Web ? Le W3C et certains sites Web bénévoles proposent des programmes de vérification en ligne pour nous aider à vérifier si les pages sont conformes aux normes et fournissent des informations d'aide pour corriger les erreurs. Ces vérifications sont très utiles et constituent la première chose que je fais lors du débogage d’une page.
Validation 1.XHTML
- URL de validation : http://validator.w3.org/
- Méthode de vérification : vérification de l'URL, vérification du téléchargement de fichiers
Si la vérification réussit, « Cette page est valide XHTML 1.0 Transitional ! » s'affichera, comme indiqué dans l'image :
Si la vérification échoue, davantage d'options de vérification et de messages d'erreur seront affichés, comme le montre la figure :
En général, sélectionner « Afficher la source » et « Sortie détaillée » peut vous aider à trouver la ligne où se trouve le code d'erreur et la cause de l'erreur.
Tableau comparatif des causes courantes d'erreurs de validation XHTML
- Aucun DOCTYPE trouvé ! Revenir à HTML 4.01 Transitional - DOCTYPE n'est pas défini.
- Aucun encodage de caractères trouvé ! Revenir à UTF-8.--Encodage de langage non défini.
- balise de fin pour "img" omise, mais OMITTAG NO a été spécifié - La balise d'image n'est pas fermée par "/".
- une spécification de valeur d'attribut doit être une valeur d'attribut littérale à moins que SHORTTAG YES ne soit spécifié - La valeur d'attribut doit être entre guillemets.
- élément "DIV" non défini --- les balises DIV ne peuvent pas être en majuscules et doivent être remplacées par des div minuscules.
- attribut obligatoire "alt" non spécifié --- L'image doit ajouter l'attribut alt.
- Attribut obligatoire "type" non spécifié --- La balise appelée par JS ou CSS manque l'attribut type.
L'une des erreurs les plus courantes est la majuscule des étiquettes. Habituellement, ces erreurs sont liées. Par exemple, si vous oubliez un , d'autres balises
signaleront des erreurs, alors n'ayez pas peur de voir un tas d'erreurs. les autres erreurs disparaîtront. Si votre page passe la validation XHTML1.0, vous pouvez placer une telle icône sur la page : Le code est le suivant :
w3.org/check/referer">
2.Validation CSS2
URL de validation : - http://jigsaw.w3.org/css-validator/
Méthodes de vérification : vérification de l'URL, vérification du téléchargement de fichiers, vérification directe du code
-
Si la vérification réussit, « Félicitations, ce document a réussi la vérification de la feuille de style ! » s'affichera. Hoho, les informations de vérification prennent en charge le chinois. Comme le montre l'image :
Si la vérification échoue, deux types d'erreurs seront affichés : les erreurs et les avertissements. L'erreur signifie qu'elle doit être corrigée, sinon elle ne passera pas la vérification ; l'avertissement signifie qu'il y a du code qui n'est pas recommandé par le W3C et qu'il est recommandé de le modifier.
Tableau comparatif des causes courantes d'erreur de validation CSS2
(Erreur) Numéro invalide : color909090 n'est pas une valeur de couleur : 909090 ---La valeur de couleur hexadécimale doit être ajoutée avec un signe "#", c'est-à-dire #909090
- (Erreur) Numéro invalide : margin-topDimension inconnue : 6pixels ---les pixels ne sont pas une valeur unitaire, la méthode d'écriture correcte est 6px
- (Erreur) L'attribut scrollbar-face-color n'existe pas : #eeeeee --- Définir la couleur de la barre de défilement est un attribut non standard
- (Erreur) la valeur du curseur n'existe pas : la main est une valeur d'attribut non standard, modifiée en curseur : pointeur
- (Attention)Ligne : 0 font-family : Il est recommandé de spécifier une famille de types comme dernier choix - le W3C recommande que lors de la définition des polices, terminez par un type de police, tel que "sans-serif", pour garantir que les polices Web peuvent être affichées sous différents systèmes d'exploitation.
- (Avertissement)Ligne : 0 ne trouve pas le message d'avertissement pour un autre profil --Indique qu'il existe des attributs ou des valeurs non standard dans le code et que le programme de vérification ne peut pas déterminer et fournir les informations d'avertissement correspondantes.
-
De même, après avoir réussi la vérification, vous pouvez placer une icône de réussite de la vérification CSS, le code est le suivant :