Grundlegende Struktur von HTML-Dokumenten (Grundkenntnisse zur Erstellung von Webseiten)

Grundlegende Struktur von HTML-Dokumenten (Grundkenntnisse zur Erstellung von Webseiten)

HTML-Funktionsprinzip:

1. Lokaler Vorgang: Öffnen Sie die HTML-Datei mit einem Browser

2. Fernzugriffsvorgang: Lokaler Browser greift auf Remote-Server (Tomcal) zu.

Der Dateiname der Webseite sollte möglichst keine chinesischen Zeichen enthalten, da die Webseitendateien in Zukunft auf dem Server gespeichert werden. Es wird empfohlen, HTML-Dateien in Englisch zu speichern. Sie können entweder die Dateierweiterung .htm oder .html verwenden.

2. Grundstruktur eines HTML-Dokuments

1. Dokumentskelett: Alle Webseitendateien bestehen normalerweise aus den folgenden vier Tag-Paaren, die das Dokumentskelett bilden


Code kopieren
Der Code lautet wie folgt:

<html>
<Kopf>
<title>Titel der Webseite</title>
</Kopf></p> <p><Körper>
Hier platzieren Sie den Inhalt, der auf der Webseite angezeigt werden soll
</body>
</html>

<html>....</html>: markiert den Anfang und das Ende einer Webseite. Alle HTML-Elemente müssen zwischen diesen Tags platziert werden.
<head>...</head>: identifiziert die Header-Informationen der Webseitendatei, wie z. B. Titel, Suchmaschinen-Schlüsselwörter usw. Der darin enthaltene Inhalt wird zuerst geladen
<title>....</title>: Identifiziert den Titel der Webseitendatei
<body>....</body>: bezeichnet den Hauptteil der Webseitendatei, also den sichtbaren Inhalt der Seite

2. Meta-Tags

Das Meta-Tag wird verwendet, um Dateiinformationen zu definieren und die Webseite zu beschreiben, um die Suche in Suchmaschinen zu erleichtern. Es sollte zwischen <head> <head/> platziert werden.

Schlüsselwörter festlegen: (kurz, für Suchmaschinen)
<meta name="keywords" content="value"/> value gibt das zu setzende Schlüsselwort an. Mehrere Schlüsselwörter werden durch "," getrennt und eine Beschreibung wird gesetzt: (wird verwendet, um Schlüsselwörter zu erweitern oder einen Überblick über den Inhalt der Webseite zu geben)
<meta name="description" content="value"/> value gibt die Beschreibung an, die gesetzt werden soll. Mehrere Beschreibungen werden durch getrennt, um den Autor festzulegen:
<mate name="author" content="作者名" />Der Name des Autors ist normalerweise der Name des Unternehmens. Legen Sie den Code für die Webseite fest:
<meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
Stellen Sie ein, dass die Seite zu einem festgelegten Zeitpunkt springt:
<meta http-equiv="refresh" content="2;url=http://www.baidu.com" /> (content="2;url=http://www.baidu.com" 2 gibt an, dass die Webseite nach einer bestimmten Anzahl von Sekunden zum durch die URL angegebenen Ziel springt)

Beschreibt die Version der Webseite:
<meta name="überarbeitet" content="html4.01">
Weitere Webseiteninformationen können festgelegt werden:
<meta name="others" content="Dies ist meine erste Website. Die Hauptinhalte der Website umfassen Animationen, Musik, Artikel, Blogs usw. Jeder ist herzlich eingeladen, sie zu besuchen!">

Beschreibt, mit welcher Software die Webseite erstellt wurde:
<meta name="generator" content="Notizblock">


Code kopieren
Der Code lautet wie folgt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
<meta name="keywords" content="Webdesign, Webseiten lernen" />
<meta name="description" content="Wie man Webdesign lernt, Methoden zum Erlernen von Webdesign, HTML-Handbuch Chinesisch" />
<meta name="author" content="123WORDPRESS.COM" />
<meta http-equiv="aktualisieren" content="2;url=http://www.baidu.com" />
<meta name="überarbeitet" content="html4.01">
<title>Grundstruktur des HTML-Dokuments_Meta-Tag</title>
</Kopf>
<Text>
Das Meta-Tag wird verwendet, um Dateiinformationen zu definieren und die Webseite zu beschreiben, um die Suche in Suchmaschinen zu erleichtern.
</body>
</html>

3. Kopfbereich

Code kopieren
Der Code lautet wie folgt:

<Kopf>
<title>Titel der Webseite</title>Deklaration des Dateititels<mate>Einige Dokumentinformationen, wie etwa Dokumentschlüsselwörter, Beschreibung, Zeichensatzeinstellungen usw.
<base> Hyperlink-URL-Basisreferenzpunkt
JavaScript- und VBScript-Programme
Stylesheet kann verwendet werden, um die Layout-Deklaration festzulegen
<link> kann auf externe Dateien verweisen, wie etwa CSS-Layoutbeispiele
</Kopf>

3. Syntax der HTML-Tags

Die grundlegendste Syntax von HTML ist <tag>content</tag>. Tags werden normalerweise paarweise verwendet: ein öffnender und ein schließender Tag. Es gibt auch einen einzelnen Tag ohne schließenden Tag, wie beispielsweise <hr/>

HTML-Tag-Typen: Einzel-Tag und Doppel-TagDoppel-Tag:
Mit Attributen: <tag name attribute="attribute value">...</tag name> Beispiel: <font size="3">.....</font>
Keine Attribute: <tag name>...</tag name> Beispiel: <title>.....</title>

Einzelne Markierung:
Mit Attributen: <tag name attribute="attribute value"> Beispiel: <hr width="200"/> (die Standardeinstellung ist zentriert)
Keine Attribute: <Tagname> Beispiel: <br />


Code kopieren
Der Code lautet wie folgt:

<!-- Mit Attributen: <tag name attribute="attribute value">...</tag name> Zum Beispiel: <font size="3">.....</font>-->
<font size="4" color="#33FF00">2. Der Sportlehrer sagte: Wer es wagt, in meinem Unterricht einen Rock zu tragen, wird bestraft, indem er kopfüber steht! </font> </p> <p><!--Ohne Attribute: <tag name>...</tag name> Beispiel: <title>.....</title>--></p> <p><!--Mit Attributen: <tag name attribute="attribute value"> Beispiel: <hr width="200"/> (die Standardeinstellung ist zentriert)-->
<hr width="200"/></p> <p><!--Kein Attribut: <Tag-Name> Wie zum Beispiel:
Zeigt einen Zeilenumbruch, aber keinen Absatzumbruch an--></p> <p>3. Lebe in meinem Herzen, hast du die Miete bezahlt?
4. Durch dich habe ich mein Gesicht verloren und deshalb gebe ich dir nicht einmal eine Chance, wieder auf die Bühne zu kommen.

<<:  Detaillierte Erklärung zum einfachen Wechseln von CSS-Themen

>>:  Implementierung einer Login-Seite basierend auf layui

Artikel empfehlen

Vue implementiert einfache Kommentarfunktion

In diesem Artikel wird der spezifische Code von V...

Praxis der mehrschichtigen verschachtelten Anzeige von Elementtabellen

Es wird eine Liste mit mehreren Bestellungen benö...

Implementierung des Hochladens großer Dateien und des durch Haltepunkte fortsetzbaren Hochladens in Vue

Inhaltsverzeichnis 2 Lösungen für den Dateiupload...

So verwenden Sie die Markdown-Editor-Komponente in Vue3

Inhaltsverzeichnis Installieren Komponenten impor...

JavaScript Factory Pattern erklärt

Inhaltsverzeichnis Einfache Fabrik Fabrikmethode ...

5 Möglichkeiten, Docker-Container auf andere Server zu migrieren

Migration ist in vielen Fällen unvermeidlich. Har...

HTML-Tutorial: Sammlung häufig verwendeter HTML-Tags (6)

Verwandte Artikel: Anfänger lernen einige HTML-Ta...

Anfänger lernen einige HTML-Tags (3)

Verwandte Artikel: Anfänger lernen einige HTML-Ta...

Eine kurze Diskussion über die Kodierung von HTML-Sonderzeichen in CSS3-Inhalten: „Ich bin ein Sonderzeichen“

Einige im Projekt verwendete Sonderzeichen und Sy...

Detaillierte Erklärung der numerischen Trennzeichen von TS und strengere Klassenattributprüfungen

Inhaltsverzeichnis Überblick in Operatorverfeiner...

Beispielmethode zum Anzeigen von IP in Linux

Die Kenntnis der IP-Adresse eines Geräts ist wich...

So erhalten und verwenden Sie die Zeit im Linux-System

Es gibt zwei Arten von Linux-Systemzeiten. (1) Ka...

Lösen Sie das Problem, dass Docker das MySQL-Image zu langsam zieht

Nachdem wir eine halbe Stunde lang versucht hatte...

Tutorial zur Installation der komprimierten MySQL8-Paketversion unter Win10

1 Laden Sie MySQL8 von der offiziellen Website he...

MySQL 5.7.10 Installationsdokumentation Tutorial

1. Installieren Sie Abhängigkeitspakete yum -y in...