Auszeichnungssprache - Titel
|
Klicken Sie hier, um zum Abschnitt „HTML-Tutorial“ von 123WORDPRESS.COM zurückzukehren. Zurück: Kapitel 1 Liste <br />Originalquelle Standardisierte Designlösungen – Auszeichnungssprachen und Stilhandbücher Lösungen für Webstandards Das Markup- und Style-Handbuch Teil 1: Machen Sie sich mit dem Markup vertraut Kapitel 2 Titel Überblick: Nicht nur, dass alle Webseiten Titel benötigen, sie können bei korrekter Auszeichnung auch viel zum Design und zur Benutzerfreundlichkeit einer Webseite beitragen. Was das Erscheinungsbild betrifft, ist der Titel einer Webseite normalerweise in einer größeren Schriftgröße gehalten und kann eine andere Farbe oder Schriftart als der Hauptteil des Textes haben. Der Zweck des Titels besteht darin, „das im folgenden Abschnitt behandelte Thema kurz zu beschreiben“, wie vom W3C beschrieben – einen Überblick über die verschiedenen Absätze innerhalb der Webseite zu geben. Wie erstellen Sie einen Seitentitel, der die zu präsentierenden Informationen optimal nutzt? In diesem Abschnitt sehen wir uns mehrere gängige Ansätze zur Titelerstellung an. Wir versuchen, den für Sie hilfreichsten zu finden, und verwenden dann einige CSS-Tipps und -Tricks, um den besten Ansatz zu verfeinern. Wie erstellt man am besten einen Dokumenttitel? Bevor wir diese Frage beantworten, gehen wir davon aus, dass wir den Titel oben im Dokument platzieren möchten. Sehen wir uns drei Möglichkeiten an, um einen ähnlichen Effekt zu erzielen. Methode A: Ist das sinnvoll? <span class="heading">Super cooler Seitentitel</span> Obwohl das <span>-Tag in manchen Situationen praktisch ist, ist es für Seitentitel nicht sehr aussagekräftig. Der einzige Vorteil dieser Methode besteht darin, dass wir einen CSS-Stil für die Überschriftenklasse angeben können, damit der Text wie ein Titel aussieht. .Überschrift { Schriftgröße: 24px; Schriftstärke: fett; Farbe: blau; } Jetzt werden alle mit der Überschriftenklasse markierten Überschriften größer, fetter und blauer. Toll, oder? Aber was passiert, wenn jemand diese Seite mit einem Browser besucht, der kein CSS unterstützt? Was passiert beispielsweise, wenn wir die CSS-Stile in eine externe Stylesheet-Datei einfügen, die von älteren Browsern nicht unterstützt wird – oder was passiert, wenn ein Screenreader die Seite einem Benutzer mit Behinderung vorliest? Benutzer, die die Seite auf diese Weise aufrufen, sehen (oder hören) den Unterschied zwischen den Überschriften und dem Fließtext nicht. Die Annotation-Methode class="heading" beschreibt kurz die Bedeutung des Tag-Inhalts, aber <span> ist nur ein Allzweckcontainer, der nur den Standardanzeigestil der meisten Browser ändert. Wenn Suchmaschinen diese Seite crawlen, überspringen sie das <span>-Tag, als wäre es nicht vorhanden, und erhöhen nicht das Gewicht der möglicherweise darin enthaltenen Schlüsselwörter. Weitere Informationen zur Beziehung zwischen Suchmaschinen und Seitentiteln finden Sie weiter unten in diesem Abschnitt. Da das <span>-Tag ein Inline-Element ist, müssen wir den Inhalt von Methode A normalerweise in einen anderen Container auf Blockebene wie <p> oder <div> einfügen, damit er eine eigene Zeile einnimmt. Dadurch wird viel unnötiger Code generiert. Selbst wenn Sie den erforderlichen Container hinzufügen, zeigen Browser, die CSS nicht unterstützen, den Text weiterhin in seiner ursprünglichen Form an, sodass Benutzer keinen Unterschied zwischen dem Titel und dem Textkörper erkennen können. Vorherige Seite 1 2 3 4 5 Nächste Seite Mehr lesen |
<<: Grundlagen und Beispiele zur TypeScript-Aufzählung
>>: Automatisches Laden des Kernelmodul-Overlayfs-Vorgangs beim CentOS-Start
Artikel empfehlen
Schritte zum Erstellen der MHA-Architekturbereitstellung in MySQL
Inhaltsverzeichnis MAH 1. Einführung in die MAH-A...
Detaillierte Erklärung der Lösung für das Problem, dass FTP keine Verbindung zum Baota Linux-Panel herstellen kann
Wenn Sie Alibaba Cloud Server verwenden, müssen S...
So verwenden Sie die Glog-Protokollbibliothek in einer Linux-Umgebung
Linux-Bibliothek generieren Die Linux-Version ver...
Detaillierte Erklärung des Abstandsproblems zwischen IMG-Tags
Grundlegende Analyse des IMG-Tags: In HTML5 beste...
Detaillierte Analyse des MySQL-Datentyps DECIMAL
Vorwort: Wenn wir Dezimalzahlen speichern müssen ...
MySQL-Startfehler beheben: FEHLER 2003 (HY000): Keine Verbindung zum MySQL-Server auf „localhost“ möglich (10061)
Dieser Fehler tritt häufig bei Anfängern auf. Die...
Beispiel zum schnellen Löschen einer 2T-Tabelle in MySQL in Innodb
Vorwort Dieser Artikel stellt hauptsächlich den r...
Mehrere Möglichkeiten zum Ändern des MySQL-Passworts
Vorwort: Bei der täglichen Verwendung der Datenba...
Grundlegende Implementierungsmethode für die komponentenübergreifende Bindung mithilfe des V-Modells in Vue
Hallo allerseits, heute werden wir darüber sprech...
Aktivieren Sie den SSHD-Vorgang im Docker
Installieren Sie zunächst den OpenSSH-Server im D...
Die JS-Methoden addEventListener() und attachEvent() implementieren Registrierungsereignisse
Im DOM-Ereignismodell von JavaScript werden Ereig...
Der neueste Linux-Installationsprozess von Tomcat8
Herunterladen https://tomcat.apache.org/download-...
Grafisches Tutorial zur Installation der MySQL 8.0.13-Dekomprimierungsversion unter Windows
In diesem Artikel finden Sie das grafische Tutori...
Eine detaillierte Anleitung zu benutzerdefinierten Anweisungen in Vue
Inhaltsverzeichnis 1. Was ist eine benutzerdefini...
MySQL-Limit-Leistungsanalyse und -Optimierung
1. Fazit Syntax: Limit-Offset, Zeilen Schlussfolg...