Heim > Web-Frontend > js-Tutorial > Hauptteil

Vergleich zwischen Tabelle, CSS und Div

小云云
Freigeben: 2018-03-05 15:45:58
Original
1846 Leute haben es durchsucht

1. Tischeinführung

2. Einführung in p+css

„p+CSS“ ist eigentlich ein falscher Name, und der Standardname sollte XHTML+CSS sein. Weil p und Table beides Marken in XHTML oder der HTML-Sprache sind und CSS nur eine Ausdrucksform ist.

p +CSS hat zwei intrinsische Bedeutungen:

1. Verwenden Sie p, um die Struktur zu vervollständigen, und verwenden Sie CSS, um die Leistung zu optimieren . , was die Flexibilität verbessert. Designer, die sich mit CSS auskennen, können die wiederholte Verschachtelung von p vermeiden und so die Seitenladegeschwindigkeit und die Wartbarkeit der Website erheblich verbessern.
2. Der Grund für die Auswahl von p, um mit CSS übereinzustimmen, ist das „Box-Modell“, und kein Tag kann die Essenz des „Box-Modells“ besser interpretieren als p Obwohl TABLE + CSS ebenfalls eine Option ist, ist dies nicht sehr gut. Vergessen Sie jedoch nicht, dass p einen weiteren Vorteil hat: Floating Cascading. Websites, die TABLE für das Layout verwenden, können die W3C-Verifizierung nicht bestehen.

2.1 Einführung in p

2.2 Einführung in CSS

CSS ist eine Struktur, die definiert Stile wie die Sprache der Schriftarten, Farben, Platzierung usw. werden verwendet, um die Art und Weise zu beschreiben, wie Informationen auf einer Webseite formatiert und dargestellt werden. CSS-Stile können direkt in HTML-Webseiten oder in separaten Stylesheet-Dateien gespeichert werden. In jedem Fall enthält ein Stylesheet Regeln zum Anwenden von Stilen auf Elemente eines bestimmten Typs. Zur externen Verwendung werden Stylesheet-Regeln in einem externen Stylesheet-Dokument mit der Dateierweiterung _css abgelegt.

Stilregeln sind Formatierungsanweisungen, die auf Elemente auf einer Webseite angewendet werden können, beispielsweise auf Textabsätze oder Links. Eine Stilregel besteht aus einem oder mehreren Stilattributen und ihren Werten. Interne Stylesheets werden direkt auf der Webseite platziert, externe Stylesheets werden in separaten Dokumenten gespeichert und die Webseite verlinkt über ein spezielles Tag auf die externen Stylesheets.

Der Name „Kaskadierung“ in CSS bezieht sich auf die Art und Weise, wie Stylesheet-Regeln auf Elemente eines HTML-Dokuments angewendet werden. Insbesondere bilden die Stile in einem CSS-Stylesheet eine Hierarchie, wobei spezifischere Stile allgemeine Stile überschreiben. Die Priorität von Stilregeln wird von CSS anhand dieser Hierarchie bestimmt und dadurch ein Kaskadeneffekt erzielt.

3. Der Unterschied zwischen Tabelle und p+css

1: Unterschiede in der Geschwindigkeit und Lademethode
Die Lademethode von p besteht darin, beim Lesen zu laden,

Der Inhalt in p wird nicht gleichzeitig geladen, und der Inhalt in p wird so oft geladen, wie er gelesen wird. Nach der Begegnung mit wird der Inhalt geladen. /table>, der Inhalt der Tabelle wird nicht geladen oder die Übertragung wird unterbrochen (document.onload()-Ereignis). Dies liegt daran, dass TABLE mehrere Zeilen und mehrere Spalten umfasst, also nur, wenn der gesamte Inhalt von TABLE geladen ist, d. h weiß, wie angezeigt wird
2: Der Unterschied bei Webanwendungen
Wenn Sie am Anfang und am Ende der Seite eine Tabelle hinzufügen, müssen Sie mit dem Laden warten, bis die gesamte Seite gelesen ist
Wenn Sie p am hinzufügen Am Anfang und Ende der Seite gibt es keine Auswirkungen
3: Vergleich der Benutzerfreundlichkeit von p- und Tabellenlayouts in großen Websites
p und TABLE selbst haben keine Vor- oder Nachteile Die sogenannten Webstandards Empfehlen Sie nur die korrekte Verwendung von Tags. Beispielsweise wird :p für das Layout verwendet, während TABLE ursprünglich für die Konvertierung zweidimensionaler Daten verwendet wird. TABLE tun zu lassen, was es tun soll, bedeutet nicht, dass TABLE so großartig ist, wenn es nicht auf der Seite erscheint.

4: Produktionseffizienz

Ich glaube nicht, dass irgendjemand etwas dagegen hat, dass die Produktionseffizienz von Tabellen höher ist als die Effizienz von p. Offensichtlich muss der gesamte p-Layoutcode von Hand geschrieben werden. Selbst wenn Sie mit dem Code vertraut sind, ist er nicht so schnell wie Dreamweaver! Daher kann Table problemlos eine strukturierte Schnittstelle erstellen. Durch die Parameterdefinition der Tabelle selbst können wir das Seitenlayout schnell entsprechend dem von uns benötigten Effekt definieren.

5: Browser-Kompatibilitätsprobleme

Unter den Kompatibilitätsproblemen zwischen Tabelle und p hat Tabelle weitere Vorteile.

Unsere häufig verwendeten Firefox-Browser IE6.0 und IE7.0 sind sehr wählerisch in Bezug auf die CSS-Einstellungen. Oft führt das gleiche CSS in beiden Browsern zu unterschiedlichen Ergebnissen, was für Designer und Produktionsmitarbeiter ein Problem darstellt eine schreckliche Frage. Es ist uns unmöglich, die Browser der Benutzer auszuschließen und zu vereinheitlichen, daher können wir unsere Syntax- und Layoutmethoden nur während der Produktion anpassen. p verlangt von uns eine strikte Unterstützung von CSS, aber bei der Tabelle muss nicht so viel berücksichtigt werden. Die Genauigkeit der Tabelle wird in verschiedenen Browsern gut dargestellt.

6: Skalierbarkeit und Lesbarkeit

Die Skalierbarkeit und Lesbarkeit von Table ist sehr schlecht, und die schlechte Erweiterung spiegelt sich in Wartung und Korrektur wider. p Es ist nicht erforderlich, das Layout der Webseite neu zu gestalten oder gar HTML- und Programmseiten der ursprünglichen Website zu ändern. Alle Änderungen werden durch einfaches Ändern der CSS-Datei vorgenommen. Die Tabelle muss Seite für Seite geändert werden.

Es gibt grundsätzlich keine lesbare Tabelle. Wer kann aus viel Code erkennen, was der Titel und welcher der Text ist? Alle sind

. Ein weiteres Hindernis besteht darin, dass sich die Ladezeit der Seite erhöht, wenn zu viel Inhalt im Tabellencontainer vorhanden ist, da der Browser zuerst das -Tag laden muss und der Inhalt in der Tabelle nicht angezeigt wird, bevor er in
geladen wird ;/table>

4. Vor- und Nachteile von Table und p+css

Vorteile von Table: kurze Entwicklungszeit (schnelle Entwicklung mit DW); reine Table-Inhalte können in Suchmaschinen angepasst werden; Seien Sie zuverlässig. Nachteile der vorherigen

Tabelle: Wenn sich das Layout ändert, muss es neu entwickelt werden. Wenn die Tabelle p ul usw. enthält, kann die Ladegeschwindigkeit langsam sein sind in Tabellen verschachtelt und die Wartung ist komplex

Vorteile von p: Inhalt und Anzeige sind getrennt, einfach zu pflegen und zu erweitern und das Webseitenlayout ist praktisch. Wenn sich die Anforderungen ändern, ist der Effekt am deutlichsten >

Vorteile der Verwendung der p-Methode zum Layouten des Webseitenrahmens: Der Rahmen kann durch CSS-Stile stark verbessert werden. Attributeinstellungen und die beliebige Positionierung von Teilen der Webseite beschleunigen das Durchsuchen der Seite Die Seite kann nach Belieben geändert und aktualisiert werden, indem eine separate CSS-Datei geändert wird. Nachteile: Jeder p-Container muss CSS definieren. Der Produktionsprozess ist durch den Stil gesteuert und komplizierter als die Tabellenmethode. Heutige Webseiten neigen zunehmend dazu, die p-Methode zum Layouten von Webseiten zu verwenden.

Vorteile des CSS+p-Website-Designs


Der große Vorteil von CSS liegt zunächst in seinem prägnanten Code. Bei einer großen Website kann es viel Bandbreite einsparen, und wie wir alle wissen , Suchmaschinen mögen sauberen Code (seine wahre Bedeutung besteht darin, den Anteil effektiver Schlüsselwörter am Gesamtcode der Webseite zu erhöhen), daher haben Websites, die mit dem CSS+p-Webstandard erstellt wurden, gewisse Vorteile hinsichtlich der Suchmaschinenfreundlichkeit.

Zweitens macht die mit CSS+p erstellte Website die Website-Überarbeitung relativ einfach. Bei vielen Problemen ist nur eine Änderung des CSS erforderlich, ohne dass das Programm geändert werden muss, wodurch die Kosten für die Website-Überarbeitung gesenkt werden.

Nachteile des CSS+p-Website-Designs


Erstens macht die hohe Abhängigkeit von CSS das Webdesign komplizierter. Im Vergleich zum Tabellenlayout (Tabelle) in HTML4.0 ist CSS + P zwar nicht unerreichbar, aber zumindest viel komplizierter als die Tabellenpositionierung. Selbst für Website-Design-Experten kann es leicht zu Problemen kommen, geschweige denn für Anfänger Dies hat die Popularisierung und Anwendung der XHTML-Website-Designsprache bis zu einem gewissen Grad beeinflusst.

Zweitens beeinträchtigen abnormale CSS-Dateien das normale Surfen auf der gesamten Website. Die von CSS-Websites erstellten Designelemente werden normalerweise in mehreren externen Dateien platziert. Diese eine oder mehrere Dateien können sehr komplex oder sogar groß sein. Wenn die CSS-Datei abnormal aufgerufen wird, wird die gesamte Website fehlerhaft.

Drittens ist das Problem der Browserkompatibilität beim CSS-Website-Design ziemlich offensichtlich. Auf HTML4.0 basierendes Webdesign weist in Versionen nach IE4.0 fast keine Probleme mit der Browserkompatibilität auf. Allerdings wird eine mit CSS+p gestaltete Website im IE normal angezeigt, in Firefox jedoch wahrscheinlich bis zur Unkenntlichkeit (weshalb Internet-Vermarktern dies empfohlen wird). Firefox verwenden). CSS+p benötigt noch weitere Unterstützung von verschiedenen Browserherstellern.

Ich habe p + css verwendet, um eine gesamte Website zu erstellen, was problematischer ist, insbesondere wenn p in p verschachtelt ist. Wenn Sie p-Layout verwenden, müssen Sie dies immer noch tun Verwerfen Sie einige Seiteneffekte, z. B. die abgerundeten Ecken des Bildes. Es ist schwierig, p im VS2005-Designer anzuwenden Es ist mühsam, wenn Sie den Ajax-Drag-Effekt implementieren, daher ist es meiner Meinung nach vorerst immer noch besser.

Das obige ist der detaillierte Inhalt vonVergleich zwischen Tabelle, CSS und Div. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage