XHTML-Erste-Schritte-Tutorial: Einfache Webseitenerstellung
|
Erstellen Sie Ihre erste Webseite in einer Minute: Versuchen wir, eine einfache Webseite zu erstellen. Ich hoffe, Sie können uns folgen. Es dauert nur eine Minute. Jetzt wissen Sie vielleicht nicht, was diese spitzen Klammern „<>“ und die darin enthaltenen Buchstaben bedeuten, aber keine Sorge, wir erklären es Ihnen im nächsten Tutorial. Starten Sie zunächst den Editor oder erstellen Sie an einer beliebigen Stelle ein neues Textdokument und geben Sie in den Editor folgenden Inhalt ein: Nachfolgend der zitierte Inhalt: <html> <Kopf> <title>Ich bin der Titel dieser Seite</title> </Kopf> <Text> <p>Dies ist meine erste Webseite. </p> </body> </html> Nach der Eingabe speichern Sie die Datei und nennen Sie sie „index.html“. (Klicken Sie auf „Datei“ -> „Speichern unter“. Geben Sie „index.html“ in die Spalte „Dateiname“ ein, wählen Sie „Alle Dateien“ in der Spalte „Dateityp“ und klicken Sie dann auf die Schaltfläche „Speichern“) Nach dem Speichern doppelklicken Sie auf die Datei und der Browser öffnet automatisch die Webseite. Bitte überprüfen Sie, ob Ihre Webseite mit dieser Seite identisch ist. Wenn ja, haben Sie Ihre erste relativ einfache Webseite erfolgreich fertiggestellt. Bitte beachten Sie, dass dies nur eine einfache Seite ist und obwohl sie hinsichtlich der Syntax dem XHTML-Standard entspricht, fehlen dennoch einige Inhalte, um eine vollständige, W3C-konforme XHTML-Webseite zu sein. Die relevanten Inhalte werden in den folgenden Tutorials vorgestellt. Diese Seite dient lediglich der Erläuterung einiger grundlegender XHTML-Kenntnisse. Erklärung der Grundkenntnisse <br />Die Webseite, die wir gerade erstellt haben, beginnt mit <html> und endet mit </html>, was jeweils den Anfang und das Ende der Webseitendatei darstellt. Im Englischen bedeutet „head“ Kopf und „body“ Körper. Die Teile <head></head> und <body></body> einer Webseite stellen jeweils den „Kopf“ und den „Hauptteil“ der Webseite dar. Vielleicht ist Ihnen aufgefallen, dass sich im „Header“ unserer Webseite ein <title></title> befindet. Das Wort „title“ bedeutet Titel, und der Titel der Webseite wird in der Titelleiste über dem Browser angezeigt. Der Hauptteil der Webseite, also der Inhalt zwischen den Tags <body> und </body>, wird im Browser als Haupttext angezeigt. Diese Webseite ist sehr einfach und enthält wenig Inhalt im Kopf und Hauptteil. Wir werden den Inhalt der Webseite in nachfolgenden Tutorials schrittweise erweitern. Aber denken Sie jetzt bitte an ein Konzept: Der Kopf einer Webseite wird für den Browser geschrieben und nicht auf der Seite angezeigt, während der Hauptteil für die Benutzer der Website geschrieben wird und der Inhalt ist, den der Browser anzeigt. Fehlerbeispiele einer XHTML-Parodie für Anfänger <br />Öffnen Sie die folgenden beiden Fehlerbeispiele und sehen Sie sie sich an. Ihr Code weist schwerwiegende Fehler auf, der Browser zeigt jedoch beide Webseiten korrekt an. Beispiel 1: Der Körper ist im Kopf <html> <Kopf> <title>Ich bin der Titel dieser Seite</title> <p>Dies ist meine erste Webseite. </p> </Kopf> <Text> </body> </html> Wenn Sie sich die Webseite oben ansehen, wird der Inhalt zwischen <head> und </head> auf der Seite normal angezeigt. Es ist jedoch ein komischer Fehler, den Körper in den Kopf zu stecken. Beispiel 2: Der Kopf liegt unter dem Hals <html> <Kopf> </Kopf> <Text> <title>Ich bin der Titel dieser Seite</title> <p>Dies ist meine erste Webseite. </p> </body> </html> Die Anpassungsfähigkeit des Browsers ist wirklich beeindruckend; er kann Ihren Kopf erkennen, selbst wenn er sich in Ihrem Körper befindet. Wenn Sie in die Titelleiste schauen, wird der Titel einwandfrei angezeigt. Aber bitte machen Sie bei der praktischen Anwendung nicht so kleine Fehler. Dies kann schwerwiegende Folgen haben: Suchmaschinen listen Ihre Website möglicherweise nicht auf, und Freunde, die Ihre Website mit Mobiltelefonen oder anderen Mobilgeräten durchsuchen, stoßen möglicherweise auf unbekannte Fehler. Lassen Sie uns nun kurz auf die Kerninhalte von XHTML eingehen. |
<<: Eine kurze Einführung in die Basiskomponenten der VUE uni-app
Artikel empfehlen
Tutorial zur Installation des neuesten MySQL 8.0.18 mithilfe eines komprimierten Pakets unter Win10 64-Bit (mit Bildern und Text)
WIN10 64-Bit installieren Sie das neueste MySQL8....
Grafisches Tutorial zur Installation und Konfiguration des MySQL Community Server 8.0.16 unter Windows
Ich habe in letzter Zeit viel MySQL-bezogene Synt...
Detaillierte Erläuterung der Keep-Alive- und Unified-Routing-Verarbeitung von Vue3-Cache-Seiten
Inhaltsverzeichnis 1. Einleitung 2. Verwendung 1....
Natives JS zur Implementierung der E-Mail-Eingabeaufforderung im Anmeldefeld
Dieser Artikel beschreibt eine native JS-Implemen...
Implementierung von vite+vue3.0+ts+element-plus zum schnellen Erstellen eines Projekts
Inhaltsverzeichnis Vite-Funktion Umgebung verwend...
Designtheorie: Menschenorientiertes Designkonzept
<br />Als sich das Denken in Ost und West sp...
Detaillierte Erklärung des Rewrite-Moduls von Nginx
Das Umschreibmodul ist das Modul ngx_http_rewrite...
Vue-Formular-Post-Anforderung kombiniert mit Servlet zur Realisierung der Datei-Upload-Funktion
Code der Front-End-Testseite: <Vorlage> <...
Drei Möglichkeiten, das längste Wort in einem String in JavaScript zu finden (empfohlen)
Dieser Artikel basiert auf dem Free Code Camp Bas...
So löschen Sie den Timer elegant in Vue
Inhaltsverzeichnis Vorwort Optimierung Ableitungs...
Grafisches Tutorial zum Herunterladen und Installieren von MySQL 5.7 und höher
1. Herunterladen 1. Download-Adresse der offiziel...
Beispiel für die Installation und Bereitstellung von Docker unter Linux
Nachdem Sie den folgenden Artikel gelesen haben, ...
Beenden Sie eine Reihe von MySQL-Datenbanken mit nur einem Shell-Skript wie diesem (empfohlen)
Ich wurde am frühen Morgen durch einen Anruf gewe...
So löschen Sie Ordner, Dateien und Dekomprimierungsbefehle auf Linux-Servern
1. Ordner löschen Beispiel: rm -rf /usr/java Das ...
So verhindern Sie Event-Bubbling in JavaScript
Wir müssen darauf achten, dass die Eigenschaften ...