Zitat in HTML: Zitate, Zitate und Blockquoten

Es ist allzu häufig, dass die falschen HTML für Zitate in Markup verwendet werden. Lassen Sie uns in diesem Artikel all dies in verschiedene Situationen und unterschiedliche HTML -Tags eingehen, um diese Situationen zu bewältigen.

Es gibt drei wichtige HTML -Elemente, die an Zitaten beteiligt sind:

Schauen wir uns an.

Blockquoten

Blockquote -Tags werden verwendet, um den zitierten Text vom Rest des Inhalts zu unterscheiden. Mein englischer Lehrer der zehnten Klasse hat es in meinen Kopf gebohrt, dass ein Zitat von vier Zeilen oder länger auf diese Weise auseinandergesetzt werden sollte. Die HTML -Spezifikation hat keine solche Anforderung, aber solange der Text ein Zitat ist und Sie möchten, dass er von den umgebenden Text und Tags abhebt, ist ein Blockquote die semantische Wahl.

Standardmäßig können Browser Blockquoten einstellen, indem Sie auf jeder Seite den Rand hinzufügen.

Blockquote kann als Flusselement (dh "Blockpegel" -Element) andere Elemente enthalten. Zum Beispiel können wir Absätze ohne Probleme fallen lassen:

 <blockquote>
  <p> </p>
  <p> </p>
</blockquote>

Aber es könnten auch andere Elemente sein, wie eine Überschrift oder eine ungeordnete Liste:

 <blockquote>
    <h2> </h2>
    <ul>
      <li> </li>
      <li> </li>
    </ul>
</blockquote>

Es ist wichtig zu beachten, dass Blockquoten nur für Zitate und nicht als dekoratives Element in einem Design verwendet werden sollten. Dies hilft auch die Zugänglichkeit, da die Benutzer von Bildschirmleser zwischen Blockquoten springen können. Somit könnte ein Blockquote -Element, das ausschließlich für die Ästhetik verwendet wird, diese Benutzer wirklich verwirren. Wenn Sie etwas dekorativeres brauchen, das außerhalb der Grenzen erweiterter Zitate fällt, dann ist ein Div mit einer Klasse der richtige Weg.

 Blockquote,
.Callout-Block {
  / * Diese könnten Styling teilen */
}

Zitat mit q

Q -Tags () sind für Inline -Zitate oder für diejenigen, die mein Lehrer der zehnten Klasse sagen würde, die unter vier Zeilen. Viele moderne Browser fügen dem Zitat als Pseudoelemente automatisch Anführungszeichen hinzu. Möglicherweise benötigen Sie möglicherweise eine Sicherungslösung für ältere Browser.

Typische Anführungszeichen sind genauso gültig für Inline -Zitate wie das Element. Die Vorteile der Verwendung von besteht jedoch darin, dass es ein CITE -Attribut, die automatische Handhabung von Anführungszeichen und die automatische Handhabung von Zitatniveaus enthält. Elemente sollten nicht für Sarkasmus verwendet werden (z. B. „Sie würden ein -Tag für Sarkasmus verwenden, nicht wahr?“) Oder ein Wort mit Luftzitaten (zB „fantastisch“ eine „genaue“ Beschreibung des Autors anzeigen). Aber wenn Sie herausfinden können, wie Sie Luftzitate markieren können, lassen Sie es mich bitte wissen. Weil das "großartig" wäre.

Das Zitierattribut

Sowohl als auch blockquoten können ein Zitierattribut (CITE) verwenden. Dieses Attribut enthält eine URL, die einen Kontext und/oder eine Referenz für das zitierte Material liefert. Die Spezifikation zeigt, dass die URL von Räumen umgeben sein kann. (Ich bin mir nicht sicher, warum das hervorgehoben wird, aber wenn Sie die Semantic Code -Gottheiten verärgern möchten, müssen Sie mehr als Räume werfen.)

 <p> Der Offizier hinterließ eine Notiz mit <q cite="https://johnrhea.com/summons"> Sie wurden beschworen, am 4. Januar wegen Anklage wegen Versuchsleser -Bestechung zu erscheinen. </q> </p>

Dieses Zitatattribut ist für den Benutzer standardmäßig nicht sichtbar. Sie können es mit einer Prise CSS -Magie wie der folgenden Demo hinzufügen. Sie könnten sogar noch weiter damit herumspielen, um das Zitat auf Schwebungen zu erscheinen.

Keine dieser Optionen ist besonders großartig. Wenn Sie eine Quelle zitieren müssen, sodass Benutzer sie sehen und dazu gehen können, sollten Sie sie in HTML und wahrscheinlich mit dem -Element tun, das wir als nächstes abdecken werden.

Das Zitierelement

Das -Tag sollte verwendet werden, um kreative Arbeit zu referenzieren, anstatt die Person, die das Zitat gesagt oder geschrieben hat. Mit anderen Worten, es ist nicht für Zitate. Hier sind die Beispiele aus der Spezifikation :

 <p> Mein Lieblingsbuch ist <cite> Die Reality -Dysfunktion </cite> von
Peter F. Hamilton. Mein Lieblings -Comic ist vorher <cit> Perlen
Schweine  von Stephan Pastis. Mein Lieblingstrack ist <cite> Jive
Samba </cite> durch das Cannonball Adderley Sextett. </cit></p>

Hier ist ein weiteres Beispiel:

Wenn der Autor dieses Artikels Ihnen sagte, er würde Ihnen einen Cupcake geben, und Sie ihn mit Namen zitieren, wäre das semantisch falsch. Somit würden sich keine Cupcakes den Besitzer wechseln. Wenn Sie den Artikel zitieren, in dem er Ihnen einen Cupcake anbot, wäre das semantisch korrekt, aber da der Autor das nicht tun würde, würden Sie immer noch keinen Cupcake bekommen. Entschuldigung.

Standardmäßig werden die Browser iäuschen zitieren und es ist nicht erforderlich, dass ein oder

vorhanden ist, um das Zitelelement zu verwenden. Wenn Sie ein Buch oder eine andere kreative Arbeit zitieren möchten, schlagen Sie es in das Zitelelement. Die semantischen Gottheiten lächeln Sie, weil Sie weder noch Elemente verwendet haben.

Aber wo kann man das Zitelelement setzen? Innen? Draußen? Der Kopfabstand? Wenn wir es in die

oder in das legen, machen wir es zu einem Teil des Zitats. Das ist von der Spezifikation aus genau diesem Grund verboten.

 
<blockquote>
  Zitat zur Cupcake -Verteilung aus einem Artikel
  <cite> Der Artikel </cite>
</blockquote>

Wenn Sie es aus der Außenseite aus der Außenseite stellen, müssen Sie sich einfach falsch machen und müssen Sie auch ein umschließendes Element wie ein

haben, wenn Sie sie zusammen stylen möchten.

 <div>
  <blockquote>
    Zitat zur Cupcake -Verteilung aus einem Artikel
  </blockquote>
  <cite> Der Artikel </cite>
</div>

NB Wenn Sie dieses Problem googeln, können Sie auf einen HTML5 -Arztartikel aus dem Jahr 2013 stoßen, der viel von dem widerspricht, was hier ausgelegt ist. Jedes Mal, wenn es zur Unterstützung zu den Dokumenten verlinkt, stimmen die DOCS mit dem Artikel zu, den Sie derzeit lesen, und nicht den HTML5 -Arztartikel. Höchstwahrscheinlich haben sich die Dokumente verändert, seit dieser Artikel geschrieben wurde.

Hey, was ist mit dem Figurelement?

Eine Möglichkeit, ein Zitat zu markieren - und auf eine Weise, die den semantischen Codegottheiten gefällt - besteht darin, den Blockquote innerhalb eines Figurenelements zu stecken. Legen Sie dann das Zitelelement und alle anderen Autor- oder Zitierinformationen in eine Figur.

 <abus>
  <blockquote>
    Webbrowser sind jedoch nicht wie Webserver. Wenn Ihr Back-End-Code so groß wird, dass er aufmerksam langsam ausgeführt wird, können Sie mehr Rechenleistung darauf werfen, indem Sie Ihren Server skalieren. Dies ist keine Option für das Front-End, in dem Sie nicht wirklich <em>eine</em> Laufzeitumgebung haben-Ihre Endbenutzer haben eine eigene Laufzeitumgebung mit eigenen Einschränkungen in Bezug auf Rechenleistung <strong>und</strong> Netzwerkkonnektivität.
  </blockquote>
  <figcaption>
    & mdash; Jeremy Keith, <cite> Mental Models </cite>
  </figcaption>
</abus>

Dies verdoppelt die Anzahl der benötigten Elemente, aber es gibt mehrere Vorteile:

1. Es ist semantisch für alle vier Elemente korrekt.
2. Sie können Autoreninformationen sowohl einschließen als auch inkapseln, außer dass Sie den Namen der Arbeit zitieren.
3. Es gibt Ihnen eine einfache Möglichkeit, das Zitat zu stylen, ohne auf Divs, Spannweiten oder Elenden zurückzugreifen.

Nichts davon ist für den Dialog

Nicht ! Diese sind für aufmerksamkeitsstarke Modale. Dialog wie im Konversationsaustausch zwischen Menschen, die sprechen oder miteinander tippen.

Weder

noch noch sind für den Dialog und einen ähnlichen Austausch zwischen den Lautsprechern zu verwenden. Wenn Sie den Dialog markieren, können Sie alles für Sie am sinnvollsten verwenden. Es gibt keine semantische Möglichkeit, es zu tun. Die Spezifikation schlägt jedoch die

-Tags und Zeichensetzung mit oder -Tags vor, um den Lautsprecher und die -Tags zur Markierung von Bühnenrichtungen zu markieren.

Zugänglichkeit von Zitaten

Aus den Forschungen, die ich durchgeführt habe, sollten Bildschirmleser kein Problem mit dem Verständnis von Semantic-Desity-zugelassenen ,

oder -Tags haben.

Weitere "Wege" zum "Zitieren"

Sie können Anführungszeichen zu einem

mit CSS -Pseudoelementen hinzufügen. Das -Element wird mit Anführungszeichen ausgestattet, sodass sie nicht hinzugefügt werden müssen. Wenn sie jedoch als Pseudoelemente hinzugefügt werden, kann dies für ältere Browser, die sie nicht automatisch hinzufügen, eine Problemumgehung sein. Da moderne Browser die Anführungszeichen hinzufügen, besteht keine Gefahr, doppelte Zitate hinzuzufügen. Neue Browser überschreiben die Standard -Pseudoelemente, und ältere Browser, die die Pseudoelemente unterstützen, werden die Zitate hinzufügen.

Aber Sie können nicht wie ich davon ausgehen, dass das oben genannte immer eine kluge Öffnung und Schließungszitate bietet. Auch wenn die Schrift intelligente Zitate unterstützt, werden manchmal gerade Zitate angezeigt. Um sicher zu sein, ist es besser, die Zitate CSS -Eigenschaft für die Intelligenz für diese Anführungszeichen zu verwenden.

 Blockquote {
  Zitate: """ """ "'" "'";
} 

Multi-Level-Zitat

Schauen wir uns nun die Zitatniveaus an. Das -Tag wird die Angebote automatisch anpassen.

Nehmen wir an, Sie befinden sich in einem Gebiet, in dem die britische Konvention der Verwendung einzelner Zitate verwendet. Sie können die CSS -Zitate -Regel verwenden, um die Öffnungs- und Schließen der einzelnen Zitate in die Liste zu stecken. Hier ist ein Beispiel für beide Wege:

Es gibt keine Begrenzung für das Nisten. Diese verschachtelten Elemente könnten sogar innerhalb eines Blockquote liegen, der sich innerhalb eines Blockquote befindet.

Wenn Sie einem Blockquote Anführungszeichen hinzufügen, wissen Sie, dass der Blockquote die Zitatstufe nicht so ändert, wie ein Tag der Fall ist. Wenn Sie erwarten, dass Sie Zitate innerhalb eines Blockquote haben, möchten Sie möglicherweise eine Nachkommenswahlregel hinzufügen, um Elemente innerhalb eines Blockquote auf einer einzelnen Zitatstufe zu starten (oder zeitlich zu verdoppeln, wenn Sie den britischen Konventionen befolgen).

 Blockquote q {
  Zitate: "'" "'" """ """;
}

Das letzte Zitatniveau, das Sie eingereicht haben, wird über die nachfolgenden Zitatebenen fortgesetzt. Um die doppelte, einzelne, doppelte, einzelne… Konvention zu verwenden, fügen Sie der CSS -Zitat -Eigenschaft weitere Ebenen hinzu.

 Q {
  Zitate: """ """ "'" "'" """ """ "'" "'" """ """;
}

Hängende Interpunktion

Viele Typografie -Experten sagen Ihnen, dass das Aufhängen der Anführungszeichen auf Blockquotes besser aussieht (und sie sind Recht). Die hängende Interpunktion ist in diesem Fall Anführungszeichen, die aus dem Text herausgedrückt werden, so dass die Zeichen des Textes vertikal ausgestattet sind.

Eine Möglichkeit in CSS besteht darin, einen etwas negativen Wert auf der textindenten Eigenschaft zu verwenden. Die genaue negative Eindrücke variiert je nach Schriftart. Überprüfen Sie daher den Abstand mit der Schriftart, die Sie am Ende verwenden.

 Blockquote {
  textindent: -0.45em;
}

Es gibt eine schönere Möglichkeit, dies durch die Verwendung der CSS-Eigenschaft für Hanging-PUNKS zu erledigen. Es wird zum Zeitpunkt dieses Schreibens nur in Safari unterstützt, daher müssen wir uns schrittweise verbessern:

 /* Zurückgreifen */
Blockquote {
  textindent: -0.45em;
}

/ * Wenn es Unterstützung gibt, löschen
@Supports (Hang-PUNKTUUNG: First) {
  Blockquote {
    textindent: 0;
    Hang-PUNKTUUNG: Erstens;
  }
}

Die Verwendung von Hang-PUNKSE ist besser, da es weniger fummelig ist. Es wird einfach funktionieren , wenn es kann.

Können wir Zitatmarken animieren?

Natürlich können wir.

Warum Sie dies tun müssten, bin ich mir nicht ganz sicher, aber die Angebotsmarken in einem -Tag werden hinzugefügt, sind Pseudoelemente im UA Stylesheet, sodass wir sie auswählen und stylen können - einschließlich Animation -, wenn wir müssen.

Warten Sie, vielleicht haben wir doch nur die Luftzitate gelöst.

Das obige ist der detaillierte Inhalt vonZitat in HTML: Zitate, Zitate und Blockquoten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!