Markup -Sprache - Phrase -Elemente

Autor：Eve Cole Aktualisierungszeit：2025-05-15 13:48:02

Klicken Sie hier, um zur Spalte Wulin.com HTML Tutorial zurückzukehren.

Oben: Markup -Sprache - Formen

Originalquelle Kapitel 6 , und andere Phrasenelemente

In der Einführung und früheren Kapiteln wurde das Konzept der semantischen Tags geringfügig erwähnt, wobei Tags die Bedeutung von Dateien identifizieren, anstatt einfach den Anzeigeeffekt mit Tags festzulegen. Das Entwerfen einer Webseite, die semantische Tags vollständig verwendet, ist eine gute Idee. Ich denke jedoch, dass dieses Ziel zu ideal ist. Natürlich bedeutet es nicht, das Ziel vollständig zu erreichen, dass der Aufwandprozess wertlos ist. Zumindest ist es wertvoll, auf dieses Ziel hinzuarbeiten.

In Wirklichkeit ist es oft notwendig, nicht-semantische Tags hinzuzufügen, um bestimmte Designziele zu erreichen, vor allem, weil berühmte Browser heute die Standards nicht um 100%unterstützen können. Einige CSS -Regeln können in einigen Browsern nicht den richtigen Effekt anzeigen, und leider müssen wir zusätzliche Tags verwenden, um bestimmte Designziele zu erreichen.

Es gibt ein wichtiges Konzept, das ernst genommen werden muss: Das heißt, der Versuch, so viel wie möglich semantische Strukturen zu schreiben, bringt praktische Vorteile. Gleichzeitig hat die Unterstützung für Standards nicht 100%erreicht, die kritische Punkte überschritten hat, sodass wir jetzt Webseiten mit Methoden schreiben können, die den Netzwerkstandards entsprechen. Manchmal müssen wir einige Opfer bringen, aber je mehr Etiketten, die den Standards entsprechen, desto einfacher wird es für die Zukunft. Anzeigeeffekt vs. Strukturbezeichnungen

In diesem Kapitel wird der Unterschied zwischen Display -Effekten und Strukturetiketten oder vielmehr die Unterschiede zwischen der Verwendung von Ersatz und der Verwendung Ersatz erörtert. Später in diesem Kapitel werden wir auch mehrere andere Phrasenelemente und ihre Bedeutung innerhalb der standardkonformen, strukturierten Etikettsgrammatik diskutieren.

Sie haben vielleicht gehört, dass einige Leute vorschlagen, Ersatz zu verwenden, wenn sie einen mutigen Text benötigen, aber sie sagen Ihnen nicht weiter, warum ein solcher Ersatz erforderlich ist. Ohne zu wissen, warum , ist es wirklich schwer zu erwarten, dass andere Webdesigner ihre Nutzungsgewohnheiten von Tags ändern, nur weil sie davon gehört haben. Warum ist besser als ?

Was sind die Vorteile des Entfernens der und -Tags und des Ersetzens durch und ? All dies bedeutet, Semantik und Struktur auszudrücken und nicht nur den Effekt zu zeigen . Alle Beispiele in diesem Buch bemühen sich auch, diesem Konzept zu folgen. Sehen Sie, was die Experten sagen

Schauen wir uns zunächst an, wie W3C und in der Spezifikation von Html4.01-Phrase-Element beschreibt (http://www.w3.org/tr/html4/struct/text.html#h-9.1):

Phrasenelemente können Textfragmenten Strukturinformationen hinzufügen. Häufige Phrasenelemente haben die folgenden Bedeutungen:

 Repräsentant betont

 ist eine stärkere Betonung

Hier diskutieren wir also zwei verschiedene Schwerpunkte. Zum Beispiel ist es ein einzelnes Wort oder eine einzelne Phrase. Wenn es ausgesprochen wird, sollte es lauter sein, mit einem höheren Ton, schneller ausgeprägter oder ... na ja, es wird stärker betont als der allgemeine Textinhalt.

W3C beschreibt dann den folgenden Absatz:

Der Anzeigeffekt von Phrasenelementen variiert mit dem Browser. Im Allgemeinen sollte der visuelle Browser den Textinhalt in Kursivschrift und den Textinhalt in fett gedrucktem Zeugnis anzeigen. Die Sprachsynthese -Software kann die Syntheseparameter mit dem Inhalt wie Volumen, Ton und Geschwindigkeit usw. ändern.

Ahh! Der letzte Satz ist besonders interessant. Die Sprachsynthese -Software (wir haben es früher als Bildschirmleser bezeichnet) wird den Text, der hervorgehoben werden, korrekt behandelt, was in der Tat eine gute Sache ist.

Im Gegensatz dazu sind oder nur einfache Display -Effekt -Tags. Wenn unser Ziel es ist, die Struktur vom Anzeigeeffekt zu trennen, ist die Verwendung von und die richtige Wahl. Ich möchte nur einen mutigen und kursiven Text mit CSS anzeigen. Weitere Beispiele werden später in diesem Kapitel erörtert.

Schauen Sie sich als nächstes zwei Identifikationsbeispiele an, die uns helfen, ihre Unterschiede zu verstehen. Methode a

Ihre Bestellnummer für zukünftige Referenz lautet: 6474-82071 . Methode B

Ihre Bestellnummer als zukünftige Referenz lautet: 6474-82071 .Rough und schön

Diese Situation ist ein perfektes Beispiel für die Verwendung von mehr als . Wir beabsichtigen, den spezifischen Text im Satz wichtiger zu machen. Neben der fetthaltigen Anzeige von Bestellnummern hoffen wir auch, dass die Bildschirmleser auch die Art und Weise ändern, wie sie diesen Inhalt ausdrücken: Lautstärke, den Ton oder die Geschwindigkeit erhöhen. Methode B kann beide Ziele gleichzeitig erreichen. Na und?

In ähnlicher Weise kann das Ersetzen von durch gleichzeitig die Bedeutung ausdrücken, anstatt einfach den Textinhalt in Kursivschrift anzuzeigen. Schauen wir uns diese beiden Beispiele an: Methode a

Ich habe nichts gebraucht, aber drei Stunden, um meine Auffahrt heute Morgen zu schaufeln. Methode B

Ich brauchte nichts, aber drei Stunden, um heute Morgen meine Auffahrt zu schaufeln.

Im vorherigen Beispiel (die wirkliche Situation, in der dieses Buch geschrieben wurde) war mein Ziel, das Wort drei in einem Schwerpunkt zu machen, genau wie ich dieses Wort laut und visuell gelesen habe, wird die Methode B in den meisten Browsern kursiv angezeigt, und der Bildschirmleser passt den Ton, die Geschwindigkeit oder das Volumen angemessen an. Solange es mutig oder kursiv ist, ist es in Ordnung

Es muss angemerkt werden, dass in vielen Fällen nur der Textffekt von Fett und Kursivschrift erforderlich ist, um visuell anzuzeigen. Mit anderen Worten, Sie haben eine Liste von Links in der Seitenleiste, und Sie möchten alle Links mit dem gleichen Effekt angezeigt werden: dh fett werden (Abbildung 6-1)

Abbildung 6-1. Beispiel für kühne Links in der Seitenleiste

Zusätzlich zu visuellen Funktionen beabsichtigen wir nicht, den Link -Inhalt zu betonen. Dies ist ein guter Ort, um das Erscheinungsbild von Links mit CSS zu ändern, damit sie von Bildschirmlesern und anderen nicht-visuellen Browsern nicht besonders betont werden.

Möchten Sie beispielsweise wirklich, dass der mutige Link schneller, lauter und höherer Ton gelesen wird? Wahrscheinlich nicht, der Fettdruck hier ist nur der Anzeigeffekt. Schriftgewicht entspricht mutig

Um den Anzeigeffekt von Abbildung 6-1 zu erzielen, nehmen wir an, dass die Verbindungsleiste in <div> mit der auf die Seitenleiste eingestellten ID platziert ist, damit wir CSS verwenden können, um anzugeben, dass die Links in #SideBar fett angezeigt werden sollten:

#sidebar a {

Schriftgewicht: fett;

}

Ich denke, es ist ein bisschen lächerlich, wenn ich es erwähne, aber dies ist in der Tat eine gute Möglichkeit, die Struktur und die Anzeige von Effekten zu trennen. Es ist mutig!

In ähnlicher Weise können Sie ähnliche Ideen anwenden, wenn Sie über einen kursiven Text nachdenken. Wenn Sie Inhalte nicht hervorheben und nur den Text kursiv anzeigen möchten, können Sie das Attribut für Schriftarten im Stil verwenden, um diese Situationen durch CSS erneut zu bewältigen.

Verwenden wir dieselbe #SideBar als Beispiel. Wenn Sie beispielsweise alle Links in #SideBar in Kursivschrift angezeigt werden möchten, können Sie dies schreiben:

#sidebar a {

Schriftstil: kursiv;

}

Es ist ein weiteres einfaches Konzept, aber auf dem Gebiet der strukturierten Markierungsgrammatik ist es sehr wichtig, diese Situationen zu diskutieren. Manchmal ist die einfachste Lösung auch am einfachsten zu ignorieren. Teilen Sie mutige und kursive Kur

Wenn ich vorhabe, den Textinhalt gleichzeitig für fett und kursiv anzuzeigen, muss ich zuerst über eine Frage nachdenken. Welchen Schwerpunkt planen Sie zu vermitteln? Basierend auf der Antwort auf diese Frage werde ich das entsprechende Etikett auswählen: (Betonung) oder <stärkerer Schwerpunkt) und dann den Text mit dem ausgewählten Etikett markieren.

Zum Beispiel hatte ich im folgenden Beispiel geplant, Spaß in kühner und Kursivschrift gleichzeitig anzuzeigen, aber am Ende habe ich mich entschieden, zu verwenden, um dieses Wort zu betonen.

Das Erstellen von Websites mit Webstandards kann Fun sein!

Die meisten Browser zeigen dieses Wort nur kursiv an. Um sowohl mutige als auch Kursivschrift zu verwenden, haben wir mehrere Optionen. Oh, ich hoffe wirklich, dass Sie dem obigen Satz zustimmen. Gewöhnliche

Eine Methode besteht darin, ein normales -Paket außerhalb des Spaßes zu verwenden und die CSS -Regel anzugeben, um alle <spannes in fett gedrucktem Ziff zu verwenden. Die Tag -Syntax sieht so aus:

Das Erstellen von Websites mit Webstandards kann <Pan> Spaß sein!

Und CSS sieht so aus:

em span {

Schriftgewicht: fett;

}

Der offensichtliche semantische Teil ist nicht gut, weil wir zusätzliche Tags hinzugefügt haben, aber diese Methode ist immer noch nützlich für alle. Mit der Klasse betonen

Eine andere Methode besteht darin, eine Klasse für das -Tag anzugeben und in CSS einen mutigen Effekt hinzuzufügen. Die Tag -Syntax sieht so aus:

Das Erstellen von Websites mit Webstandards kann Fun sein!

Und CSS sieht so aus:

em.bold {

Schriftgewicht: fett;

}

Die Verwendung von kann den kursiven Effekt erzielen (obwohl semantisch den Textinhalt betont), und das Hinzufügen einer mutigen Klasse zu ihm wird in Fettdruck den Text in erscheinen.

Ähnliche Methoden können auch verwendet werden, um zu ändern. Zu diesem Zeitpunkt können wir, wenn wir einen bestimmten Absatz betonen, die kursive Klasse mit kursivem Effekt entwerfen und dann mit dem ursprünglichen mutigen Effekt übereinstimmen.

Die Markup -Sprache sieht so aus:

Das Erstellen von Websites mit Webstandards kann spaß sein!

Und CSS ist so:

strong.italic {

Schriftstil: kursiv;

}

Vorherige Seite1 2 3 4 5 Nächste Seite Lesen Sie den vollständigen Text