LabEx
AnmeldenKostenlos beitreten

HTML-Tasteneingabe

HTMLHTMLBeginner
Jetzt üben

💡 Dieser Artikel wurde von AI-Assistenten übersetzt. Um die englische Version anzuzeigen, können Sie hier klicken

Einführung

Das HTML <kbd>-Tag wird verwendet, um Tasteneingabeelemente für Benutzer auf einer Webseite zu erstellen. Dieses Tag stellt einen Abschnitt von Inline-Text dar, der die Eingabe im Format von Text aus der Tastatur, Sprach-Eingabe oder jeder anderen Texteingabe über die Tastatur darstellt.

In diesem Lab werden Sie lernen, wie Sie das HTML kbd-Tag verwenden, um Tasteneingabeelemente in Ihren Webseiten zu erstellen.

Hinweis: Sie können im index.html programmieren und lernen, wie Sie HTML in Visual Studio Code schreiben. Klicken Sie bitte auf 'Go Live' in der unteren rechten Ecke, um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Einrichten der HTML-Datei

Erstellen Sie eine neue HTML-Datei mit dem Namen index.html und legen Sie die grundlegende Struktur eines HTML-Dokuments fest.

Fügen Sie den folgenden Code in Ihre index.html-Datei hinzu, um die Dokumentstruktur einzurichten:

<!doctype html>
<html>
  <head>
    <title>Keyboard Input Elements using HTML kbd Tag</title>
  </head>
  <body>
    <!-- Add content here -->
  </body>
</html>

Fügen Sie Tasteneingabeelemente hinzu, indem Sie das -Tag verwenden

Fügen Sie Tasteneingabeelemente hinzu, indem Sie das <kbd>-Tag verwenden, überall dort, wo Sie ein Tasteneingabeelement auf Ihrer Webseite kennzeichnen möchten.

Fügen Sie den folgenden Code innerhalb des <body>-Tags hinzu, um ein Tasteneingabeelement mit dem <kbd>-Tag für den Befehl "STRG + V" zu definieren:

<p>To paste text press <kbd>Ctrl</kbd> + <kbd>V</kbd></p>

Fügen Sie nun den folgenden Code innerhalb des <body>-Tags hinzu, um ein Tasteneingabeelement mit dem <kbd>-Tag für den Befehl "UMSCHALT + ENTER" zu definieren:

<p>To create a new line press <kbd>Shift</kbd> + <kbd>Enter</kbd></p>

Verschachteln des <kbd>-Tags innerhalb des <samp>-Tags

Wenn Sie angeben möchten, dass die Eingabe durch das System an den Benutzer zurückgegeben wurde, können Sie das <kbd>-Tag innerhalb des <samp>-Tags verschachteln.

Fügen Sie den folgenden Code innerhalb des <body>-Tags hinzu, um das <kbd>-Tag innerhalb des <samp>-Tags zu verschachteln, um eine durch das System zurückgegebene Eingabe anzugeben:

<p>
  The entered value is:<samp><kbd>Enter Value</kbd>:</samp>
</p>

Zusammenfassung

In diesem Lab haben Sie gelernt, wie Sie das HTML <kbd>-Tag verwenden, um Tasteneingabeelemente in Webseiten zu erstellen. Sie können dieses Tag überall verwenden, wo Sie ein Tasteneingabeelement auf Ihrer Webseite kennzeichnen möchten. Das <kbd>-Tag kann innerhalb des <samp>-Tags verschachtelt werden, um eine an den Benutzer zurückgegebene Eingabe durch das System anzugeben.

Verwandt HTML Kurse
HTML für Anfänger

HTML für Anfänger

HTML
Anfänger
Schnellstart mit HTML

Schnellstart mit HTML

HTML
Anfänger
Entwickeln Sie eine Tic-Tac-Toe-Webanwendung

Entwickeln Sie eine Tic-Tac-Toe-Webanwendung

HTMLCSSJavaScript
Anfänger