Die Fähigkeit zu besitzen, den Code einer Seite zu durchsuchen, ist eine wichtige Fähigkeit für Webentwickler und Webdesigner. Auf diese Weise können Sie nicht nur wissen, wie eine Webseite erstellt wurde, sondern Sie können auch bei Bedarf Code analysieren und Änderungen vornehmen. Die Einbindung des Seitencodes in einen Browser ist einer der ersten Schritte, um diese Fähigkeit zu erlernen.

Um Seitencode im Browser zu aktivieren, müssen Sie die Entwicklertools verwenden, die die meisten modernen Browser bereitstellen. In Google Chrome können Sie beispielsweise die Entwicklertools öffnen, indem Sie mit der rechten Maustaste auf eine beliebige Stelle auf der Seite klicken und "Seitencode anzeigen" oder "Elementcode suchen" auswählen.

Nachdem Sie die Entwicklertools geöffnet haben, sehen Sie eine Leiste, in der der gesamte HTML-Code der Seite angezeigt wird. Sie können den Code anzeigen, die Seitenelemente in einer Baumstruktur anzeigen und die verschiedenen Attribute jedes Elements analysieren. Sie können die Such- und Filterfunktionen verwenden, um die Navigation im Code zu erleichtern.

Darüber hinaus können Sie mit den Entwicklertools Änderungen am Code der Seite direkt im Browser vornehmen. Sie können Fehler beheben, neue Elemente hinzufügen, Stile ändern und vieles mehr. Nachdem Sie die Änderungen vorgenommen haben, können Sie den geänderten Code speichern oder zur späteren Verwendung kopieren.

Die Einbindung des Seitencodes in einen Browser mag auf den ersten Blick schwierig erscheinen, aber mit Übung und Erfahrung werden Sie diese Fähigkeit schnell beherrschen. Das Anzeigen des Seitencodes hilft Ihnen, nicht nur besser zu verstehen, wie das Web funktioniert, sondern auch beim Erstellen und Ändern von Websites effizienter zu werden. Zögern Sie nicht, zu experimentieren und neue Möglichkeiten zu erkunden!

Wie verwende ich HTML-Tags, um Code auf einer Seite anzuzeigen

Sie müssen Code auf einer Webseite anzeigen, wenn Sie Unterrichtsmaterialien, Dokumentationen oder Präsentationen erstellen. HTML bietet mehrere Tags, mit denen Sie Code in einem praktischen Format auf einer Seite anzeigen können. Im Folgenden finden Sie zwei grundlegende Möglichkeiten, HTML-Tags zum Anzeigen von Code auf einer Seite zu verwenden.

Das Tag wird zum Vorformatieren von Text verwendet, einschließlich Leerzeichen und Zeilenumbrüchen. Es ermöglicht Ihnen, Text genau darzustellen und gleichzeitig seine ursprüngliche Struktur beizubehalten.

Beispiel für die Verwendung eines Tags :

Hallo, Welt!

Dies ist ein Beispiel für das Anzeigen von Code auf einer Seite mit einem Tag .

Das Tag wird verwendet, um einen Codeausschnitt auf einer Seite anzugeben. Es wird normalerweise in anderen Elementen verwendet, z. B.

oder um anzugeben, dass dieses Snippet Code ist.

Beispiel für die Verwendung eines Tags :

Beispiel für die Verwendung eines Tags : console.log('Hello, world!');

Beispiel für die Verwendung des Tags : console.log('Hello, world!');

Bei beiden Methoden können Sie den Code auf der Seite anzeigen, um sicherzustellen, dass er formatiert und lesbar ist. Wählen Sie diejenige aus, die am besten zu Ihrer spezifischen Situation und Ihrem Seitenkontext passt.

Tags zum Formatieren von Text

Grundlegende Tags zum Formatieren von Text:

• - fettgedruckte Textauswahl;
• - kursiver Text;
• - text unterstreichen;
• - text durchgestrichen;
• - tiefgestellter Index;
• - oberer Index;
• - text mit Farbe hervorheben;
• - anzeige von Text in einer Schriftart mit fester Breite;
• - textgröße reduzieren;
• - erhöhung der Textgröße;
• - hervorhebung des Titels des Werkes;
• - anzeige von Text als Tastaturzeichen;
• - Variablenzuweisung im Programmcode;
• - abkürzung oder Abkürzung;

Diese Tags können zusammen mit anderen Markupelementen verwendet werden, um das gewünschte Erscheinungsbild des Textes zu erzielen. In der Regel kann der Text sowohl über CSS-Stile als auch über diese HTML-Tags formatiert werden.

Beispiele für die Verwendung von HTML-Tags zum Anzeigen von Code

HTML bietet mehrere Tags, mit denen Code auf einer Webseite angezeigt werden kann. Diese Tags helfen Ihnen, eine lesbare und benutzerfreundliche Anzeige für Personen zu erstellen, die Code studieren oder analysieren.

: Dieses Tag wird verwendet, um den Bitcode anzugeben. Es kann nützlich sein, wenn Sie den Code in eine Zeile einfügen oder einen separaten Block mit Einzug für den Code erstellen möchten. Anwendungsbeispiel:

var x = 10; 

var x = 10;var y = 5;console.log(x + y);

Ctrl + C

Привет, мир!

Die Verwendung dieser Tags hilft Ihnen, die visuelle Darstellung des Codes auf Ihrer Webseite zu verbessern und den Benutzern verständlicher zu machen.

Darstellung von Code mit Syntaxhervorhebung

Um die Prism-Bibliothek zu verwenden.js, Sie müssen einen Verweis auf die entsprechende Stylesheet-Datei und die Skriptdatei im Abschnitt hinzufügen head ihre Ausweise bitte:

Danach können Sie den Code markieren, den Sie mit dem Tag hervorheben möchten, und die Programmiersprache mit der language-* -Klasse angeben. Zum Beispiel wird die Language-Javascript-Klasse verwendet, um JavaScript-Code hervorzuheben :

// Ваш код на JavaScript здесь

Nachdem Sie Code mit einer Programmiersprache hinzugefügt haben, müssen Sie die Prism-Funktion aufrufen.highlightAll(), um Syntaxhervorhebung auf Ihren Code anzuwenden. Dies kann beispielsweise nach dem Laden der Seite erfolgen:

Danach wird Ihr Code mit Syntaxhervorhebung im Browser angezeigt.

Außer der Prism-Bibliothek.js, es gibt andere Tools und Bibliotheken, die auch Code mit Syntaxhervorhebung darstellen können. Einige von ihnen enthalten Bibliotheken wie Highlight.js, CodeMirror, Monaco Editor und andere.

Tags zum Erstellen von Quellcodeverknüpfungen

Wenn eine Webseite Code enthält, ist es wichtig, diesen Code mit anderen Entwicklern zu teilen. Dazu können Sie Tags verwenden, um Links zum Quellcode zu erstellen.

HTML stellt mehrere Tags bereit, mit denen Sie Links zum Quellcode erstellen können. Im Folgenden sind einige von ihnen aufgeführt:

: Этот тег используется для обозначения фрагментов кода на веб-странице. Он может быть использован внутри тега для создания ссылки на исходный код. Например:
Ссылка на script.js

: Dieses Tag wird verwendet, um vorformatierten Text anzuzeigen, einschließlich Leerzeichen und Zeilenumbrüchen. Es kann verwendet werden, um den Quellcode auf einer Webseite anzuzeigen. Zum Beispiel:
function helloWorld()

Mit diesen Tags können Sie Links zum Quellcode erstellen und ihn mit anderen Entwicklern teilen. Dies wird Ihnen helfen, zusammenzuarbeiten und Ihr Projekt zu fördern.

Anzeigen von Kommentaren im Code

Tags werden verwendet, um dem HTML-Code einen Kommentar hinzuzufügen. Alles, was zwischen diesen Tags liegt, wird als Kommentar betrachtet und wird vom Browser ignoriert, wenn die Webseite angezeigt wird.

Obwohl die Kommentare beim Anzeigen der Seite im Browser nicht sichtbar sind, wird empfohlen, sie beim Entwerfen der Website zu verwenden. Sie helfen, die Lesbarkeit und das Verständnis von Code zu verbessern, insbesondere wenn Codeblöcke komplex oder voluminös werden.

Bemerkt: Die Verwendung relevanter Kommentare macht den Code für andere Entwickler zugänglicher und verständlicher, die Ihren Code in Zukunft anzeigen oder ändern können.

1. Verwenden eines Tags

2. Verwenden eines Elements

Sie können ein Element verwenden, um die Ergebnisse der Codeausführung an einer bestimmten Stelle auf der Seite anzuzeigen. Dazu müssen Sie zuerst ein Element mit einer bestimmten ID erstellen, dann mit JavaScript auf dieses Element zugreifen und die innerHTML-Funktion verwenden, um der Seite Ergebnisse hinzuzufügen:

3. Verwenden von Funktionen und Ereignissen

Показать результатfunction showResult()