Tags für die Darstellung von Code, Zitate und Listen

Dieser Artikel erklärt Tags für die Darstellung von Code, Zitate und Listen.

Dies erklärt, wie man Quellcode, Zitate, Anmerkungen und Listen in HTML schreibt.

YouTube Video

Code-anzeigebezogene Tags

<code> Tag

1Inline code example: <code>let x = 10;</code>

• Das <code> Tag ist ein Inline-Element, das verwendet wird, um Code oder Programmausschnitte in einem HTML-Dokument anzuzeigen.
• Standardmäßig wird es in einer Monospace-Schriftart angezeigt, was die Lesbarkeit von Code verbessert.

<pre> Tag

function hello() {
    console.log("Hello, world!");
}

1<pre>
2function hello() {
3    console.log("Hello, world!");
4}
5</pre>

• Der <pre> Tag wird verwendet, um Text in seinem ursprünglichen Format innerhalb eines HTML-Dokuments anzuzeigen. Dieses Tag bewahrt Leerzeichen und Zeilenumbrüche im Text, sodass das ursprüngliche Format erhalten bleibt. Es wird hauptsächlich verwendet, um Inhalte anzuzeigen, die eine Formatierung beibehalten müssen, wie z.B. Programmcode, Poesie oder Textkunst.

    function hello() {
        console.log("Hello, world!");
    }
    

1    <pre>
2    function hello() {
3        console.log("Hello, world!");
4    }
5    </pre>

• Im <pre> Tag werden Leerzeichen erhalten, daher erscheint, wenn ein Leerzeichen vor dem Schlusstag liegt, eine leere Zeile am Ende, wie in diesem Beispiel.

<samp> Tag

1Sample system output: <samp>Error: Invalid input.</samp>

• Das <samp> Tag ist ein HTML-Tag, das verwendet wird, um die Ausgabe eines Computerprogramms darzustellen. Es wird verwendet, um Ausgaben oder Nachrichten von einem Programm oder System anzuzeigen.

<kbd> Tag

1Keyboard input example: <kbd>Ctrl</kbd> + <kbd>C</kbd>

• Das <kbd> Tag ist ein HTML-Tag, das verwendet wird, um Benutzereingaben darzustellen. Es wird verwendet, um Tastatureingaben oder Befehlsangaben, wie z.B. Tastenkombinationen, anzuzeigen.

<var> Tag

1Variable example: <var>x</var> = 5;

• Das <var> Tag wird verwendet, um Variablen in einem Programm oder einer Gleichung darzustellen. Es wird verwendet, um Variablennamen oder Variablen in mathematischen Formeln hervorzuheben.

Tags, die für Zitate usw. verwendet werden.

<blockquote> Tag

1<blockquote>
2    This is a blockquote for longer quotations.
3</blockquote>

• Das <blockquote> Tag wird verwendet, um lange Zitate oder Text aus anderen Quellen darzustellen und wird typischerweise auf Blockebene angezeigt.

<q> Tag

1This is a short quote: <q>Short quote example.</q>

• Das <q> Tag ist ein Inline-Element, das verwendet wird, um kurze Zitate darzustellen. Dieses Tag kann verwendet werden, um einen Teil eines Textes oder einen Satz als Zitat zu kennzeichnen. Text, der in einem <q> Tag eingeschlossen ist, wird typischerweise mit Anführungszeichen angezeigt. Das <q> Tag kann auch verschachtelt werden. In diesem Fall werden normalerweise verschiedene Arten von Anführungszeichen für das innere Zitat verwendet.

<cite>-Tag

1Reference to a book: <cite>The Great Gatsby</cite>

• Das <cite> Tag ist ein Inline-Element, das verwendet wird, um die Quelle eines Zitats oder einer Referenz anzugeben. Es wird hauptsächlich verwendet, um die Quelle eines Werkes anzugeben, wie zum Beispiel Titel von Werken, Artikeln, Aufsätzen, Webseiten oder Büchern.

<address>-Tag

1<address>123 Main Street, Springfield, USA</address>

• Das <address>-Tag wird verwendet, um Kontaktinformationen zu repräsentieren, die sich auf den Autor oder Eigentümer eines Dokuments oder Abschnitts beziehen. Dieses Tag enthält typischerweise E-Mail-Adressen, Telefonnummern, physische Adressen und ähnliche Informationen.

Das <time>-Tag

1<time datetime="2024-12-04">December 4, 2024</time>

• Das <time>-Tag wird verwendet, um einen bestimmten Zeitpunkt, eine Dauer oder eine wiederkehrende Zeit darzustellen. Dieses Tag kann Daten und Zeiten enthalten, um dem Dokument semantische Bedeutung zu verleihen.

Das <data>-Tag

1<data value="2024">Current Year</data>

• Das <data>-Tag wird verwendet, um lesbare Inhalte mit maschineninterpretierbaren Werten zu verknüpfen. Dieses Tag ist nützlich, um Daten so zu markieren, dass sie leicht von Programmen verarbeitet werden können.

<details>- und <summary>-Tags

1<details>
2    <summary>More information</summary>
3    <p>Here is some additional content.</p>
4</details>

• Das <details>-Tag erstellt ein ausklappbares und einklappbares Widget. Durch die Verwendung mit dem <summary>-Tag können Sie einen anklickbaren Bereich einrichten, um weitere Details anzuzeigen, der oft für interaktive Anzeigen wie 'Mehr lesen' verwendet wird.

Tags für die Listendarstellung

<ul>-Tag

1<ul>
2    <li>Item 1</li>
3    <li>Item 2</li>
4    <li>Item 3</li>
5</ul>

• Dies ist ein Tag, das verwendet wird, um ungeordnete Listen zu erstellen. Jedes Element in der Liste wird mit dem <li>-Tag definiert. Standardmäßig wird vor jedem Listenelement ein schwarzer Punkt angezeigt.

<ol>-Tag

1<ol>
2    <li>Step 1</li>
3    <li>Step 2</li>
4    <li>Step 3</li>
5</ol>

• Dieses Tag wird verwendet, um eine geordnete Liste zu erstellen. Jedes Element in der Liste wird mit dem <li>-Tag definiert. Standardmäßig werden Zahlen angezeigt, um die Reihenfolge der Elemente zu kennzeichnen.

<dl>-Tag

1<dl>
2    <dt>Term 1</dt>
3    <dd>Definition of Term 1</dd>
4    <dt>Term 2</dt>
5    <dd>Definition of Term 2</dd>
6</dl>

• Dieses Tag wird verwendet, um eine Liste von Paaren aus Begriffen und Definitionen oder Namen und Einzelheiten zu erstellen. Die Listenelemente werden mit den <dt> und <dd>-Tags definiert. Der Begriff oder Name wird im <dt>-Tag geschrieben, und die Definition oder Erklärung im <dd>-Tag.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video