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 herkömmlichem Verständnis scheinen sich diese beiden Konzepte auf dasselbe zu beziehen (diese „fortgeschrittenen Theorien“, die wir in dieser Ausgabe diskutieren^_^). 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 unter den folgenden zwei Aspekten über die beiden fehlgeleiteten Wege in der aktuellen Anwendung von Webstandards sprechen:
Der erste Fall ist 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, ohne das Stylesheet wie in einem Wörterbuch nachschlagen zu müssen. 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 Seitenecken, ohne das Bild auszuschneiden“. Zunächst möchte ich sichergehen, dass diese Idee wirklich gut ist, indem ich die CSS-Funktion verwende, um die abgerundeten Ecken zu „zeichnen“. Dazu muss der Designer an der entsprechenden Stelle einen großen Codeabschnitt wie folgt hinzufügen:
| Nachfolgend der zitierte Inhalt: Beispiel-Quellcode [www.52css.com] <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b> <b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b> |
Dies verstößt jedoch ernsthaft gegen das Grundkonzept von Webstandards – die Trennung von Struktur und Präsentation. Denn es platziert den Code, der zur Steuerung der Leistung der Webseite verwendet wird, im Strukturdokument. Vielleicht würde man 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 außerhalb des Bildes 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 <div style="clear:both" />). 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 klarstellen, 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.
2. Die Semantik von HTML-Tags
Heutige Webstandards werden umgangssprachlich „div+css“ oder „Layer-Layout“ genannt. Ich habe nichts gegen diese Zweckmäßigkeit einzuwenden. Dies führt jedoch zu einem Missverständnis: Die Verwendung einer großen Anzahl von div-Tags als Strukturelemente. Tatsächlich handelt es sich hierbei um eine fortgeschrittenere Form des Div-Missbrauchs (erwähnt von Jeffrey Zeldman im Buch „Website Refactoring“).
HTML bietet uns eine ganze Reihe von Tags, von denen jedes seine eigene Bedeutung hat. Ich denke, dass wir beim Entwerfen neben der Einhaltung der HTML-Syntax auch die „Semantik“ jedes Tags voll ausnutzen und einhalten sollten. Beispielsweise sollte der Titeltext in h1-h6 enthalten sein, große Absätze mit Textinhalten sollten durch <p> statt <br /> segmentiert werden, Listenelemente sollten in ul, ol oder dl platziert werden und Daten in Tabellenform sollte immer noch ein Tabellenlayout sein.
Warum das tun? Ein sehr überzeugender Grund besteht darin, sicherzustellen, dass die Webseite die strukturelle Hierarchie des Inhalts so effektiv wie möglich anzeigen kann, wenn der Benutzer die CSS-Anzeige entfernt. Wenn alle Divs verwendet werden und das CSS entfernt wird, verliert die gesamte Webseite ihre Hierarchie und es bleiben nur einige unordentliche Textfragmente zurück. Dies erfüllt nicht die Anforderungen des Webstandards an die Kompatibilität mit niedrigen Konfigurationen.
Lassen Sie mich mein Verständnis der Semantik einiger Tags im Detail auflisten:
p br
Lassen Sie uns zunächst über die einfachste Lösung sprechen. Verwenden Sie für Absätze p-Tags anstelle von br (sogar zwei aufeinanderfolgende <br />). Das scheint selbstverständlich zu sein. Aber manchmal müssen wir diesen Grundsatz aufgeben. Ein häufiges Beispiel ist ein Forumsbeitrag. Wenn ich ihn segmentieren möchte, drücke ich die Eingabetaste. Was in den Hintergrund übertragen und auf diese Weise angezeigt wird, wird offensichtlich mit <br /> segmentiert.
Tisch th
Aufgrund der starken Förderung von div + css scheint es, dass jeder, der das Tabellenlayout verwendet, ein unzivilisierter Eingeborener ist. Aber ich denke, diese Ansicht ist falsch. Die Bedeutung von Tabelle ist eine Tabelle, daher sollten alle Daten, die in Tabellenform erscheinen sollten, dennoch in einer Tabelle angeordnet sein. Ein einfaches Beispiel ist die Liste der Klassenkameraden, einschließlich Namen, Studentenausweise, Geschlechter usw. Da es sich offensichtlich um Daten in Tabellenform handelt, sollte ein Tabellenlayout verwendet werden. Ein weiteres Beispiel, das es wert ist, untersucht zu werden, ist die Kalendernavigation im Blog. Ich habe einmal ein Blog-Programm gesehen, in dessen Kalendernavigation die Daten vom 1. bis zum 30. alle in Divs eingeschlossen sind, und dann wird der Stil „float:left“ verwendet, um den Kalender des aktuellen Monats in einer 7er-Reihe anzuordnen. Wenn ich die CSS-Anzeige des Browsers abschalte, wird der Teil des Kalenders vertikal von Nr. 1 bis Nr. 30 angeordnet. Ich denke, das ist falsch. Da der Kalender Daten in Tabellenform enthalten sollte, sollte weiterhin das Tabellenlayout verwendet werden. Nach dem Abbrechen des CSS sollten sie weiterhin in einer Tabelle mit 7 hintereinander gruppiert werden.
th ist ein weiteres Tag, das ignoriert wird. Aufgrund der Allmacht von CSS können alle Tabellenzellen mit td und einem Klassenattribut erstellt werden. Aber semantisch gesehen sollten einige Tabellenzellen mit th gekennzeichnet werden. Beispielsweise sollten in der oben erwähnten Kalendertabelle die Einheiten „MON TUE WED... SUN“, die die Woche identifizieren, th anstelle von td verwenden.
h1-h6
Die Tags h1–h6 sollten semantisch für den gesamten Titeltext funktionieren. Daher sind einige Schreibmethoden wie <div class="diary-title> überflüssig. Schreiben Sie es direkt als <h1> und definieren Sie dann direkt CSS für h1 anstelle von .diary-title. Hätte es nicht den gleichen Effekt? Natürlich kann diese Regel nicht zu streng sein, da die Strukturelemente des Titelteils manchmal nicht einfach mit h1 gelöst werden können, sondern ich verwende höchstens eine Methode wie <h1><span></ span></h1> zum Ändern des Titels. Die Struktur ist komplexer verschachtelt, um den Leistungsanforderungen gerecht zu werden.
Aber hier entsteht eine semantische Meinungsverschiedenheit. Ist h1 als Titel der ersten Ebene oder als Titel mit der Schriftgröße 1 zu verstehen? Normalerweise verstehe ich es als Überschrift der ersten Ebene, und wenn es Untertitel unter der Überschrift der ersten Ebene gibt, verwende h2. Wenn man jedoch auf die Anfänge des HTML-Designs zurückblickt, werden die Zahlen nach h1-h6 eher als Steuerung der Größe des Titeltextes verstanden. h3 kann nur verwendet werden, um eine Schriftart der Größe drei zu verwenden, nicht um eine Überschrift der dritten Ebene zu verwenden. Ansonsten verwenden alle Titel der ersten Ebene h1, und alle sind sehr große Schriftarten, und Sie müssen CSS verwenden, um die Schriftgröße zu steuern, was sich sehr umständlich anfühlt. Das ist also eine Frage zur Debatte.
ul ol
Wann immer Sie Begriffe auflisten müssen, sollten Sie ul oder ol anstelle von p verwenden. Zum Beispiel Stellenanforderungen in Stellenausschreibungen, etwa Vorsichtsmaßnahmen, etwa Handlungsanweisungen. Darüber hinaus besteht eine beliebte Verwendung darin, mit ulli das Navigationsmenü der Webseite aufzulisten und dann dessen Anordnung mit CSS zu steuern.
Es sollte hinzugefügt werden, dass man nicht vergessen sollte, dass ul oder ol in li verwendet werden können, um eine Liste der zweiten Ebene zu erstellen.
dl dt dd
Dies ist ein fast vergessener Satz von Tags, aber Jeffrey Zeldman wirbt nachdrücklich für deren Verwendung beim „Website Refactoring“. dl sollte der vollständige Name von „Definitionsliste (oder Definitionsliste? Wenn jemand es weiß, sagen Sie es mir bitte)“ sein. Eine typische Verwendung ist ein Wörterbucheintrag. Der Name des Wortes wird in dt eingefügt, und die Erklärung des Wortes wird in dd eingefügt. Die Website alistapart.com ist noch cleverer und definiert die gesamte rechte Spalte als dl, wobei dt für den Titel jeder Einheit und dd für den Inhalt der Einheit verwendet wird.
Bild
Das img-Tag selbst hat nicht viel zu sagen. Ich möchte nur über eine Allgemeingültigkeit sprechen: Verwenden Sie img nur, wenn dieses Element tatsächlich ein notwendiges Bild im Inhalt ist. Andernfalls sollte es mithilfe von CSS als Stil definiert werden. Wie Illustrationen, Avatare, Emoticons, das sind Bilder, die im Inhalt erscheinen müssen, verwenden Sie img. Andere, wie das Hintergrundbild des Titels und das kleine Symbol vor dem Listenelement, sollten das img-Tag nicht verwenden.
Spanne
span ist mittlerweile genauso beliebt wie div. Tatsächlich denke ich jedoch, dass wir bei der ursprünglichen Verwendung bleiben sollten. Mein persönliches Verständnis ist, dass span ursprünglich zur Übertragung von Klassen- oder Stilattributen verwendet wurde. Es selbst hat keine klare Semantik. Wenn wir daher im Textfluss Stiländerungen an einem Text vornehmen müssen, verwenden wir span, um ihn einzuschließen. Wenn beispielsweise einige Wörter in Rot hinzugefügt werden müssen, verwende ich <span class="red">.
Es ist jedoch zu beachten, dass dies zu den oben in h1 erwähnten Problemen führen kann. Da einige Textstile tatsächlich über vorgefertigte Tags wie <strong>, <sub> usw. verfügen, sollten wir ihnen auch entsprechende Möglichkeiten geben.
A
a ist die Bezeichnung, die die Hyperverbindung steuert. Es gibt jedoch einige Sonderfälle, in denen wir es möglicherweise nicht verwenden möchten. Beispielsweise muss ein kleines Fenster geöffnet werden. Ich habe nicht viel darauf geachtet, aber ich denke, dass einige Designer onclick direkt im <img>-Tag des „Play“-Symbols definieren werden. Ich persönlich denke, dass wir ein a außerhalb des img hinzufügen, dann onclick innerhalb von a definieren und daran denken sollten, return false am Ende der js-Funktion zu schreiben. Wenn möglich, sollte das href-Attribut des a-Tags auch mit der URL des Popup-Fensters geschrieben werden, um sicherzustellen, dass Benutzer die Seite auch dann noch effektiv öffnen können, wenn JS deaktiviert ist.
Das ist alles, was ich jetzt auflisten werde.
Lassen Sie uns abschließend zusammenfassen, wie wichtig es ist, die Semantik von HTML-Tags zu befolgen. Eine der Anforderungen von Webstandards ist die Low-Profile-Kompatibilität: Wenn ein Benutzer Bilder, CSS oder JS deaktiviert, können wir ihm weiterhin ermöglichen, Webinhalte effektiv zu durchsuchen. Wie wir alle wissen, besteht das obligatorische Alt-Attribut darin, beim Deaktivieren von Bildern die Kompatibilität zu berücksichtigen. Die korrekte Einhaltung der Semantik von HTML-Tags gewährleistet die Kompatibilität, wenn CSS deaktiviert ist. Nur wenn HTML-Tags korrekt verwendet werden und unsere Webseite „CSS-Streifen“ aufweist, können Benutzer weiterhin sehen, wo sich das Navigationsmenü und der Artikeltitel befinden, und die Kalendertabelle wird nicht auseinanderfallen.