Meisterung der HTML-Codeformatierung

Einführung

Beim Web-Entwicklung müssen wir manchmal programmbezogene oder computerbezogene Inhalte auf unseren Webseiten anzeigen. Wenn wir bestimmte Begriffe wie einen Funktionsnamen oder eine Variable anzeigen möchten, können wir das <code>-Tag verwenden, um sie einzuschließen. Dieses Tag ändert die Schriftfamilie des eingeschlossenen Textes in eine monospace-Schrift wie courier.

Hinweis: Sie können in 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.

Dies ist ein Guided Lab, das schrittweise Anweisungen bietet, um Ihnen beim Lernen und Üben zu helfen. Befolgen Sie die Anweisungen sorgfältig, um jeden Schritt abzuschließen und praktische Erfahrungen zu sammeln. Historische Daten zeigen, dass dies ein Labor der Stufe Anfänger mit einer Abschlussquote von 100% ist. Es hat eine positive Bewertungsrate von 100% von den Lernenden erhalten.

Fügen Sie das Code-Tag hinzu

Erstellen Sie zunächst in Ihrem lokalen System eine Datei index.html und öffnen Sie sie mit einem Code-Editor Ihrer Wahl.

Als nächstes fügen wir das <code>-Tag zu Ihrer HTML-Datei hinzu. Die Syntax für dieses Tag ist einfach. Es hat einen Start- und einen Endtag, die den Text umschließen, den Sie anzeigen möchten.

<body>
  <!-- Fügen Sie das Code-Tag hinzu -->
  <p>
    Dies ist ein Beispiel für die Verwendung des <code>code</code>-Tags in HTML.
  </p>
</body>

Im obigen Codeblock haben wir den Begriff code innerhalb des <code>-Tags eingeschlossen. Dadurch wird der eingeschlossene Text in einer monospace-Schrift angezeigt.

Fügen Sie das Pre-Tag hinzu, um Code in mehreren Zeilen anzuzeigen

Wenn Sie programmcode in mehreren Zeilen anzeigen müssen, verwenden Sie das <pre>-Tag zusammen mit dem <code>-Tag. Schauen wir, wie das funktioniert, indem wir folgenden Code zu Ihrer index.html-Datei hinzufügen.

<body>
  <!-- Verwenden Sie das Pre-Tag zusammen mit dem Code-Tag -->
  <pre>
      <code>
         function multiply(a, b) {
            return a * b;
         }
         // Rufen Sie die Funktion auf
         multiply(2, 3);
      </code>
   </pre>
</body>

In diesem Codeblock verwenden wir das <pre>-Tag, um anzuzeigen, dass wir den Code in einem blockförmigen Format anzeigen möchten. Innerhalb des <pre>-Tags fügen wir das <code>-Tag hinzu, um anzuzeigen, dass wir programmcode umschließen.

Verwenden Sie globale Attribute und Ereignisattribute

Sie können die globalen Attribute und Ereignisattribute mit dem <code>-Tag verwenden.

<body>
  <!-- Verwenden Sie globale Attribute mit dem Code-Tag -->
  <p>
    <code class="highlight" style="color: red" title="Dies ist ein Titel"
      >Einige Code</code
    >
  </p>
</body>

Im obigen Codeblock verwenden wir die Attribute class, style und title mit dem <code>-Tag.

Fügen Sie den Standard-CSS-Stil hinzu

Wenn Sie keinen Stil für das <code>-Tag angeben, wird es die Standard-CSS-Einstellungen verwenden. Die meisten Browser verwenden monospace als Standard-Schriftfamilie für das <code>-Tag.

<body>
  <!-- Standard-CSS-Stil für das HTML-Code-Tag -->
  <p>
    <code>Standard-CSS-Stil</code>
  </p>
</body>

Zusammenfassung

Das <code>-Tag wird verwendet, um programmbezogene oder computerbezogene Inhalte zu umschließen. Mit diesem Tag können Sie den eingeschlossenen Text in einer monospace-Schrift wie courier anzeigen. Sie können auch das <pre>-Tag zusammen mit dem <code>-Tag verwenden, um programmcode in mehreren Zeilen anzuzeigen. Das <code>-Tag unterstützt globale Attribute und Ereignisattribute. Wenn Sie keinen Stil für das <code>-Tag angeben, wird es die Standard-CSS-Einstellungen mit monospace als Standard-Schriftfamilie verwenden.

HTML Computer Code