Guter HTML -Code ist die Grundlage einer schönen Website. Wenn ich anderen CSS unterrichte, sage ich ihnen immer zuerst: Gute CSS existiert nur auf guten HTML -Tags. Es ist, als würde ein Haus ein solides Fundament brauchen, oder? Nute und semantische HTML -Tags haben viele Vorteile, aber es gibt immer noch viele Websites, die unfreundliches Tag -Schreiben verwenden.
Schauen wir uns einige ungeschriebene HTML -Tags an und diskutieren Sie sie, um zu lernen, wie man ordentliche und Standard -HTML -Tags schreibt.
Wulin.com Hinweis : Chris Cyier verwendet hier zwei Dokumente, um den Code dieses Artikels zu erläutern: schlechter Code und guter Code. Bitte beachten Sie diese beiden Dokumente beim Studium.Dazu müssen wir nur die richtigen Schritte ausführen. Es ist nicht erforderlich, zu besprechen, ob HTML 4.01 oder XHTML 1.0 verwendet werden soll, die beide strenge Anforderungen an unser Schreiben des richtigen Codes stellen.
Unabhängig davon sollte unser Code keine Tabellentabelle für das Layout verwenden, sodass kein ÜbergangsdocType verwendet werden muss.
Verwandte Ressourcen:In unserem Abschnitt <Head> ist das erste, was das Zeichensatz deklariert. Wir haben UTF-8 verwendet, aber es hinter das <title> gesetzt. Lassen Sie uns die Erklärung der Charakter -Set nach oben verschieben, da der Browser weiß, welcher Charakter sie verarbeitet, bevor wir etwas lesen.
Zusätzlich zur Position der Charakter -Set -Deklaration sind seltsame Charaktere, die in <title> erscheinen, auch Probleme, auf die geachtet werden müssen. Beispielsweise sollten die am häufigsten verwendeten und Zeichen durch Zeicheneinheit & amp ;.
Verwandte Ressourcen:Beim Schreiben von Code wirkt sich die Einführung nicht auf das Erscheinungsbild der Webseite aus, sondern kann den Code lesbarer verwenden. Die Standard -Eindringungsmethode besteht darin, ein Registerkartenbit (oder ein paar Leerzeichen) einzuführen, wenn Sie ein neues Element starten. Denken Sie auch daran, dass das Etikett des engen Elements auf das Startetikett ausgerichtet ist.
Wulin.com Hinweis : Einige Freunde halten es für problematisch, beim Schreiben von Code problematisch einzusetzen. Wenn Sie diesen Code nur lesen, gibt es möglicherweise kein Problem. Denken Sie nur, dass es in Ordnung ist. Wenn es sich jedoch um eine Zusammenarbeit handelt oder Ihre Arbeiten öffentlich veröffentlicht und geteilt werden, ist es notwendig, einen schönen, lesbaren Code zu schreiben. Verwandte Ressourcen:Wir haben einen CSS -Code, der auf unseren Abschnitt <Head> ausgedehnt wurde. Dies ist ein ernstes Foul, da es nur auf einer einzelnen HTML -Seite funktionieren kann. Wenn Sie eine eigenständige CSS -Datei beibehalten, können zukünftige Webseiten mit ihnen verknüpft und denselben Code verwendet werden. Gleiches gilt für JavaScript.
Wulin.com Hinweis : Natürlich ist dieses Problem möglicherweise nicht so ernst. Als WordPress -Thema wird beispielsweise der in <kopf> geschriebene Code auf allen WordPress -Seiten verwendet. Aber CSS in <Head> zu schreiben ist immer noch eine sehr schlechte Angewohnheit.In unserem Website -Titel verwenden wir <h1> als Website -Titel -Tag, das perfekt ist. Und ein Link zur Homepage wurde hinzugefügt, aber der Fehler war, dass der Link außerhalb <h1> platziert wurde und der Link <h1> umgab. Dieser einfache Nistfehler wird von den meisten Browsern gut behandelt, aber technisch funktioniert er nicht.
Ein Ankerlink ist ein Inline -Element, und der Titel <H1> ist ein Blockelement, und das Blockelement sollte nicht im Inline -Element platziert werden.
Ich weiß nicht, wer es zuerst erfunden hat, aber ich mag das Wort Divitis, was sich auf den übermäßigen Gebrauch von Divs in HTML -Tags bezieht. In einem bestimmten Stadium des Lern -Webdesigns lernen wir, wie man mit einem DIV viele andere Elemente einpackt, um bequemes Layout und Styling zu erreichen. Dies führt zum Missbrauch von Divelelementen. Wir verwenden die erforderlichen Bereiche und die völlig unnötigen Bereiche.
In dem oben gezeigten Beispiel verwenden wir eine DIV (TopNav), um die UL -Liste (BigBarnavigation) zu enthalten. Sowohl Div als auch UL sind jedoch Blockelemente, sodass Div nicht zum Wickeln des UL -Elements verwendet werden muss.
Verwandte Ressourcen:Sprechen wir nun über das Benennungsmanagement. In dem im vorherigen Artikel erwähnten Beispiel verwendet unser UL den ID -Namen BigBarNavigation. Die Navigation erklärt den Inhalt des Blocks sehr gut, aber groß und Bar beschreibt das Design und nicht den Inhalt. Es mag sein, dass dieses Menü eine große Symbolleiste ist, aber wenn das Design dieses Menüs vertikal wird, erscheint der Name verwirrend und irrelevant.
Freundliche Klassen- und ID -Namen wie Mainnav, Subnav, Seitenleiste, Fußzeile, Metadaten, die beschreiben, was enthalten ist. Schlechte Klassen- und ID -Namen beschreiben Design wie BigboldHeader, linke und Roundbox.
Wulin.com Hinweis : Chris betont, ob es nach Inhalten oder Design benannt werden soll. Persönlich möchte ich ID- und Klassennamen hinzufügen, um sie zu nutzen oder zu Kleinbuchstaben zu profitieren oder den ersten Buchstaben des Wortes zu profitieren . Zunächst können vollständig kapitalisierte Wörter dem Lesen förderlich und ausgeschlossen sind. Ob die Verwendung von Kleinbuchstaben oder Großbuchstaben des ersten Buchstabens des Wortes verwendet werden soll, hängt dies von Ihren persönlichen Gewohnheiten ab. Es ist wichtig, dass sie unabhängig davon, welche Regel verwendet wird, konsistent sein sollte . Seien Sie nicht rein Kleinbuchstaben und werden im ersten Brief gleichzeitig aktiviert, es wird sehr verwirrend sein.Darüber hinaus bin ich persönlich verwirrt, ob ich unterstreichen oder nicht längere Namen verwenden soll. Oder vielleicht denke ich, dass es zu kompliziert ist. Es ist gut, irgendeinen Typ zu verwenden, und es ist in Ordnung, es konsistent zu halten.
Vorherige Seite 1 2 nächste Seite Lesen Sie den vollständigen Text