CodeGym /Kurse /Frontend SELF DE /Sonderzeichen

Sonderzeichen

Frontend SELF DE
Level 4 , Lektion 5
Verfügbar

5.1 Maskierung von Zeichen

In HTML werden Sonderzeichen, auch bekannt als "character entities", verwendet, um Zeichen darzustellen, die sonst als Teil der HTML-Syntax interpretiert würden. Diese Zeichen umfassen beispielsweise spitze Klammern, das Und-Zeichen, Leerzeichen und Zeichen verschiedener Sprachen und Zeichensätze.

Spitze Klammern und Und-Zeichen

Um Zeichen darzustellen, die in HTML als Teil eines Tags oder der Syntax verwendet werden, müssen spezielle Codes verwendet werden:

  • < : &lt;
  • > : &gt;
  • & : &amp;

Beispiel der Verwendung:

HTML
    
      <p>Verwende &lt; und &gt; für spitze Klammern und &amp; für das Und-Zeichen.</p>
    
  

Anführungszeichen

Zum Darstellen von doppelten und einfachen Anführungszeichen innerhalb von HTML-Attributen:

  • " : &quot;
  • ' : &apos;

Beispiel der Verwendung:

HTML
    
      <p>Für Anführungszeichen verwende &quot;doppelte&quot; und &apos;einfache&apos; Anführungszeichen.</p>
    
  

5.2 Leerzeichen und geschützte Leerzeichen

In HTML werden mehrere aufeinanderfolgende Leerzeichen immer als ein Leerzeichen angezeigt. Um Leerzeichen zu erhalten oder geschützte Leerzeichen zu erstellen, werden spezielle Zeichen verwendet:

  • Leerzeichen: &nbsp;
  • Schmales Leerzeichen: &thinsp;
  • Volles Leerzeichen: &emsp;
  • Halbleerzeichen: &ensp;

Beispiel der Verwendung:

HTML
    
      <p>Dieser&nbsp;Text&nbsp;enthält&nbsp;mehrere&nbsp;geschützte&nbsp;Leerzeichen.</p>
    
  

Sonderzeichen und diakritische Zeichen

HTML unterstützt viele Sonderzeichen für verschiedene Sprachen und Zeichensätze. Zum Beispiel:

  • © : &copy;
  • ® : &reg;
  • ™ : &trade;
  • € : &euro;
  • £ : &pound;

Beispiel der Verwendung:

HTML
    
      <p>Urheberrecht &copy; 2024. Alle Rechte vorbehalten. Preis: 50 &euro;</p>
    
  

Mathematische Zeichen

HTML unterstützt eine breite Palette von mathematischen Zeichen:

  • ± : &plusmn;
  • × : &times;
  • ÷: &divide;
  • ≤ : &le;
  • ≥: &ge;
  • ∞ : &infin;
  • √ : &radic;

Beispiel der Verwendung:

HTML
    
      <p>Lösung der Gleichung: x &ge; 5 und x &le; 10. Verwende &radic; für die Wurzel.</p>
    
  

5.3 Pfeile und andere grafische Symbole

HTML unterstützt auch Pfeile und andere grafische Symbole:

  • ← : &larr;
  • ↑ : &uarr;
  • → : &rarr;
  • ↓ : &darr;
  • ↔ : &harr;
  • ♠ : &spades;
  • ♣ : &clubs;
  • ♥ : &hearts;
  • ♦ : &diams;

Beispiel der Verwendung:

HTML
    
      <p>Richtungen: &larr; links, &uarr; oben, &rarr; rechts, &darr; unten.</p>
      <p>Kartensymbole: &spades; &hearts; &diams; &clubs;</p>
    
  

Vollständige Liste der Sonderzeichen

Eine vollständige Liste der Sonderzeichen findest du in der HTML-Dokumentation oder auf spezialisierten Webressourcen wie W3Schools oder der HTML Character Entities Reference.

5.4 Verwendung von Emojis

Emojis sind ein integraler Bestandteil der modernen digitalen Kommunikation geworden. Sie werden verwendet, um Emotionen, Ideen und Objekte in Textnachrichten, sozialen Netzwerken und auf Webseiten auszudrücken. In HTML können Emojis auf verschiedene Arten verwendet werden.

Verwendung von Unicode

Emojis können in ein HTML-Dokument mit Unicode-Zeichen eingefügt werden. Jedes Emoji hat einen einzigartigen Code, der zur Darstellung verwendet werden kann.

Beispiel der Verwendung von Unicode:

HTML
    
      <p>Lächelndes Gesicht: 😀</p>
      <p>Herz: ❤️</p>
      <p>Daumen hoch: 👍</p>

    
  

Um Emojis mit Unicode einzufügen, musst du ihren hexadezimalen Code verwenden, indem du ihn mit &#x beginnst und mit ; abschließt.

Beispiel der Verwendung von hexadezimalen Codes:

HTML
    
      <p>Lächelndes Gesicht: &#x1F600;</p>
      <p>Herz: &#x2764;&#xFE0F;</p>
      <p>Daumen hoch: &#x1F44D;</p>

    
  

Du musst dir das nicht merken: Es reicht aus, sie im Internet zu suchen, wenn du sie brauchst, und keine Angst zu haben, wenn du sie im Code anderer Leute siehst 😊

1
Опрос
Grundlegende HTML-Tags,  4 уровень,  5 лекция
недоступен
Grundlegende HTML-Tags
Grundlegende HTML-Tags
Kommentare
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION