recherche
Maisoninterface Webtutoriel CSSJour 12 : Vérification et erreurs courantes_Tutoriel de base

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 : 通过XHTML1.0校验Le code est le suivant :

    w3.org/check/referer">XHTML 1.0 valide !

    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 :

    CSS校验成功信息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 :

     CSS valide!

  • Déclaration
    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
    Diverses méthodes pour étendre une boîte tout en préservant le rayon de la frontièreDiverses méthodes pour étendre une boîte tout en préservant le rayon de la frontièreApr 17, 2025 am 11:19 AM

    J'ai récemment remarqué un changement intéressant sur Codepen: sur le plan des stylos sur la page d'accueil, il y a un rectangle avec des coins arrondis se développant dans le dos.

    Actualités hebdomadaires de la plate-forme: Amélioration de l'UX sur les connexions lents, un conseil pour écrire du texte alt et un polyfill pour l'attribut de chargement HTMLActualités hebdomadaires de la plate-forme: Amélioration de l'UX sur les connexions lents, un conseil pour écrire du texte alt et un polyfill pour l'attribut de chargement HTMLApr 17, 2025 am 11:09 AM

    Dans cette semaine, comment déterminer une connexion lente, ce que nous devons mettre dans le texte alt pour les images et un nouveau polyfill pour l'attribut de chargement HTML,

    Popovers réutilisables pour ajouter un peu de popPopovers réutilisables pour ajouter un peu de popApr 17, 2025 am 11:02 AM

    Un popover est une vue transitoire qui apparaît sur un contenu à l'écran lorsqu'un utilisateur clique sur un bouton de commande ou dans une zone définie. Par exemple,

    Styling Liens avec de véritables soulignementsStyling Liens avec de véritables soulignementsApr 17, 2025 am 10:57 AM

    Avant de venir à la façon de coiffer, nous devrions répondre à la question: devrions-nous souligner?

    Actualités hebdomadaires de la plate-forme: attribut HTML Loading, les principales spécifications Aria et le passage de iframe à Shadow DomActualités hebdomadaires de la plate-forme: attribut HTML Loading, les principales spécifications Aria et le passage de iframe à Shadow DomApr 17, 2025 am 10:55 AM

    Dans cette semaine, le Roundup des nouvelles de la plate-forme, Chrome présente un nouvel attribut pour le chargement, les spécifications d'accessibilité pour les développeurs Web et la BBC Moves

    Orteil Tic Tic multijoueur avec GraphQLOrteil Tic Tic multijoueur avec GraphQLApr 17, 2025 am 10:54 AM

    GraphQL est un langage de requête pour les API qui est très stimulant pour les développeurs frontaux. Comme le site GraphQL l'explique, vous décrivez vos données, demandez ce

    Opérations logiques avec des variables CSSOpérations logiques avec des variables CSSApr 17, 2025 am 10:44 AM

    Très souvent, tout en utilisant des variables de commutation (une variable qui soit 0 ou 1, un concept qui a expliqué en détail dans cet article), je souhaite que je puisse pouvoir

    Videos YouTube à chargement paresseuxVideos YouTube à chargement paresseuxApr 17, 2025 am 10:40 AM

    C'est une idée très intelligente via Arthur Corenzan. Plutôt que d'utiliser l'intégration YouTube par défaut, qui ajoute un Crapload de ressources à une page si l'utilisateur joue

    See all articles

    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)
    1 Il y a quelques moisBy尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O. Meilleurs paramètres graphiques
    1 Il y a quelques moisBy尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O. Comment réparer l'audio si vous n'entendez personne
    1 Il y a quelques moisBy尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O. Commandes de chat et comment les utiliser
    1 Il y a quelques moisBy尊渡假赌尊渡假赌尊渡假赌

    Outils chauds

    Listes Sec

    Listes Sec

    SecLists est le compagnon ultime du testeur de sécurité. Il s'agit d'une collection de différents types de listes fréquemment utilisées lors des évaluations de sécurité, le tout en un seul endroit. SecLists contribue à rendre les tests de sécurité plus efficaces et productifs en fournissant facilement toutes les listes dont un testeur de sécurité pourrait avoir besoin. Les types de listes incluent les noms d'utilisateur, les mots de passe, les URL, les charges utiles floues, les modèles de données sensibles, les shells Web, etc. Le testeur peut simplement extraire ce référentiel sur une nouvelle machine de test et il aura accès à tous les types de listes dont il a besoin.

    Version Mac de WebStorm

    Version Mac de WebStorm

    Outils de développement JavaScript utiles

    mPDF

    mPDF

    mPDF est une bibliothèque PHP qui peut générer des fichiers PDF à partir de HTML encodé en UTF-8. L'auteur original, Ian Back, a écrit mPDF pour générer des fichiers PDF « à la volée » depuis son site Web et gérer différentes langues. Il est plus lent et produit des fichiers plus volumineux lors de l'utilisation de polices Unicode que les scripts originaux comme HTML2FPDF, mais prend en charge les styles CSS, etc. et présente de nombreuses améliorations. Prend en charge presque toutes les langues, y compris RTL (arabe et hébreu) ​​et CJK (chinois, japonais et coréen). Prend en charge les éléments imbriqués au niveau du bloc (tels que P, DIV),

    VSCode Windows 64 bits Télécharger

    VSCode Windows 64 bits Télécharger

    Un éditeur IDE gratuit et puissant lancé par Microsoft

    DVWA

    DVWA

    Damn Vulnerable Web App (DVWA) est une application Web PHP/MySQL très vulnérable. Ses principaux objectifs sont d'aider les professionnels de la sécurité à tester leurs compétences et leurs outils dans un environnement juridique, d'aider les développeurs Web à mieux comprendre le processus de sécurisation des applications Web et d'aider les enseignants/étudiants à enseigner/apprendre dans un environnement de classe. Application Web sécurité. L'objectif de DVWA est de mettre en pratique certaines des vulnérabilités Web les plus courantes via une interface simple et directe, avec différents degrés de difficulté. Veuillez noter que ce logiciel