Inline-Spans
Teil des Abschnitts Fundamentals der HTML-Journey von Coddy — Lektion 26 von 60.
Was ist, wenn wir einen Satz haben und nur ein einzelnes Wort oder einen kleinen Teil davon hervorheben müssen? Wir können den <span>-Tag verwenden! Er hilft uns dabei, Stile anzuwenden oder Änderungen an nur einem bestimmten Teil des Textes vorzunehmen, ohne den Rest zu beeinflussen.
Hier ist die grundlegende Syntax für die Verwendung eines span in HTML:
<span>This is some text.</span>Hier ist ein Beispiel dafür, wie man span-Tags verwendet, um einen Teil des Textes innerhalb eines Absatzes hervorzuheben:
<p>This is a <span style="color: blue;">blue</span> word.</p>In diesem Beispiel wird das Wort „blue“ in blauer Farbe angezeigt.
Wir werden später mehr über das style-Attribut erfahren!
Aufgabe
EinfachGegeben ist ein HTML-Dokument mit einem Absatz. Ihre Aufgabe ist es, ein <span>-Tag zu verwenden, um den Text "qwerty12345" zu umschließen.
Spickzettel
Das <span>-Tag wird verwendet, um Stile anzuwenden oder Änderungen an einem bestimmten Teil des Textes vorzunehmen, ohne den Rest zu beeinflussen.
Grundlegende Syntax:
<span>This is some text.</span>Beispiel mit Inline-Styling:
<p>This is a <span style="color: blue;">blue</span> word.</p>Probier es selbst
<!DOCTYPE html>
<html>
<body>
<!-- Schreibe den Code hier -->
<p>The secret password is qwerty12345.</p>
</body>
</html>
Teste dich selbstDiese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.
Alle Lektionen in Fundamentals
2Text und Formatierung
ÜberschriftenAbsätzeZeilenumbrücheFetter und kursiver TextNochmals fett und kursivWiederholung – Formatierung8Formulare und Eingaben Teil 1
Formular-GrundlagenTexteingabenInput-AttributePasswortfeldLabels für EingabenZusammenfassung – Einfaches Formular11Event-Registrierungsseite
ProjektübersichtHeader-Bereich
Event-Details-BereichRegistrierungsformularFooter-Bereich6Seitenlayout
Bereiche (Divisions)Inline-SpansSemantische TagsSections und ArticlesZusammenfassung – Layout9Formulare und Eingaben Teil 2
Radio-ButtonsCheckboxenDropdownsButtonsButtons in FormularenWiederholung - Formulare #1Wiederholung - Formulare #212Abschlussherausforderungen
Einfache ProfilkarteEvent-EinladungskarteEinfache ArtikelseiteLieblingsbücher-Liste