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!