Heim Web-Frontend HTML-Tutorial Verwenden Sie die standardmäßigen dl-, dt- und dd-Tags, um die Erstellung der Tabellenliste_HTML/Xhtml_Webseite abzubrechen

Verwenden Sie die standardmäßigen dl-, dt- und dd-Tags, um die Erstellung der Tabellenliste_HTML/Xhtml_Webseite abzubrechen

May 16, 2016 pm 04:42 PM
dd table

Jetzt beginnen immer mehr Front-End-Entwickler, xHTML-CSS zu verwenden, um das ursprüngliche Tabellenlayout zu ersetzen und das Gesamtlayout der Webseite zu vervollständigen. Dadurch werden nicht nur die Entwicklungs- und Wartungskosten der Website gesenkt, sondern auch der Code verbessert semantisch. Dies bedeutet jedoch nicht, dass die Tabelle seitdem verschwunden ist. Sie wird von vielen Menschen immer noch als Notwendigkeit für die Datenpräsentation auf Webseiten verwendet, beispielsweise in Datenlisten mit persönlichen Informationen usw. Tatsächlich sparen Sie durch die Verwendung der HTML-Tags dl, dt und dd mehr Code und sorgen dafür, dass der Code semantisch besser mit dem Inhalt übereinstimmt. Natürlich gibt es auch Tabellen, also Datentabellen mit großen Datenmengen, aber kleine Datenlisten und Formulare müssen überhaupt keine Tabellen verwenden!
Wenn Sie immer noch herkömmliche Tabellen zum Erstellen von Datenlisten verwenden, lesen Sie bitte weiter, um zu sehen, wie die Verwendung der HTML-Tags dl, dt und dd Ihre Arbeit erleichtern kann ...
Tabellendatenliste
Die Daten Der Listencode der traditionellen Tabelle lautet wie folgt. Wir müssen jeder Zeile tr-Tags hinzufügen und dann ein td-Tag für den Titel und die Daten hinzufügen. Da es sich bei allen Tags um td handelt, müssen wir jedem td ein Klassenattribut hinzufügen, wenn wir Stile hinzufügen möchten.

Code kopieren
Der Code lautet wie folgt:

>


;/td>
>Männlich
class=" text">26. Mai 1986



Mit dem entsprechenden CSS-Code fügen wir Stile zu den zuvor in HTML deklarierten Klassen hinzu.





Code kopieren


Der Code lautet wie folgt:

/*TABELLELISTENDATEN* /
table {
margin-bottom:50px
}
table tr .title { background:#5f9be3; font-weight: fett; padding:5px; width:100px
table tr .text {
padding-left:10px>}


Aus dem obigen Code ist ersichtlich, dass Sie bei Verwendung des Tabellen-Tags, wenn Sie CSS zum Ändern oder Modifizieren des Inhalts verwenden möchten, der td-Zelle einige entsprechende Klassenattribute hinzufügen müssen. Dadurch wird Ihr Arbeitsaufwand praktisch erhöht und der Code wird etwas größer. Was bedeutet es, mehr Code zu haben? Dies bedeutet, dass Website-Traffic verschwendet wird, die Wahrscheinlichkeit von Fehlern steigt und die spätere Wartung schwieriger wird.
dl-, dt-, dd-Datenliste
Lassen Sie uns nun einen Blick auf die Datenliste mit den HTML-Tags dl, dt, dd werfen. Zuerst verwenden wir das dl-Tag (Definitionsliste-benutzerdefinierte Liste), um die gesamte Datenstruktur unterzubringen, und dann verwenden wir das dt-Tag (benutzerdefinierter Titel) und das dd-Tag (benutzerdefinierte Beschreibung), um den Titel und den Inhalt in den Daten unterzubringen.





Code kopieren


Der Code lautet wie folgt:

>
Name:

Squall Li
;
Geschlecht:

Geburtstag:
26. Mai 1986< ;/dd>

Im CSS-Code müssen wir nur dt und dd nach links schweben lassen.
Code kopieren


Der Code lautet wie folgt:


/*DL, DT, DD TAGS LIST DATA*/
dl {
margin-bottom:50px
}
dl dt {
background:#5f9be3;
color:#fff; :left;
font-weight:bold;
padding:5px
dl dd {
margin: 2px 0;
padding:5px 0;
} Anhand der Beispiele von dl, dt und dd sollten Sie deutlich erkennen können, dass ihre Codes einfacher und glatter sind. und semantischer, oder? Wenn Sie angesichts dessen immer noch darauf bestehen, Tabellen-Tags zum Ausfüllen von Webformularen oder anderen Webseitenlayouts zu verwenden, ist es jetzt an der Zeit, Ihren Code zu ändern. Machen Sie Ihre Arbeit einfacher!
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Java-Tutorial
1664
14
PHP-Tutorial
1269
29
C#-Tutorial
1248
24
HTML, CSS und JavaScript verstehen: Ein Anfängerhandbuch HTML, CSS und JavaScript verstehen: Ein Anfängerhandbuch Apr 12, 2025 am 12:02 AM

WebdevelopmentRelieSonHtml, CSS und JavaScript: 1) HtmlStructuresContent, 2) CSSstylesit und 3) JavaScriptaddssinteraktivität, Bildung von TheBasisofModerernwebexperiences.

HTML: Die Struktur, CSS: Der Stil, JavaScript: Das Verhalten HTML: Die Struktur, CSS: Der Stil, JavaScript: Das Verhalten Apr 18, 2025 am 12:09 AM

Die Rollen von HTML, CSS und JavaScript in der Webentwicklung sind: 1. HTML definiert die Webseitenstruktur, 2. CSS steuert den Webseitenstil, und 3. JavaScript fügt ein dynamisches Verhalten hinzu. Zusammen bauen sie den Rahmen, die Ästhetik und die Interaktivität moderner Websites auf.

Die Zukunft von HTML, CSS und JavaScript: Webentwicklungstrends Die Zukunft von HTML, CSS und JavaScript: Webentwicklungstrends Apr 19, 2025 am 12:02 AM

Die zukünftigen Trends von HTML sind Semantik und Webkomponenten, die zukünftigen Trends von CSS sind CSS-in-JS und CssShudini, und die zukünftigen Trends von JavaScript sind WebAssembly und serverlos. 1. HTML -Semantik verbessern die Zugänglichkeits- und SEO -Effekte sowie Webkomponenten die Entwicklungseffizienz, aber der Browserkompatibilität sollte die Aufmerksamkeit geschenkt werden. 2. CSS-in-JS verbessert die Flexibilität des Stilmanagements, kann jedoch die Dateigröße erhöhen. CssShudini ermöglicht den direkten Betrieb des CSS -Renderings. 3.Webassembly optimiert die Browser -Anwendungsleistung, verfügt jedoch über eine steile Lernkurve, und serverloses vereinfacht die Entwicklung, erfordert jedoch eine Optimierung von Kaltstartproblemen.

Die Zukunft von HTML: Evolution und Trends im Webdesign Die Zukunft von HTML: Evolution und Trends im Webdesign Apr 17, 2025 am 12:12 AM

Die Zukunft von HTML ist voller unendlicher Möglichkeiten. 1) Neue Funktionen und Standards umfassen mehr semantische Tags und die Beliebtheit von Webcomponenten. 2) Der Webdesign -Trend entwickelt sich weiterhin für reaktionsschnelles und zugängliches Design. 3) Die Leistungsoptimierung verbessert die Benutzererfahrung durch reaktionsschnelle Bildlade- und faulen Ladetechnologien.

HTML vs. CSS vs. JavaScript: Ein vergleichender Überblick HTML vs. CSS vs. JavaScript: Ein vergleichender Überblick Apr 16, 2025 am 12:04 AM

Die Rollen von HTML, CSS und JavaScript in der Webentwicklung sind: HTML ist für die Inhaltsstruktur verantwortlich, CSS ist für den Stil verantwortlich und JavaScript ist für dynamisches Verhalten verantwortlich. 1. HTML definiert die Webseitenstruktur und den Inhalt durch Tags, um die Semantik zu gewährleisten. 2. CSS steuert den Webseitenstil über Selektoren und Attribute, um es schön und einfach zu lesen. 3. JavaScript steuert das Verhalten von Webseiten über Skripte, um dynamische und interaktive Funktionen zu erzielen.

HTML: Erstellen der Struktur von Webseiten HTML: Erstellen der Struktur von Webseiten Apr 14, 2025 am 12:14 AM

HTML ist der Eckpfeiler der Erstellung von Webseitenstruktur. 1. HTML definiert die Inhaltsstruktur und die Semantik und Verwendung usw. Tags. 2. Stellen Sie semantische Marker wie usw. zur Verfügung, um den SEO -Effekt zu verbessern. 3. Um die Benutzerinteraktion durch Tags zu verwirklichen, achten Sie auf die Verifizierung der Form. 4. Verwenden Sie fortschrittliche Elemente wie in Kombination mit JavaScript, um dynamische Effekte zu erzielen. 5. Zu den häufigen Fehlern gehören nicht abgegebene Bezeichnungen und nicht geeignete Attributwerte, und Überprüfungstools sind erforderlich. 6. Optimierungsstrategien umfassen das Reduzieren von HTTP -Anforderungen, die Komprimierung von HTML, die Verwendung semantischer Tags usw.

Die Rolle von HTML: Strukturierung von Webinhalten Die Rolle von HTML: Strukturierung von Webinhalten Apr 11, 2025 am 12:12 AM

Die Rolle von HTML besteht darin, die Struktur und den Inhalt einer Webseite durch Tags und Attribute zu definieren. 1. HTML organisiert Inhalte über Tags wie das Lesen und Verständnis. 2. Verwenden Sie semantische Tags wie usw., um die Zugänglichkeit und SEO zu verbessern. 3. Optimierung des HTML -Codes kann die Ladegeschwindigkeit und die Benutzererfahrung der Webseite verbessern.

HTML: Ist es eine Programmiersprache oder etwas anderes? HTML: Ist es eine Programmiersprache oder etwas anderes? Apr 15, 2025 am 12:13 AM

HtmlisnotaprogrammingLanguage; itiSamarkuplanguage.1) htmlstructuresandFormatswebcontentuses.2) itWorkswithCSSForstylingandjavaScriptForinteraktivität, EnhancingWebDevelopment.

See all articles
Name: ;
Alter: