Heim Web-Frontend CSS-Tutorial Einige meiner Gedankennotizen zu Webstandards (1)_Erfahrungsaustausch

Einige meiner Gedankennotizen zu Webstandards (1)_Erfahrungsaustausch

May 16, 2016 pm 12:10 PM

Ich habe Anfang letzten Jahres angefangen, Webstandards zu erlernen, und habe in den letzten zwei Jahren einige Erfahrungen gesammelt. Ich habe kürzlich den Job gewechselt und bin zu Hause einfach frei, also habe ich etwas geschrieben, das ich mit allen teilen kann.

1 Verständnis von Webstandards und W3C-XHTML-Spezifikationen

Nach dem üblichen Verständnis scheinen sich diese beiden Konzepte auf dasselbe zu beziehen (diese Dinge besprechen wir in dieser Ausgabe). Fortgeschrittene Theorie"^_ ^). Aber ich denke, dass diese beiden Dinge aus technischer Sicht tatsächlich so gut wie überhaupt keinen Zusammenhang haben. Kurz gesagt, Webstandards dienen dazu, die Struktur, Leistung und das Verhalten der Seite unabhängig zu implementieren. Im Allgemeinen handelt es sich bei der heutigen Rekrutierung um die beliebte Sprache „div + css“. Allerdings schränkt keine Version von W3C XHTML das Konzept der Webstandards ein. Offensichtlich können wir xhtml 1.1 verwenden, um eine tabellenpositionierte Webseite zu schreiben. An diesem Punkt denken Sie vielleicht, dass ich viel Unsinn rede. Aber Sie können jede Technologie nur dann richtig nutzen, wenn Sie die Grundkonzepte genau genug verstehen. Lassen Sie mich aus den folgenden zwei Aspekten über die beiden fehlgeleiteten Wege heutiger Web-Standardanwendungen sprechen:

Die erste Situation ist sehr einfach. Ich denke, solange XHTML+CSS verwendet wird, ist es ein Webstandard. Die Seite ist voller Klassen und IDs. Fühlen Sie sich frei, für jedes Detail separate Klassen zu definieren. Der Unterschied zwischen einer solchen Seite und herkömmlichem HTML besteht darin, dass das img-Tag ein zusätzliches „/“ enthält. Tatsächlich ist es besser, zum herkömmlichen HTML zurückzukehren. Zumindest kann ich Schriftarten problemlos verwenden, anstatt wie in einem Wörterbuch immer im Stylesheet nachzuschlagen. Eine weitere, subtilere und beiläufigere Verwendung von CSS, über die ich später sprechen werde.

Ich denke, die zweite Situation ist schwieriger zu verstehen, nämlich der Versuch, verschiedene komplizierte Div-Verschachtelungen und CSS-Anweisungen zu verwenden, um die gewünschte Leistung zu erzielen. Ein sehr einfaches Beispiel ist in einem Beitrag, den ich gerade gesehen habe: „ Abgerundete Ecken auf der Seite, ohne das Bild zu beschneiden “. Zunächst möchte ich sicherstellen, dass diese Idee wirklich gut ist, indem ich die CSS-Funktion verwende, um die abgerundeten Ecken zu „zeichnen“. Dazu muss der Designer einen großen Codeabschnitt wie folgt an der entsprechenden Position hinzufügen:




Dies verstößt jedoch gravierend gegen das Grundkonzept von Webstandards – die Trennung von Struktur und Leistung . Denn es platziert den Code, der zur Steuerung der Leistung der Webseite verwendet wird, im Strukturdokument. Vielleicht würden Sie sagen, dass es tatsächlich den eigentlichen Leistungscode in CSS ablegt. Aber ich denke, das ist ein gestohlenes Konzept. Da die oben genannten B-Tags nichts mit der Struktur der Webseite zu tun haben, sind sie alle leere Tags. Das heißt, es gibt keine Möglichkeit, etwas dort zu platzieren, wo die Dokumentstruktur es erfordert. Es handelt sich also lediglich um Junk-Code für die Dokumentstruktur.

Ein anderes Beispiel könnte subtiler sein. Ich habe auf alistapart.com bereits einen Artikel über die Implementierung von Drei-Wege-Spalten auf einer Webseite gesehen. Das Prinzip besteht wahrscheinlich darin, drei oder vier Divs zu verwenden, um sich gegenseitig zu verschachteln. Ich denke, dass dies auch ein Verstoß gegen Webstandards ist. Denn die Reihenfolge, in der diese div-Tags im Code platziert werden, dient nicht nur strukturellen Anforderungen, sondern auch der Leistung der Webseite.

Natürlich gebe ich zu, dass der obige Standpunkt bis zu einem gewissen Grad übertrieben ist (aber andererseits, wenn man abgerundete Ecken ohne Bild implementieren muss, ist das nicht auch übertrieben, haha) . Manchmal lassen sich Struktur und Leistung nicht so einfach trennen. Um eine reichhaltige Leistung zu erzielen, müssen wir die Struktur anpassen (denken Sie an die Verwendung von

). Aber es ist wichtig zu wissen, was richtig und was falsch ist. Auch wenn wir manchmal etwas falsch machen müssen.

Abschließend möchte ich festhalten, dass ich nicht sage, dass „abgerundete Ecken außerhalb des Bildes“ bedeutungslos oder falsch sind. Ich bewundere auch die Intelligenz und Inspiration des Autors. Ich denke, diese Art der technischen Recherche ähnelt der vorherigen Verwendung von CSS zum Zeichnen der Nationalflagge und ist sehr hilfreich für die Beherrschung der CSS-Technologie. Allerdings sollte seine Verwendung ebenso eingeschränkt sein wie das CSS-Flag und nicht in praktische Anwendungen übernommen werden. Weil es gegen die Grundprinzipien von Webstandards verstößt.
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

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌
Zwei -Punkte -Museum: Alle Exponate und wo man sie finden kann
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

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)

Entmystifizierende Bildschirmleser: Zugrunde Formen und Best Practices Entmystifizierende Bildschirmleser: Zugrunde Formen und Best Practices Mar 08, 2025 am 09:45 AM

Dies ist der 3. Beitrag in einer kleinen Serie, die wir in Form von Barrierefreiheit gemacht haben. Wenn Sie den zweiten Beitrag verpasst haben, lesen Sie "Verwalten des Benutzerfokus mit: Fokus-Sichtbar". In

Erstellen Sie ein JavaScript -Kontaktformular mit dem Smart Forms Framework Erstellen Sie ein JavaScript -Kontaktformular mit dem Smart Forms Framework Mar 07, 2025 am 11:33 AM

Dieses Tutorial zeigt, dass professionelle JavaScript-Formulare mithilfe des Frameworks Smart Forms erstellt werden (Hinweis: Nicht mehr verfügbar). Während der Rahmen selbst nicht verfügbar ist, bleiben die Prinzipien und Techniken für andere Formbauer relevant.

Hinzufügen von Kastenschatten zu WordPress -Blöcken und -Elementen Hinzufügen von Kastenschatten zu WordPress -Blöcken und -Elementen Mar 09, 2025 pm 12:53 PM

Die CSS-Box-Shadow- und Umrisseigenschaften haben Thema gewonnen. JSON-Unterstützung in WordPress 6.1. Sei ein paar Beispiele für die Funktionsweise in realen Themen und welche Optionen wir diese Stile auf WordPress -Blöcke und Elemente anwenden müssen.

Arbeiten mit GraphQL Caching Arbeiten mit GraphQL Caching Mar 19, 2025 am 09:36 AM

Wenn Sie kürzlich mit GraphQL gearbeitet oder seine Vor- und Nachteile überprüft haben, haben Sie zweifellos Dinge wie "GraphQL nicht unterstützen Caching" oder gehört

Machen Sie Ihren ersten Seltsamen -Sufle -Übergang Machen Sie Ihren ersten Seltsamen -Sufle -Übergang Mar 15, 2025 am 11:08 AM

Die Sufelte Transition -API bietet eine Möglichkeit, Komponenten zu beleben, wenn sie das Dokument eingeben oder verlassen, einschließlich benutzerdefinierter Svelte -Übergänge.

Show, Don ' Tell Show, Don ' Tell Mar 16, 2025 am 11:49 AM

Wie viel Zeit damit, die Inhaltspräsentation für Ihre Websites zu entwerfen? Wenn Sie einen neuen Blog -Beitrag schreiben oder eine neue Seite erstellen, denken Sie darüber nach

Edle und coole CSS -Scrollbars: Ein Schaufenster Edle und coole CSS -Scrollbars: Ein Schaufenster Mar 10, 2025 am 11:37 AM

In diesem Artikel werden wir in die Welt der Scrollbars eintauchen. Ich weiß, es klingt nicht zu glamourös, aber vertrau mir, eine gut gestaltete Seite geht Hand in Hand

Was zum Teufel haben NPM -Befehle? Was zum Teufel haben NPM -Befehle? Mar 15, 2025 am 11:36 AM

NPM-Befehle führen verschiedene Aufgaben für Sie aus, entweder als einmalige oder als kontinuierlich ausgeführter Vorgang für Dinge wie das Starten eines Servers oder das Kompilieren von Code.

See all articles