Auszeichnungssprache - Phrasenelemente
|
Klicken Sie hier, um zum Abschnitt „HTML-Tutorial“ von 123WORDPRESS.COM zurückzukehren. Zurück: Markup Language – Form <br />Originalquelle Kapitel 6 <strong>, <em> und andere Phrasenelemente In der Einleitung und den vorherigen Kapiteln wurde das Konzept der semantischen Tags kurz erwähnt. Tags werden verwendet, um die Bedeutung von Dateien zu identifizieren, anstatt einfach den Anzeigeeffekt mit Tags festzulegen. Es ist eine gute Idee, eine Webseite zu entwerfen, die alle semantischen Tags verwendet. Ich denke jedoch, dass dieses Ziel zu idealistisch ist. Natürlich bedeutet das Nichterreichen des Ziels nicht, dass der Aufwand wertlos ist. Zumindest ist es wertvoll, auf dieses Ziel hinzuarbeiten. In der Praxis ist es oft notwendig, nicht-semantische Tags hinzuzufügen, um bestimmte Designziele zu erreichen, vor allem, weil derzeit keiner der bekannten Browser die Standards zu 100 % unterstützt. Einige CSS-Regeln zeigen in einigen Browsern nicht den richtigen Effekt an, was uns leider dazu zwingt, zusätzliche Tags zu verwenden, um bestimmte Designziele zu erreichen. Ein wichtiges Konzept, das Sie im Hinterkopf behalten sollten, ist, dass es echte Vorteile hat, semantisch strukturierte Inhalte zu schreiben. Gleichzeitig hat die Standards-Unterstützung, obwohl noch nicht 100 %, die kritische Masse überschritten, die es uns heute ermöglicht, Seiten mit webstandardskonformen Methoden zu schreiben. Manchmal müssen Opfer gebracht werden, aber je mehr standardkonforme Markups Sie schreiben, desto einfacher wird Ihre Arbeit in Zukunft sein. Anzeige- vs. Struktur-Tags In diesem Kapitel werden die Unterschiede zwischen Anzeige- und Struktur-Tags erörtert, und insbesondere die Unterschiede zwischen der Verwendung von <strong> statt <b> und <em> statt <i>. Später in diesem Kapitel werden wir auch mehrere andere Formulierungselemente und ihre Bedeutung innerhalb der Syntax standardkonformer, struktureller Markups erörtern. Sie haben vielleicht schon einmal gehört, dass jemand vorgeschlagen hat, <strong> statt <b> zu verwenden, wenn Sie Text fett formatieren möchten, aber er hat Ihnen nicht im Detail erklärt, warum Sie das tun sollten. Ohne das „Warum“ zu kennen, kann man kaum erwarten, dass andere Webdesigner ihre Gewohnheiten bei der Verwendung von Tags ändern, nur weil sie gehört haben, dass sie das tun sollten. Warum sind <strong> und <em> besser als <b> und <i>? Welche Vorteile hat es, die Tags <b> und <i> zu entfernen und durch <strong> und <em> zu ersetzen? Tatsächlich dient all dies dazu, Semantik und Struktur auszudrücken, und nicht nur Anzeigeeffekte . Alle Beispiele in diesem Buch versuchen, diesem Konzept zu folgen. Sehen Sie, was Experten sagen. Sehen wir uns zunächst an, wie W3C <strong> und <em> in der Phrasenelementspezifikation HTML4.01 (http://www.w3.org/TR/html4/struct/text.html#h-9.2.1) beschreibt: Phrasenelemente können einem Textsegment Strukturinformationen hinzufügen. Häufige Phrasenelemente haben folgende Bedeutungen: Vertreter betonten <strong> steht für stärkere Betonung, wir sprechen hier also von zwei unterschiedlichen Betonungsstufen. Beispielsweise sollte ein einzelnes Wort oder eine einzelne Phrase lauter, mit höherer Tonhöhe, schneller oder... nun ja, stärker betont gelesen werden als normaler Text. Das W3C führt weiter Folgendes aus: Die Anzeigewirkung von Phrasenelementen variiert je nach Browser. Generell sollten visuelle Browser Textinhalte mit <em> kursiv und Textinhalte mit <strong> fett darstellen. Sprachsynthesesoftware kann Syntheseparameter je nach Inhalt ändern, beispielsweise Lautstärke, Tonhöhe und Geschwindigkeit. Ahaha! Der letzte Satz ist besonders interessant. Sprachsynthesesoftware (früher als Bildschirmleseprogramme bekannt) verarbeitet Wörter, die hervorgehoben werden müssen, korrekt, was in der Tat eine gute Sache ist. Im Gegensatz dazu sind <b> und <i> nur Anzeige-Tags. Wenn unser Ziel darin besteht, Struktur von Anzeige zu trennen, ist die Verwendung von <strong> und <em> die richtige Wahl. Wenn wir einfach nur fetten oder kursiven Text anzeigen möchten, können wir CSS verwenden. Wir werden später in diesem Kapitel weitere Beispiele besprechen. Schauen wir uns zwei Beispiele für die Identifizierung an, um die Unterschiede zu verstehen. Methode A Ihre Bestellnummer zur späteren Bezugnahme lautet: <b>6474-82071</b>. Methode B Ihre Bestellnummer zur späteren Bezugnahme lautet: <strong>6474-82071</strong>. Fett und schön Dies ist ein perfektes Beispiel dafür, wo <strong> angemessener ist als <b>. Wir möchten einem bestimmten Textabschnitt innerhalb eines Satzes mehr Bedeutung verleihen. Zusätzlich zur Fettung der Bestellnummer möchten wir auch, dass Screenreader die Art und Weise ändern, wie sie diesen Text präsentieren: die Lautstärke erhöhen, die Tonhöhe oder die Geschwindigkeit ändern. Methode B erreicht beide Ziele gleichzeitig. Was ist mit <em>? Ebenso kann die Verwendung von <em> anstelle von <i> Bedeutung vermitteln, anstatt den Text einfach kursiv zu setzen. Schauen wir uns diese beiden Beispiele an: Methode A Ich habe heute Morgen nicht eine, sondern <i>drei</i> Stunden gebraucht, um meine Einfahrt freizuschaufeln. Methode B Ich habe heute Morgen nicht eine, sondern drei Stunden gebraucht, um meine Einfahrt freizuschaufeln. Betonung Im vorherigen Beispiel (das zutraf, als dieses Buch geschrieben wurde) war mein Ziel, das Wort „drei“ betont erscheinen zu lassen, als würde ich es laut aussprechen. Optisch würde Methode B in den meisten Browsern kursiv erscheinen und Screenreader würden Ton, Geschwindigkeit oder Lautstärke entsprechend anpassen. Nur fett oder kursiv Es ist wichtig zu beachten, dass Sie in vielen Fällen nur fetten oder kursiven Text optisch darstellen müssen. Mit anderen Worten: Angenommen, Sie haben eine Liste mit Links in Ihrer Seitenleiste und möchten, dass alle Links gleich erscheinen: fett (Abbildung 6-1).  Abbildung 6-1. Beispiel für fettgedruckte Links in einer Seitenleiste. Wir möchten den Inhalt der Links nicht hervorheben, sondern nur ihre visuelle Attraktivität. Dies ist ein guter Ort, um CSS zu verwenden, um das Erscheinungsbild der Links zu ändern, sodass sie von Bildschirmleseprogrammen und anderen nicht visuellen Browsern nicht hervorgehoben werden. Möchten Sie beispielsweise wirklich, dass fettgedruckte Links schneller, lauter und mit höherer Tonhöhe gelesen werden? Wahrscheinlich nicht. Die Fettschrift dient hier nur Anzeigezwecken. font-weight entspricht fett. Um den Anzeigeeffekt in Abbildung 6-1 zu erzielen, nehmen wir an, dass die Linkleiste in einem <div> mit der ID sidebar platziert ist. Auf diese Weise können wir CSS verwenden, um anzugeben, dass die Links innerhalb von #sidebar fett angezeigt werden sollen: #Seitenleiste a{ Schriftstärke: fett; } Es ist so einfach, dass ich mir ein bisschen lächerlich vorkomme, wenn ich es überhaupt erwähne, aber es ist eine großartige Möglichkeit, Struktur von Präsentation zu trennen. Das ist mutig! Ähnliche Überlegungen können Sie auch bei kursivem Text anstellen. Wenn Sie den Inhalt nicht hervorheben, sondern den Text einfach kursiv darstellen möchten, können Sie dies wiederum mit der Eigenschaft font-style mit CSS handhaben. Lassen Sie uns dieselbe #sidebar als Beispiel verwenden. Wenn Sie beispielsweise alle Links in der #sidebar kursiv darstellen möchten, können Sie dies folgendermaßen schreiben: #Seitenleiste a{ Schriftstil: kursiv; } Ein weiteres extrem einfaches Konzept, aber im Bereich der strukturierten Markup-Syntax halte ich es für wichtig, diese Situationen zu diskutieren – die Verwendung von CSS zur Handhabung von CCTV anstelle von Anzeigeeffekt-Tags. Manchmal werden die einfachsten Lösungen auch am leichtesten übersehen. Wenn Sie planen, Fettdruck und Kursivschrift gleichzeitig zur Anzeige von Textinhalten zu verwenden, sollten Sie sich meiner Meinung nach zuerst eine Frage überlegen: Welchen Grad der Betonung möchten Sie vermitteln? Basierend auf der Antwort auf diese Frage werde ich das entsprechende Tag auswählen: <em> (Hervorhebung) oder <strong> (stärkere Betonung) und dann den Text mit dem ausgewählten Tag markieren. Im folgenden Beispiel wollte ich beispielsweise ursprünglich das Wort „fun“ gleichzeitig fett und kursiv drucken, habe mich dann aber letztendlich für die Hervorhebung des Wortes mit <em> entschieden. Das Erstellen von Websites mit Webstandards kann Spaß machen! Die meisten Browser zeigen dieses Wort nur kursiv an. Um sowohl Fett- als auch Kursivschrift zu verwenden, haben wir mehrere Möglichkeiten. Oh, ich hoffe wirklich, Sie stimmen der obigen Aussage zu. Ein normales <span> Eine Möglichkeit besteht darin, „fun“ mit einem normalen <span> zu umschließen und CSS-Regeln anzugeben, um alle <span> innerhalb von <em> fett zu machen. Die Markup-Syntax sieht folgendermaßen aus: Das Erstellen von Websites mit Webstandards kann Spaß machen! Das CSS würde folgendermaßen aussehen: em Spanne Schriftstärke: fett; } Der offensichtliche semantische Teil ist nicht so gut, da wir zusätzliches Markup hinzufügen, aber diese Methode funktioniert trotzdem für alle. Eine andere Möglichkeit, mit Klassen hervorzuheben, besteht darin, dem <em>-Tag eine Klasse zuzuweisen und mit CSS einen Fetteffekt hinzuzufügen. Die Markup-Syntax würde folgendermaßen aussehen: Das Erstellen von Websites mit Webstandards kann Spaß machen! Das CSS würde folgendermaßen aussehen: em.fett{ Schriftstärke: fett; } Durch die Verwendung von <em> wird ein kursiver Effekt erzielt (und der Textinhalt wird semantisch hervorgehoben), und durch Hinzufügen der Klasse „Fettdruck“ wird der Text innerhalb von <em> fett dargestellt. Eine ähnliche Methode kann auch zum Ändern von <strong> verwendet werden. In diesem Fall können wir, wenn wir einen bestimmten Absatz hervorheben möchten, eine Kursivklasse entwerfen, um einen Kursiveffekt hinzuzufügen, und ihn dann mit dem ursprünglichen Fetteffekt von <strong> abgleichen. Das Markup sieht folgendermaßen aus: Das Erstellen von Websites mit Webstandards kann Spaß machen! Und das CSS sieht so aus: stark.kursiv{ Schriftstil: kursiv; } Vorherige Seite 1 2 3 4 5 Nächste Seite Mehr lesen |
>>: Javascript-Grundlagen: Detaillierte Erklärung der Operatoren und der Flusskontrolle
Artikel empfehlen
So implementieren Sie Property Hijacking mit JavaScript defineProperty
Inhaltsverzeichnis Vorwort Deskriptoren Detaillie...
Lösung für den MySQL-Dienstfehler 1067: Ändern Sie den Pfad der ausführbaren MySQL-Datei
Heute bin ich auf das MySQL-Dienstfehlerproblem 1...
Natives JS zur Implementierung des Spiels 2048
2048 Minispiel, zu Ihrer Information, der spezifi...
Detaillierte Erläuterung des verschachtelten Routings im Vue-Router
Inhaltsverzeichnis Schritt 1. Konfigurieren Sie R...
7 Fähigkeiten, die großartige Grafikdesigner beherrschen müssen
1》Seien Sie gut im Webdesign 2》Wissen, wie man Web...
Diskussion über Stilanpassung und Browserkompatibilitätsprobleme bei der Verwendung des Eingabeelements [type="file"]
Ich bin vor zwei Tagen beim Bearbeiten der schrift...
Detaillierte Erläuterung der Überwachung des Jenkins-Prozesses basierend auf Zabbix
1. Überwachungsarchitekturdiagramm 2. Umsetzungsi...
JavaScript verwendet Canvas zum Zeichnen von Koordinaten und Linien
In diesem Artikel wird der spezifische Code zur V...
Der Unterschied zwischen den Feldtypen char, varchar und Text in MySQL
In MySQL können alle Felder der Typen char, varch...
Analyse des Prinzips und der Verwendung von MySQL-Benutzerdefinierten Funktionen
Dieser Artikel veranschaulicht anhand von Beispie...
Analyse der Implementierungsmethode der Koexistenz von Nginx und Apache unter Linux-Servern
Dieser Artikel beschreibt, wie die Koexistenz von...
Analyse der Gründe, warum Vue3 Proxy zur Implementierung der Datenüberwachung verwendet
Vue-Datenbindungsprinzip in beide Richtungen, abe...
Verwenden von nginx + fastcgi zum Implementieren eines Bilderkennungsservers
Hintergrund Ein spezielles Gerät wird verwendet, ...
Designreferenz Schönes und originelles Blog-Design
Alle unten aufgeführten Blogs sind originell und ...
Der DOCTYPE-Modusauswahlmechanismus bekannter Browser
Dokumentumfang Dieser Artikel behandelt den Modus...