Auszeichnungssprache - vereinfachte Tags
|
Klicken Sie hier, um zum Abschnitt „HTML-Tutorial“ von 123WORDPRESS.COM zurückzukehren. Zurück: Markup Language – Lassen Sie uns noch einmal über die Liste sprechen <br />Originalquelle Kapitel 9 Tags optimieren Zuvor haben wir immer wieder erwähnt, dass strukturierter Inhalt Struktur- und Designdetails klassifizieren und Tags optimieren kann. Wie geht das? Wir können anstelle von Tabellen und Bildern Standard-XHTML und CSS verwenden, um das gewünschte Layout zu erstellen. Beim Erstellen von Websites mit Standardtechnologien (insbesondere solchen, die stark auf CSS angewiesen sind) entwickeln wir häufig die schlechte Angewohnheit, unnötige Tags und Klassenattribute hinzuzufügen, die für die Technologie völlig unnötig sind. Durch die Verwendung von Nachkommenselektoren in CSS können wir redundante <div>-, <span>- und Klassenattribute eliminieren. Durch die Rationalisierung von Tags wird die Seite schneller lesbar und leichter zu pflegen. In diesem Kapitel werden wir mehrere einfache Möglichkeiten zur Erledigung dieser Aufgabe besprechen. Wie rationalisiert man Tags bei der Erstellung einer Website mit Standardtechnologie? Vereinfachte Tags sind ein wichtiges Thema, das einer Diskussion bedarf. Beim Erstellen einer Website ist die Vereinfachung der Tags einer der großen Vorteile der Verwendung von legalem XHTML und CSS zum Einstellen des Anzeigeeffekts. Kurzer Code bedeutet schnellere Downloadgeschwindigkeit, was für Benutzer, die 56k-DFÜ zum Surfen im Internet verwenden, absolut entscheidend ist. Kurzer Code bedeutet auch weniger Serverplatzbedarf und Bandbreitenverbrauch, was Chefs und Systemadministratoren freuen kann. Das Problem besteht darin, dass die bloße Sicherstellung, dass eine Seite den W3C-Standards entspricht, nicht bedeutet, dass der für den Inhalt verwendete Code kürzer ist. Sie können dem standardkonformen Inhalt natürlich alle möglichen unnötigen Tags hinzufügen. Ja, er entspricht den Standards, aber er fügt möglicherweise viel unnötigen Code hinzu, um die Gestaltung von CSS zu vereinfachen. Keine Angst! Hier sind einige Tipps zum Entwerfen sauberer, standardkonformer Markups, die dennoch viel Kontrolle über das CSS-Styling bieten. Lernen wir ein paar einfache Techniken, um Ihr Markup einfach zu halten. Selektoren erben Hier sehen wir uns zwei Ansätze zum Markieren einer Seitenleiste (mit Informationen, Links und anderen Dingen) auf einer persönlichen Website an. Packen Sie alle guten Dinge in ein <div> mit der ID „sidebar“, damit Sie es später irgendwo im Browser-Ansichtsfenster verschieben können (Teil 2 befasst sich mit CSS-Layout-/Typografiefunktionen). Methode A: Fröhliche Klassifizierung
Ich habe auf vielen Websites Markup gesehen, das Methode A ähnelt. Wenn Designer zum ersten Mal die Leistungsfähigkeit von CSS entdecken, übertreiben sie leicht und weisen jedem Tag, das sie anders formatieren möchten, Klassen zu. Im vorherigen Beispiel könnten wir denken, dass der Zweck der Zuweisung von class=sideheading zu <h3> darin liegt, ihnen dabei zu helfen, sich von anderen Überschriften auf der Seite zu unterscheiden; derselbe Grund gilt für die Zuweisung von class zu <ul> und <li>. Beim Festlegen der Stile gehen wir beispielsweise davon aus, dass der Titel orange sein soll, in einer Serifenschrift und mit einem hellgrauen Rand am unteren Rand. Für die ungeordnete Liste „Sidelinks“ möchten wir die Punkte entfernen und die Listenelemente fett darstellen. Das für Methode A erforderliche CSS würde folgendermaßen aussehen:
Wir können spezielle Stile für diese Tags angeben, indem wir auf den im Markup angegebenen Kategorienamen (Klasse) verweisen. Sie können sich sogar vorstellen, dass andere Teile der Seite auf diese Weise organisiert sind: Navigationsleiste, Fußzeile und Inhaltsbereich. Jedes Tag wird mit ungeordneten Kategorien hinzugefügt, sodass Sie die volle Kontrolle darüber haben. Ja, es funktioniert, aber es gibt eine einfache Möglichkeit, diese Klassen zu speichern und Ihr CSS lesbarer und übersichtlicher zu machen. Fahren wir mit Methode B fort. Methode B: Die natürliche Wahl
Methode B ist gut! Aber Moment, wo sind all die Kategorien? Nun... Sie werden schnell erkennen, dass wir sie eigentlich nicht brauchen, vor allem, weil wir all diese Tags in ein <div> mit einem eindeutigen Namen (in diesem Fall „sidebar“) stopfen. Hier kommt der Vererbungsselektor ins Spiel. Wir müssen das Tag in der Seitenleiste nur direkt per Tag-Namen angeben und können die redundanten Klassifizierungsattribute entfernen. Sehen wir uns denselben Stil wie in Methode A an, aber dieses Mal verwenden wir den geerbten Selektor, um die Beschriftung in der Seitenleiste anzugeben.
Durch Verweisen auf die #sidebar-ID können Sie bestimmte Stile für die darin enthaltenen Tags festlegen. Beispielsweise gelten die oben genannten CSS-Regeln nur für das <h3>-Tag innerhalb einer <div id="sidebar">. Dieser Ansatz, Stile basierend auf dem Kontext des Inhalts anzugeben, ist der Schlüssel zum Kürzen des Markup-Inhalts. Normalerweise ist es nach dem Entwerfen der semantischen Struktur für den Inhalt nicht mehr erforderlich, den Tags Klassifizierungsattribute hinzuzufügen. Er wird nicht nur in der Seitenleiste verwendet. Wir zeigen nur einen Abschnitt der Seite (die Seitenleiste), aber dieser Ansatz kann auf die gesamte Seitenstruktur angewendet werden. Teilen Sie den Markup-Inhalt einfach in mehrere logische Abschnitte auf (z. B. #nav, #content, #sidebar, #footer) und verwenden Sie dann Vererbungsselektoren, um spezielle Stile für die Tags innerhalb des Abschnitts anzugeben. Angenommen, Sie haben <h3>-Tags in den Abschnitten #content und #sidebar Ihrer Seite und möchten, dass beide eine Serifenschrift verwenden. Sie möchten jedoch, dass das <h3> in einem Abschnitt violett und in dem anderen orange ist. Hierzu müssen keine Tags geändert und Klassifizierungsattribute hinzugefügt werden. Wir können die gemeinsamen Regeln für alle <h3>-Tags über einen globalen Stil festlegen und dann den Vererbungsselektor verwenden, um die Farbe entsprechend der Position des Tags festzulegen.
Gibt an, dass alle <h3>-Tags die Schriftart Senif verwenden müssen und dass die Farbe je nach Kontext violett oder orange sein muss. Wir müssen die gemeinsame Regel (in diesem Fall „font-family“) nicht wiederholen, wodurch der CSS-Inhalt verkürzt und doppelte Regeln in mehreren Deklarationen vermieden werden. Wir sparen nicht nur den zusätzlichen Markup-Platz, der von Klassenattributen benötigt wird, sondern die CSS-Struktur ist auch sinnvoller, da sie leichter zu lesen, in Seitenabschnitte zu organisieren und bestimmte Regeln leichter zu ändern ist. Dies ist besonders bei großen, komplexen Layouts spürbar, bei denen Sie Hunderte von CSS-Regeln gleichzeitig haben können. Wenn Sie in diesem Beispiel beispielsweise jeder Deklaration die gemeinsamen Regeln hinzufügen und später alle <h3> in eine serifenlose Schriftart ändern möchten, müssen Sie drei Stellen ändern, und Sie können nicht alles auf einmal tun. Weniger Kategorien sind einfacher zu verwalten. Die Verwendung geerbter Selektoren anstelle redundanter Kategorien reduziert nicht nur den erforderlichen Quellcodespeicherplatz, sondern bedeutet auch, dass der Markup-Inhalt in Zukunft leicht erweitert werden kann. Angenommen, Sie möchten, dass die Links in der Seitenleiste rot und nicht blau wie der Rest der Seite sind. Daher erstellen Sie eine Klasse für Rot und fügen sie dem Ankertag wie folgt hinzu:
Um diese Links rot zu färben (vorausgesetzt, die Standard-Linkfarbe ist nicht Rot), benötigen Sie CSS wie das folgende:
An diesen Aktionen ist nichts auszusetzen und sie funktionieren einwandfrei. Aber was passiert, wenn Sie es sich später anders überlegen und diese Links grün machen möchten? Oder, etwas praktischer ausgedrückt, Ihr Chef sagt gelegentlich: „Rot ist dieses Jahr out, ändern Sie diese Links in der Seitenleiste in Grün!“ Kein Problem, Sie können einfach die rote Klasse im CSS ändern und die Sache ist erledigt, aber das Klassenattribut im Markup bleibt rot, was offensichtlich semantisch nicht ganz korrekt ist, genauso wie die Verwendung einer beliebigen anderen Farbe als Kategoriename. Dies ist kein guter Ort, um Anzeigeeffekte als Kategorienamen zu verwenden, aber wir können viel Aufwand (und Code) sparen, indem wir überhaupt keine Kategorien angeben und den Inhalt semantisch verständlicher gestalten. Stattdessen können wir diese Seitenleistenlinks mit geerbten Selektoren auswählen und sie nach Bedarf formatieren. Das Markup ist genau dasselbe wie bei Methode B, aber das zum Festlegen der Seitenleistenlinks erforderliche CSS wäre:
Im Wesentlichen bedeutet dies: „Nur Anker-Tags mit einem href-Attribut innerhalb eines <li>-Tags innerhalb einer <div id="sidebar"> sollten weiterhin in Rot angezeigt werden.“ Jetzt halten wir das Markup kurz und flexibel und zukünftige Updates erfordern nur CSS, unabhängig davon, ob wir den Link rot, grün, fett oder kursiv machen möchten. Als Nächstes sehen wir uns eine andere Möglichkeit zum Optimieren von Tags an: Eliminieren Sie unnötige <div>-Tags und verwenden Sie direkt vorhandene Tags auf Blockebene. Vorherige Seite 1 2 3 Nächste Seite Mehr lesen |
<<: Tipps zum MySQL-Abfragecache
>>: jQuery implementiert den Tabellen-Paging-Effekt
Artikel empfehlen
Implementierung der Docker-Bereitstellung des Nuxt.js-Projekts
Offizielle Docker-Dokumentation: https://docs.doc...
Lösung für Ubuntu, das keine Verbindung zum Internet herstellen kann
Problembeschreibung: Ich habe einen Desktop-Compu...
Wie setze ich eine Unterstreichung in HTML? So unterstreiche ich Text in HTML
Früher bestand das Unterstreichen in HTML darin, ...
So stellen Sie Gitlab schnell mit Docker bereit
1. Laden Sie das Gitlab-Image herunter Docker-Pul...
HTML-Code für feste Titelspalte und spezifische Implementierungscode für die Titelkopftabelle
Code kopieren Der Code lautet wie folgt: <!DOC...
Netzwerkkonfiguration des Host Only+NAT-Modus unter VirtualBox
Die Netzwerkkonfiguration des Host Only+NAT-Modus...
Natives JS implementiert ein Minesweeper-Spiel mit benutzerdefiniertem Schwierigkeitsgrad
In diesem Artikelbeispiel wird der spezifische Co...
Erstellen einer einfachen Game-Engine mit React Native
Inhaltsverzeichnis Einführung Erste Schritte Eine...
Docker-Installations- und Konfigurationsschritte für MySQL
Inhaltsverzeichnis Vorwort Umfeld Installieren Er...
Detaillierte Erklärung der Verwendung von SetUp- und Reactive-Funktionen in Vue3
1. Wann soll setUp ausgeführt werden? Wir alle wi...
So führen Sie in 1 Minute ein reibungsloses Upgrade und Rollback der Nginx-Version durch
Lassen Sie uns heute über eine Situation sprechen...
Beispielcode für einen coolen Atemeffekt mit CSS3+JavaScript
Ein einfacher cooler Effekt, der mit CSS3-Animati...
Bei der Verwendung von MySQL aufgetretene Probleme
Hier sind einige Probleme, die bei der Verwendung...
HTML+CSS zum Erreichen eines reaktionsfähigen Karten-Hover-Effekts
Inhaltsverzeichnis erreichen: Zusammenfassen: Daz...
MYSQL Eine Frage zur Verwendung von Zeichenfunktionen zum Filtern von Daten
Problembeschreibung: Struktur: test hat zwei Feld...