Testen Sie Ihre Fähigkeiten: Fortgeschrittener HTML-Text

Ziel dieses Fähigkeitentests ist es, Ihnen zu helfen, zu beurteilen, ob Sie verstehen, wie man weniger bekannte HTML-Elemente zur Auszeichnung fortgeschrittener semantischer Merkmale verwendet.

Hinweis: Um Hilfe zu erhalten, lesen Sie unseren Testen Sie Ihre Fähigkeiten Benutzerleitfaden. Sie können auch über einen unserer Kommunikationskanäle mit uns in Kontakt treten.

Fortgeschrittener Text 1

In dieser Aufgabe möchten wir, dass Sie der bereitgestellten HTML einige Semantiken hinzufügen.

Um diese Aufgabe abzuschließen:

Verwandeln Sie den zweiten Absatz in ein Block-Level-Zitat und weisen Sie semantisch darauf hin, dass das Zitat aus Accessibility stammt.
Markieren Sie "HTML" und "CSS" semantisch als Akronyme, indem Sie Erweiterungen als Tooltips bereitstellen.
Verwenden Sie Tief- und Hochstellungen, um die korrekte Semantik für die chemischen Formeln und Daten bereitzustellen und sie korrekt anzuzeigen.
Verknüpfen Sie maschinenlesbare Daten semantisch mit den Daten im Text.

Der Ausgangspunkt der Aufgabe sieht so aus:

Hier ist der zugrunde liegende Code für diesen Ausgangspunkt:

html

<h1>Advanced text semantics</h1>

<p>Let's start with a quote:</p>

<p>
  HTML, Hypertext Markup Language is by default accessible, if used correctly.
</p>

<p>CSS can also be used to make web pages more, or less, accessible.</p>

<p>Chemical Formulae: H2O (Water), C2H6O (Ethanol).</p>

<p>
  Dates: December 25th 2019 (Christmas Day), November 2nd 2019 (Día de los
  Muertos).
</p>

body {
  background-color: white;
  color: #333333;
  font:
    1em / 1.4 "Helvetica Neue",
    "Helvetica",
    "Arial",
    sans-serif;
  padding: 1em;
  margin: 0;
}

h1 {
  font-size: 2rem;
  margin: 0;
  color: purple;
}

p {
  margin: 0.5em 0;
}

abbr,
time {
  color: green;
}

Der aktualisierte Inhalt sollte so aussehen:

Klicken Sie hier, um die Lösung anzuzeigen

Ihre fertige HTML sollte so aussehen:

html

<h1>Advanced text semantics</h1>

<p>Let's start with a quote:</p>

<blockquote cite="https://developer.mozilla.org/en-US/docs/Learn/Accessibility">
  <p>
    <abbr title="HyperText Markup Language">HTML</abbr>, Hypertext Markup
    Language is by default accessible, if used correctly.
  </p>
</blockquote>

<p>
  <abbr title="Cascading Style Sheets">CSS</abbr>, Cascading Style Sheets, can
  also be used to make web pages more, or less, accessible.
</p>

<p>
  Chemical Formulae: H<sub>2</sub>O (Water), C<sub>2</sub>H<sub>6</sub>O
  (Ethanol).
</p>

<p>
  Dates:
  <time datetime="2019-12-25">December 25<sup>th</sup> 2019</time>
  (Christmas Day),
  <time datetime="2019-11-02">November 2<sup>nd</sup> 2019</time> (Día de los
  Muertos).
</p>

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden