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
Detaillierte Erklärung von Prototypen und Prototypenketten in JavaScript
Inhaltsverzeichnis Prototyp-Kettendiagramm Grundl...
Kennen Sie die häufigsten MySQL-Designfehler?
Dank der Entwicklung des Internets können wir die...
Implementierung von Zugriffskontrolle und Verbindungsbeschränkung basierend auf Nginx
Vorwort Das integrierte Modul von Nginx unterstüt...
Native JS-Implementierung der Lupenkomponente
In diesem Artikelbeispiel wird der spezifische Co...
Der einfachste Weg, einen neuen Benutzer zu erstellen und Berechtigungen für MySQL zu erteilen
Erstellen Sie einen Benutzer: Erstellen Sie den B...
Was ist Flex und ein ausführliches Tutorial zur Flex-Layout-Syntax
Flexibles Layout Flex ist die Abkürzung für Flexi...
So kapseln Sie die Rich-Text-Komponente von WangEditor in Angular
Die Rich-Text-Komponente ist eine sehr häufig ver...
JS-Implementierung eines Karussellbeispiels
In diesem Artikel wird der spezifische JS-Code zu...
MYSQL Left Join-Optimierung (10 Sekunden bis 20 Millisekunden)
Inhaltsverzeichnis 【Funktionshintergrund】 [Rohes ...
Beispielcode zum Zeichnen von Doppelpfeilen in gängigen CSS-Stilen
1. Mehrere Aufrufe eines einzelnen Pfeils Sobald ...
Detaillierte Erläuterung der FTP-Umgebungskonfigurationslösung (vsftpd)
1. Installieren Sie die vsftpd-Komponente Install...
Zusammenfassung der für die Front-End-Entwicklung erforderlichen allgemeinen Toolfunktionen
1. Zeitformatierung und andere Methoden Es wird e...
Springboot integriert die Docker-Bereitstellung, um zwei Möglichkeiten zum Erstellen von Docker-Images zu implementieren
Docker ist eine Open-Source-Engine, mit der sich ...
So verwenden Sie das Marquee-Tag im XHTML-Code
Im Forum habe ich gesehen, dass der Internetnutzer...
Lösung für die langsame Reaktion des Tomcat-Servers
1. Analytisches Denken 1. Beseitigen Sie die eige...