IT-Kurs HTML-Grundlagen 009_Hello HTML
Was ist HTML?
Das Netz, oder genauer gesagt das World Wide Web, besteht aus vielen miteinander verknüpften Dokumenten und Ressourcen. Diese Dokumente und Ressourcen werden in HTML geschrieben und als Webseiten bezeichnet. HTML ist die Grundlage von Webseiten und definiert deren Struktur und Inhalt.
Wenn Sie eine URL in Ihren Browser eingeben (z.B. www.zhaojian.net), sendet der Browser eine Anfrage an den Server, der diese Webseite bereitstellt. Der Server antwortet auf diese Anfrage und sendet die angeforderte Webseite (also etwas HTML) zurück an den Browser. Der Browser parst dann dieses HTML und zeigt es als die Webseite an, die Sie normalerweise sehen.
HTML (HyperText Markup Language, Hypertext-Auszeichnungssprache) ist eine Auszeichnungssprache zum Erstellen und Gestalten der Struktur von Webseiten. HTML besteht aus einer Reihe von Elementen, die verwendet werden können, um verschiedene Teile des Inhalts zu umschließen, damit dieser auf eine bestimmte Weise dargestellt wird oder funktioniert. Ein Paar von Tags kann einen Hyperlink zu einem Text oder Bild hinzufügen, Text kursiv oder fett setzen, Absätze, Listen usw. erstellen.
[!Zusammenfassung]
- HTML ist keine Programmiersprache, sondern eine Auszeichnungssprache
- HTML-Dokumente enthalten HTML-Tags und Textinhalt (warum keine Bilder)
- HTML-Dokumente werden auch als Webseiten bezeichnet
Ein vollständiges HTML-Element
Beispiel:
<p>hello HTML!</p>Effekt:
Strukturanalyse:
[!Zusammenfassung]
- Ein vollständiges HTML-Element besteht aus drei Teilen: öffnendem Tag, Inhalt und schließendem Tag;
- Öffnendes Tag (Opening tag): Enthält den Namen des Elements (in diesem Beispiel p), umschlossen von linken und rechten spitzen Klammern. Das öffnende Tag markiert, wo das Element beginnt oder wirksam wird;
- Inhalt (Content): Der Inhalt des Elements;
- Schließendes Tag (Closing tag): Ähnlich dem öffnenden Tag, enthält jedoch einen Schrägstrich vor dem Elementnamen. Dies markiert das Ende des Elements. Das Fehlen eines schließenden Tags ist ein häufiger Anfängerfehler und kann zu ungewöhnlichen Ergebnissen führen.
Eine vollständige HTML-Seite
Beispiel:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>hello HTML</title></head><body> <p>hello HTML!</p></body></html>Effekt:
Strukturanalyse:
[!Zusammenfassung]
<!DOCTYPE html>— Deklariert den HTML-Dokumenttyp. Der Dokumenttyp ist ein historisches Relikt, das dem Browser die Version und Art des Dokuments mitteilt. HTML4 Strict-Modus DOCTYPE-Deklaration:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html></html>—html-Element, der gesamte Inhalt einer HTML-Seite, manchmal als Wurzelelement bezeichnet.<head></head>—head-Element, dessen Inhalt für den Benutzer nicht sichtbar ist und Dinge wie Suchbegriffe (Keywords) für Suchmaschinen, Seitenbeschreibungen, CSS-Stile, JavaScript-Dateien und Zeichencodierungsdeklarationen enthält.<meta charset="utf-8">—meta-Element, wird verwendet, um Metadaten über das HTML-Dokument bereitzustellen. Das charset-Attribut legt den Zeichensatz Ihres Dokuments auf UTF-8 fest.<title></title>—title-Element. Dieses Element legt den Titel der Seite fest, der im Browser-Tab angezeigt wird und auch als Beschreibungstext für Lesezeichen dient.<body></body>—body-Element. Dieses Element enthält den Inhalt, den Benutzer beim Besuch der Seite sehen sollen, einschließlich Text, Bilder, Videos, Spiele, abspielbare Audiospuren oder andere Inhalte.<p></p>— Absatzelement, repräsentiert einen Textabsatz.
Elementname | Funktion | Beispiel |
|---|---|---|
<!DOCTYPE html> | Definiert den Typ und die Version des HTML-Dokuments | <!DOCTYPE html> |
<html> | Definiert das Wurzelelement des HTML-Dokuments | <html lang="en"> |
<head> | Enthält Metainformationen des Dokuments, wie Titel, Zeichensatzdeklaration, Stil- und Skript-Links usw. | <head>...</head> |
<title> | Definiert den Titel des Dokuments, wird in der Titelleiste des Browsers oder im Tab angezeigt | <title>My Web Page</title> |
<meta> | Stellt Metainformationen über das Dokument bereit, wie Zeichensatz, Viewport-Einstellungen, Schlüsselwörter usw. | <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
<link> | Verweist auf externe Ressourcen, wie Stylesheets und Symbole | <link rel="stylesheet" href="styles.css"> <link rel="icon" href="favicon.ico" type="image/x-icon"> |
<style> | Definiert Stile intern im Dokument | <style>body { font-family: Arial, sans-serif; }</style> |
<script> | Definiert oder verweist auf Skripte, kann im Dokument enthalten sein oder auf externe Skripte verweisen | <script src="script.js"></script> |
<noscript> | Definiert Inhalt, der angezeigt wird, wenn der Browser keine Skripte unterstützt | <noscript>Sorry, your browser does not support JavaScript.</noscript> |
<base> | Gibt die Basis-URL für alle relativen Links auf der Seite an | <base href="https://www.zhaojian.net/"> |
Links:
VS Code-Erweiterungen: Remote - SSH Remote Development