Eine kurze Erklärung zum sinnvollen Einsatz von Tabellen und Divs im Seitendesign
|
Zu Beginn dieses Artikels möchte ich die Fehler in einem Einführungsartikel korrigieren, den ich zuvor geschrieben habe. Ich möchte zunächst die offiziellere Erklärung zitieren, um Neulinge nicht erneut in die Irre zu führen. Die <!DOCTYPE>-Deklaration muss in der ersten Zeile eines HTML5-Dokuments vor dem <html>-Tag platziert werden. Dieses Tag teilt dem Browser mit, welche HTML-Spezifikation das Dokument verwendet. Die Doctype-Deklaration ist kein HTML-Tag, sondern eine Anweisung, die dem Browser mitteilt, welche Markup-Version zum Schreiben der Seite verwendet werden soll. Es ist sehr wichtig, in allen HTML-Dokumenten einen Dokumenttyp anzugeben, damit der Browser weiß, welcher Dokumenttyp ihn erwartet. Der Doctype in HTML 4.01 erfordert einen Verweis auf eine DTD, da HTML 4.01 auf SGML basiert. HTML 5 basiert nicht auf SGML und muss daher nicht auf DTD verweisen. Es benötigt jedoch Doctype, um das Verhalten von Browsern zu regeln (damit Browser wie vorgesehen ausgeführt werden können). In HTML 4.01 gab es drei verschiedene Dokumenttypen, in HTML 5 gibt es nur noch einen: <!DOCTYPE HTML> Da das HTML5-Tag zum Deklarieren von Dokumenttypen abwärtskompatibel ist, können Sie diese Deklarationsmethode auch dann verwenden, wenn Ihr HTML keine HTML5-Tags verwendet. Es treten jedoch einige Inkompatibilitäten auf der Seite auf, die Sie je nach tatsächlicher Situation korrigieren müssen. <!doctype html> ermöglicht dem Browser, die Seite im strikten Modus (Standardmodus) darzustellen, ohne einen DTD-Typ anzugeben. Kommen wir zum heutigen Hauptthema: der sinnvollen Anwendung von Tabellen und Divs Tabellen wurden in der Anfangszeit des Seitendesigns häufig verwendet, aber mit der Entwicklung des Internets wurden Tabellen nach und nach aufgegeben. Heute verwenden nur noch wenige alte Websites im Internet (es gibt viele bekannte, die nicht geändert werden müssen) Tabellen zum Layouten von Seiten. Heutzutage verwenden neue Websites im Wesentlichen div+css zum Layouten von Seiten, aber viele Freunde, die neu im Web-Frontend sind, haben die Illusion, dass Tabellen die Seite für Suchmaschinen unfreundlich machen, und verwenden daher beim Entwerfen von Listen immer Tags wie dt und ul. Dadurch wird zwar viel Zeit für die Gestaltung des Seitenstils aufgewendet, der tatsächliche Effekt auf die Suchmaschinenoptimierung ist jedoch sehr gering. Ein großer Nachteil der Verwendung einer großen Anzahl von Tabellen besteht darin, dass sie für Suchmaschinen nicht benutzerfreundlich und für Programmierer sehr unfreundlich ist. Eine große Anzahl verschachtelter Tabellen kann den Leuten schwindelig machen. Bei Verwendung mit div ergibt sich jedoch ein Effekt, der möglicherweise besser ist als bei dt und ul. Ein weiteres Problem ist, dass eine große Anzahl von Tabellen die Semantik Ihrer Seite sehr schlecht ist. Page Layout. LES sind direkt in den Stil in der Tabelle geschrieben, es scheint sich nicht sehr verändert zu haben, aber wenn Sie sich den Navigationsteil ansehen, werden Sie feststellen, dass die Seite keinen Sinn für Semantik hat. Hier ist ein Vorschlag: Nachdem Sie Ihre Seite entworfen haben, können Sie das Layout im Standardstil direkt schreiben, ohne den CSS-Stil hinzuzufügen, und dann entsprechend der Seite einen benutzerdefinierten CSS-Stil hinzufügen. Wäre das nicht effizienter? Haha, ich habe es nicht ausprobiert, aber ich denke es einfach. Es gibt viel Inhalt zur Semantik, deshalb werde ich hier nicht zu viel sagen. Ich möchte ein sehr gutes Buch empfehlen: „Schreiben von qualitativ hochwertigem Code – Der Weg zur praktischen Web-Frontend-Entwicklung“, das eine sehr klare Einführung in die Semantik bietet. Das Seitenlayout ist ein Prozess des Sammelns von Erfahrungen. Wenn Sie eine gute Website sehen, können Sie von ihrem Seitenlayout lernen. Wenn Sie eine schlechte Website sehen, können Sie auch darüber nachdenken, wie Sie sie optimieren können, damit Sie auf dem Weg zum Web-Frontend schneller vorankommen. Sollten Angaben unvollständig sein, korrigieren Sie mich bitte, danke. |
<<: MySQL 8.0 MIT Abfragedetails
>>: Perfekte Lösung für das Problem des CSS-Hintergrundbildpfads im Webpack
Artikel empfehlen
Detailliertes Tutorial zur Installation von mysql5.7.18 auf centos7.3
1 Überprüfen Sie die Linux-Distributionsversion [...
Zwei Beispiele für die Verwendung von Symbolen in Vue3
Inhaltsverzeichnis 1. Verwenden Sie SVG 2. Verwen...
Schritte zum Verpacken und Freigeben des Vue-Projekts
Inhaltsverzeichnis 1. Übergang von der Entwicklun...
CentOS konfiguriert die lokale Yum-Quelle / Alibaba Cloud Yum-Quelle / 163yuan-Quelle und konfiguriert die Priorität der Yum-Quelle
1. Verwenden Sie ein Centos-Image, um eine lokale...
Über den Lösungseintrag zur fehlenden Reaktion der Seite bei Verwendung von window.print() in React
Inhaltsverzeichnis 1. Hintergrund des Problems: 2...
js zur Implementierung eines einfachen Bullet-Screen-Systems
In diesem Artikel wird der spezifische Code von n...
So stellen Sie MySQL-Master und -Slave in Docker bereit
Bild herunterladen Auswählen eines MySQL-Images D...
So lösen Sie das Problem, dass bei der Installation von VMware-Tools unter VMware die Installationsdatei nicht angezeigt wird
VMware-Tools bieten hohen Komfort bei der Verwend...
Einführungstutorial zu React Hooks
Zustandshaken Beispiele: importiere { useState } ...
Installations-Tutorial zur neuesten stabilen Version von MySQL 5.7.17 unter Linux
Installieren Sie die neueste stabile Version von ...
Domänenübergreifende Probleme bei der Trennung von Front-End und Back-End von Vue+SpringBoot
Bei der getrennten Entwicklung von Front-End und ...
Lösen Sie das Problem, dass die Zeitzone in der Linux-Umgebung nicht eingestellt werden kann
Beim Ändern der Zeitzone unter Linux ist es immer...
Lösen Sie das Problem, dass der häufig verwendete Linux-Befehl "ll" ungültig ist oder der Befehl nicht gefunden wird
Frage: Der häufig verwendete Befehl "ll"...
JS implementiert den Beispielcode der Dezimalkonvertierung in Hexadezimal
Vorwort Beim Schreiben von Code stoßen wir gelege...
Reines CSS, um nach Auswahl des Produkts das Zeichen √ in der unteren rechten Ecke anzuzeigen
Empfohlene Artikel: Klicken Sie auf die untere re...