Struktur und Semantik von HTML5 (3): Semantische Elemente auf Blockebene_HTML5-Tutorialfähigkeiten

HTML5 fügt auch einige rein semantische Elemente auf Blockebene hinzu:
aside Figure Dialog
Ich habe die ersten beiden Elemente in Artikeln und Büchern verwendet. Das dritte Element verwende ich nicht sehr oft, es wird hauptsächlich für geschriebenen Text verwendet.
aside
Das aside-Element stellt Anweisungen, Tipps, Seitenleisten, Zitate, zusätzliche Notizen usw. dar, also Inhalte außerhalb der Hauptlinie der Erzählung. In DeveloperWorks-Artikeln werden beispielsweise häufig Seitenleisten im Tabellenformat angezeigt. Siehe Code 3 für in HTML4 geschriebene DeveloperWorks-Seitenleisten.

.xf-value

The.xf-valueselectorusedherestylestheinput
fieldvaluebutnotitslabel.Thisisactuallyinconsistent
withthecurrentCSS3draft.Theexamplereallyshouldusethe
::valuepseudo-classinsteadlikeso:

input::value{width:20em;}
#ccnumber::value{width:18em}
#zip::value{width:12em}
#state::value{width:3em}

.xf-valueDer hier verwendete.xf-valueSelektor bestimmt den Eingabefeldwert, aber nicht seine Beschriftung. Dies stimmt eigentlich nicht mit dem aktuellen CSS3-Entwurf überein. Das Beispiel sollte stattdessen die Pseudoklasse ::valueverwenden:input::value{width:20em;}
#ccnumber::value{width:18em}
#zip::value{width:12em}
#state::value{width:3em} Firefox unterstützt diese Syntax jedoch nicht.
In HTML5 kann diese Seitenleiste aussagekräftiger geschrieben werden, siehe Code 4 DeveloperWorks-Seitenleiste in HTML5 geschrieben.

.xf-value

Das .xf-value selectorusectusedherestylästheinput
fieldvaluebutnotitslabel - classinsteadlikeso:

::value

input::value{width:20em;}
#ccnumber::value{width:18em}
#zip::value{width:12em}
#state::value{width:3em}Firefox unterstützt diese Syntax jedoch nicht.

Der Browser kann entscheiden, wo diese Seitenleiste platziert wird (vielleicht mit ein wenig CSS-Code).

Abbildung

Das Abbildungselement stellt ein Bild auf Blockebene dar und kann auch Beschreibungen enthalten. In vielen DeveloperWorks-Artikeln können Sie beispielsweise ein in HTML4 geschriebenes DeveloperWorks-Code-Diagramm mit einem solchen Markup sehen. Das Ergebnis ist in Abbildung 1 dargestellt.
Abbildung 2.Dialog „Mozilla ="317"hspace="5"vspace="5"width="331"/>
Abbildung 1.InstallMozillaXFormsdialog

In HTML5 kann dieses Diagramm semantischer geschrieben werden, siehe Code 6 DeveloperWorks-Diagramm in HTML5 geschrieben.


Abbildung 2.Dialog „Mozilla "hspace="5"vspace="5"width="331"/>


Am wichtigsten ist, dass Browser (insbesondere Screenreader) die Abbildungen und Beschreibungen klar miteinander verknüpfen können.
Das Figurenelement kann nicht nur Bilder anzeigen. Sie können damit auch Beschreibungen zu Audio-, Video-, Iframe-, Objekt- und Einbettungselementen hinzufügen.
Dialog

Das Dialogelement stellt ein Gespräch zwischen mehreren Personen dar. Das HTML5dt-Element kann den Sprecher darstellen und das HTML5dd-Element kann den Sprachinhalt darstellen. Daher kann die Konversation auch in älteren Browsern sinnvoll dargestellt werden. Code 7 zeigt einen berühmten Dialog aus Galileis „Dialog über die beiden Hauptweltsysteme“.

Code 7. Galiläischer Dialog geschrieben in HTML5


Simplicius

Gemäß dem Straightline-AF,
und nicht nach der Kurve, die für diesen Zweck bereits
ausgeschlossen ist.
Sagredo

Aber ich sollte keines davon nehmen
da die gerade Linie AFschräg verläuft positiv

lineCD.

Salviati

Ihre Wahl und der Grund, warum Sie

dazu hinzufügen, scheinen am besten zu sein. Jetzt haben wir es

dass die erste Dimension durch eine gerade Linie bestimmt wird;
die zweite (nämlich die Breite) durch eine andere gerade Linie, und

nicht nur gerade, sondern im rechten Winkel dazu, was
die Länge bestimmt.Th Wir haben die beiden
Abmessungen einer Oberfläche definiert ,Länge und Breite.


Aber nehmen wir an, Sie müssten die Höhe bestimmen – zum Beispiel, wie hoch diese Plattform vom Bürgersteig unten
darunter ist. Wenn wir das von jedem Punkt der Plattform aus sehen, können wir

unendliche Linien, gekrümmt oder gerade, und alle
verschiedener Länge, bis zu den unendlichen Punkten des Bürgersteiges zeichnen

Welche dieser Zeilen würden Sie unten verwenden?

Es gibt Debatten über die genaue Syntax dieses Elements. Manche Leute möchten Nicht-Dialogtext (z. B. Regieanweisungen in einem Drehbuch) in das Dialogelement einbetten, andere möchten die Rolle der dt- und dd-Elemente nicht erweitern. Obwohl es Streit über die spezifische Syntax gibt, sind sich die meisten Menschen einig, dass es eine gute Sache ist, Dialoge auf diese semantische Weise auszudrücken.
　
　(Fortsetzung folgt)