Utilisez les balises standard dl, dt, dd pour abandonner la production de pages list_HTML/Xhtml_Web

Aujourd'hui, de plus en plus de développeurs front-end commencent à utiliser le CSS xHTML pour remplacer la mise en page originale du tableau afin de compléter la mise en page globale de la page Web. Cela réduit non seulement les coûts de développement et de maintenance du site Web, mais rend également le code plus volumineux. sémantique. Cependant, cela ne signifie pas que le tableau a disparu depuis lors. Il est encore utilisé par de nombreuses personnes comme une nécessité pour la présentation de données dans des pages Web, telles que des listes de données personnelles, etc. En fait, l'utilisation des balises HTML dl, dt et dd vous permettra d'économiser plus de code et de rendre le code plus cohérent sémantiquement avec le contenu. Bien sûr, les tableaux ont aussi leur place, c'est-à-dire les tableaux de données avec une grande quantité de données, mais les petites listes de données et les formulaires n'ont pas du tout besoin d'utiliser des tableaux !
Si vous utilisez encore des tableaux traditionnels pour créer des listes de données, continuez à lire pour voir comment l'utilisation des balises HTML dl, dt et dd peut faciliter votre travail...
liste de données de tableau
Les données Le code de liste de la table traditionnelle est le suivant. Nous devons ajouter des balises tr à chaque ligne, puis ajouter une balise td pour le titre et les données. Puisque les balises sont toutes des td, si nous voulons ajouter des styles, nous devons ajouter un attribut de classe à chaque td.

Copier le code

Le code est le suivant :

>

;


;/td> ;




class=" text">26 mai 1986

le code CSS correspondant, on ajoute des styles aux classes précédemment déclarées en HTML.





Copier le code

Le code est le suivant :

/*DONNÉES DE LA LISTE DES TABLES* /

tableau { marge-bas:50px; } tableau tr .title { fond:#5f9be3; gras;

padding:5px;

width:100px;

}
table tr .text {
padding-left:10px;


À partir du code ci-dessus, on peut voir qu'en utilisant la balise table, si vous souhaitez utiliser CSS pour modifier ou modifier le contenu, vous devez ajouter des attributs de classe correspondants à la cellule td. Cela augmentera virtuellement votre charge de travail et le code deviendra légèrement plus volumineux. Que signifie avoir plus de code ? Cela signifie que le trafic du site Web est gaspillé, que plus de risques de bugs sont générés et que la maintenance ultérieure est plus difficile.
Liste de données dl, dt, dd
Jetons maintenant un coup d'œil à la liste de données en utilisant les balises HTML dl, dt, dd. Nous utilisons d’abord la balise dl (liste de définition-liste personnalisée) pour accueillir l’ensemble de la structure de données, puis nous utilisons la balise dt (titre personnalisé) et la balise dd (description personnalisée) pour accueillir le titre et le contenu des données.





Copier le code

Le code est le suivant :

>

Nom :

Squall Li

Âge :

;

Sexe :

Homme

Jour de naissance :

26 mai 1986< ;/dd>

Dans le code CSS, il suffit de faire flotter dt et dd vers la gauche.

Copier le code


Le code est le suivant :


/*DL, DT, DD TAGS LIST DATA*/
dl {

margin-bottom:50px;
}
dl dt {
background:#5f9be3;

color:#fff; :left;

font-weight:bold; margin-right:10px; padding:5px width:100px; 2px 0; padding:5px 0;

}

À partir des exemples de dl, dt et dd, vous devriez pouvoir voir clairement que leurs codes sont plus simples, plus fluides, et plus sémantique, non ?
Voyant cela, si vous insistez toujours pour utiliser des balises de table pour remplir des formulaires Web ou d'autres mises en page de pages Web, il est maintenant temps de modifier votre code. Facilitez-vous la tâche !

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

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

AI Clothes Remover

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

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Afficher plus

Article chaud

<🎜>: Grow A Garden - Guide de mutation complet

3 Il y a quelques semaines By DDD

<🎜>: Bubble Gum Simulator Infinity - Comment obtenir et utiliser les clés royales

3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Comment réparer KB5055612 ne parvient pas à s'installer dans Windows 10?

3 Il y a quelques semaines By DDD

Nordhold: Système de fusion, expliqué

3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Mandragora: Whispers of the Witch Tree - Comment déverrouiller le grappin

3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Afficher plus

Outils chauds

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

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

Afficher plus

Sujets chauds

Tutoriel Java

1664

14

Tutoriel CakePHP

1423

52

Tutoriel Laravel

1321

25

Tutoriel PHP

1269

29

Tutoriel C#

1249

24

Afficher plus

Related knowledge

Comprendre HTML, CSS et JavaScript: un guide pour débutant Apr 12, 2025 am 12:02 AM

WebDevelopmentReliesOnHTML, CSS, etjavascript: 1) HTMLSTRUCTURESCONTENT, 2) CSSSTYLESIT, et3) JavascriptAdddsInterActivity, Forming TheasisofmodernweBEBExperiences.

HTML: The Structure, CSS: The Style, Javascript: Le comportement Apr 18, 2025 am 12:09 AM

Les rôles de HTML, CSS et JavaScript dans le développement Web sont: 1. HTML définit la structure de la page Web, 2. CSS contrôle le style de page Web, et 3. JavaScript ajoute un comportement dynamique. Ensemble, ils construisent le cadre, l'esthétique et l'interactivité des sites Web modernes.

L'avenir de HTML, CSS et JavaScript: Tendances de développement Web Apr 19, 2025 am 12:02 AM

Les tendances futures de HTML sont la sémantique et les composants Web, les tendances futures de CSS sont CSS-in-JS et CSShoudini, et les tendances futures de JavaScript sont WebAssembly et sans serveur. 1. La sémantique HTML améliore l'accessibilité et les effets de référencement, et les composants Web améliorent l'efficacité du développement, mais l'attention doit être accordée à la compatibilité du navigateur. 2. CSS-in-JS améliore la flexibilité de gestion du style mais peut augmenter la taille du fichier. CSShoudini permet le fonctionnement direct du rendu CSS. 3.WeBassembly optimise les performances de l'application du navigateur mais a une courbe d'apprentissage abrupte, et sans serveur simplifie le développement mais nécessite une optimisation des problèmes de démarrage à froid.

L'avenir de HTML: évolution et tendances de la conception Web Apr 17, 2025 am 12:12 AM

L'avenir de HTML est plein de possibilités infinies. 1) Les nouvelles fonctionnalités et normes comprendront plus de balises sémantiques et la popularité des composants Web. 2) La tendance de la conception Web continuera de se développer vers une conception réactive et accessible. 3) L'optimisation des performances améliorera l'expérience utilisateur grâce à des technologies de chargement d'image réactives et de chargement paresseux.

HTML vs CSS vs JavaScript: un aperçu comparatif Apr 16, 2025 am 12:04 AM

Les rôles de HTML, CSS et JavaScript dans le développement Web sont: HTML est responsable de la structure du contenu, CSS est responsable du style et JavaScript est responsable du comportement dynamique. 1. HTML définit la structure et le contenu de la page Web via des balises pour assurer la sémantique. 2. CSS contrôle le style de page Web via des sélecteurs et des attributs pour le rendre beau et facile à lire. 3. JavaScript contrôle le comportement de la page Web via les scripts pour atteindre des fonctions dynamiques et interactives.

HTML: construire la structure des pages Web Apr 14, 2025 am 12:14 AM

HTML est la pierre angulaire de la construction de la structure des pages Web. 1. HTML définit la structure et la sémantique du contenu et les utilisations, etc. Tags. 2. Fournir des marqueurs sémantiques, tels que, etc., pour améliorer l'effet SEO. 3. Pour réaliser l'interaction de l'utilisateur via des balises, faites attention à la vérification de la forme. 4. Utilisez des éléments avancés tels que, combinés avec JavaScript pour obtenir des effets dynamiques. 5. Les erreurs courantes incluent des étiquettes non clôturées et des valeurs d'attribut non déposées et des outils de vérification sont nécessaires. 6. Les stratégies d'optimisation comprennent la réduction des demandes HTTP, la compression du HTML, l'utilisation de balises sémantiques, etc.

HTML vs CSS et JavaScript: Comparaison des technologies Web Apr 23, 2025 am 12:05 AM

HTML, CSS et JavaScript sont les technologies de base pour la création de pages Web modernes: 1. HTML définit la structure de la page Web, 2. CSS est responsable de l'apparence de la page Web, 3. JavaScript fournit une dynamique de page Web et une interactivité, et ils travaillent ensemble pour créer un site Web avec une bonne expérience d'utilisation.

HTML: Est-ce un langage de programmation ou autre chose? Apr 15, 2025 am 12:13 AM

HtmlisnotaprogrammingNanguage; itisamarkupLanguage.1) htmlstructuresAndFormaSwebContentUsingTags.2) itworkswithcssforStylingandjavaScriptForIterActivity, EnhancingWebDevelopment.

See all articles

Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！

À propos de nous Clause de non-responsabilité Sitemap

© php.cn All rights reserved

Nom :

Âge :

>Homme< ;/td>

Jour de naissance :