Grundlagen von HTML
In diesem Artikel erklären wir die Grundlagen von HTML.
Dies erklärt die Haupt-Tags wie die DOCTYPE-Deklaration, <html>, <head> und <body>-Tags. Es beschreibt auch Tags, Attribute und Sonderzeichen.
YouTube Video
Grundlagen von HTML
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Basics of HTML</title>
7 </head>
8 <body>
9 <!-- Main content wrapped in the main tag -->
10 <main>
11 <!-- Main heading -->
12 <h1>What is HTML?</h1>
13 <!-- Example of a paragraph -->
14 <p>HTML is the language used to create the basic structure of web pages.</p>
15 </main>
16 </body>
17</html>-
<!DOCTYPE html>Am Anfang der Datei deklarieren wir, dass dies ein HTML5-Dokument ist, was bedeutet, dass es den Regeln von HTML5 folgt.
-
<html>Das
<html>-Tag ist das äußerste Element in einem HTML-Dokument, das den gesamten Inhalt umschließt. Jede HTML-Datei enthält nur ein<html>-Tag, und alle anderen Tags sind innerhalb dieses Tags geschachtelt. Daslang="en"im öffnenden<html>-Tag wird als Attribut bezeichnet und informiert den Browser, dass das Dokument auf Englisch verfasst ist. Dies hilft, Screenreader und Suchmaschinen über die Sprache des Dokuments zu informieren. -
<head>Das
<head>-Tag definiert die Metadaten (Informationen) der Seite. Dazu gehören der Seitentitel, die Zeichencodierung und die Einstellungen für das responsive Design. Responsives Design bezieht sich auf eine Methode, die für Websites oder Apps entwickelt wurde, um sich gut an verschiedene Geräte und Bildschirmgrößen anzupassen und anzuzeigen. Dies ermöglicht es den Benutzern, Inhalte auf verschiedenen Geräten wie Smartphones, Tablets und Desktops komfortabel anzusehen.<meta charset="UTF-8">setzt die Zeichencodierung des Dokuments auf UTF-8.<meta name="viewport" content="width=device-width, initial-scale=1.0">ist eine Einstellung, die die Anzeige für mobile Geräte optimiert. Die Seite passt sich der Breite des Gerätsbildschirms an.<title>stellt den Titel der Seite dar, der im Browser-Tab angezeigt wird. In diesem Beispiel ist der Titel 'Grundlagen von HTML' festgelegt. -
<body>Das
<body>-Tag enthält den Teil, der den Benutzern Inhalte anzeigt. Innerhalb dieses Tags werden Texte, Bilder, Links usw. geschrieben. -
<main>Das
<main>-Tag steht für den Hauptinhalt der Seite. Dies umfasst Überschriften und Absätze. -
<h1>Das
<h1>-Tag repräsentiert die wichtigste Überschrift auf der Seite. Es ist üblich, das<main>-Tag und das<h1>-Tag nur einmal in einem Dokument zu verwenden. -
<p>Das
<p>-Tag steht für einen Absatz. -
<!-- Comment -->Sie können Kommentare in HTML in diesem Format schreiben. Da clientseitiges HTML von jedem eingesehen werden kann, sollten Sie in Kommentaren keine sensiblen Informationen wie Passwörter oder API-Schlüssel einfügen.
HTML hat viele Tags, aber achten Sie hier auf die folgenden Punkte. Eine HTML-Datei besteht aus einer DOCTYPE-Deklaration und einem <html>-Tag. Das <html>-Tag enthält ein <head>-Tag und ein <body>-Tag. In HTML sind alle Tags innerhalb des <html>-Tags enthalten und drücken die Struktur des Textes durch Eltern-, Kind- und Geschwisterbeziehungen aus, ähnlich einer Baumstruktur. Achten Sie beim Schreiben von HTML auch auf die Dokumentenstruktur.
Tags und Attribute
Als nächstes werfen wir einen Blick auf HTML-Tags und Attribute.
1<!-- Opening tag and closing tag -->
2<div>Content</div>
3
4<!-- Self-closing tag -->
5<br>
6
7<!-- Nested tag -->
8<div>
9 <div>Nested Content</div>
10</div>
11
12<!-- Attribute -->
13<div id="main">
14 <div>Nested Content</div>
15</div>
16
17<!-- Tag : <div> -->
18<!-- Element : <div>Content</div> -->Tags sind in spitze Klammern (<, >) eingeschlossen und bestehen typischerweise aus einem Paar von öffnenden und schließenden Tags. Es gibt jedoch auch einzelne Tags, wie das <meta>-Tag und das <img>-Tag, die keinen Inhalt enthalten. Einzelne Tags benötigen kein schließendes Tag.
Tags können Attribute haben, die dem Tag zusätzliche Informationen geben. Attribute werden im öffnenden Tag im Format attributeName="value" geschrieben.
Hier wird <div> als ein Tag bezeichnet und <div>Content</div> als ein Element.
1<div id="header">
2 <ul class="menu">
3 <li>Home</li>
4 <li style="display: hidden;">Unvisible Menu Item</li>
5 </ul>
6</div>Häufige Attribute in HTML sind id, class und style. Das id-Attribut wird verwendet, um einem Element einen eindeutigen Bezeichner zu geben. Es kann nur ein Element mit der gleichen ID auf einer Seite geben. Es ist nützlich, wenn bestimmte Elemente mit JavaScript oder CSS manipuliert werden sollen. Das class-Attribut ermöglicht es, mehrere Elemente mit CSS oder JavaScript zu gruppieren, indem ein Klassenname zugewiesen wird. Sie können mehreren Elementen die gleiche Klasse zuweisen, sodass Stile geteilt werden können. Das style-Attribut spezifiziert CSS-Stile inline für ein Element. Normalerweise werden Stile in einem externen Stylesheet oder innerhalb des <style>-Tags definiert, aber dieses Attribut wird verwendet, wenn Sie Stile direkt für einzelne Elemente angeben möchten.
Sonderzeichen in HTML
Als nächstes schauen wir uns Sonderzeichen in HTML an.
In HTML gibt es Sonderzeichen, die verwendet werden, um bestimmte Symbole und Zeichen darzustellen. Diese Sonderzeichen werden Entitäten genannt. Sonderzeichen beginnen mit & (Ampersand), gefolgt von einem Namen oder einer Zahl, und enden mit ; (Semikolon).
Repräsentative Sonderzeichen in HTML
Hier sind einige gebräuchliche Sonderzeichen.
| Display | Entity Name | Entity Number | Description |
|---|---|---|---|
& |
& |
& |
Ampersand (&) |
< |
< |
< |
Less-than sign (<) |
> |
> |
> |
Greater-than sign (>) |
" |
" |
" |
Double quotation mark (") |
' |
' |
' |
Apostrophe (') |
| © | © |
© |
Copyright symbol (©) |
| € | € |
€ |
Euro symbol (€) |
| ¥ | ¥ |
¥ |
Japanese Yen symbol (¥) |
| ¢ | ¢ |
¢ |
Cent symbol (¢) |
| £ | £ |
£ |
Pound symbol (£) |
|
|
  |
Non-breaking space (space) |
Beispiele für die Verwendung von Sonderzeichen in HTML
Insbesondere spitze Klammern (<, >) und Anführungszeichen müssen in HTML korrekt verwendet werden.
Spitze Klammern (<, >) und doppelte Anführungszeichen sollten in HTML als Sonderzeichen dargestellt werden, wie unten gezeigt.
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Basics of HTML</title>
7 </head>
8 <body>
9 <!-- Main content wrapped in the main tag -->
10 <main>
11 <!-- Main heading -->
12 <h1>What is HTML?</h1>
13 <!-- Example of a paragraph -->
14 <p>
15 HTML is the language used to create the basic structure of web pages.<br>
16 It defines the content and layout of a webpage using various elements such as headings, paragraphs, and lists.
17 </p>
18 <hr>
19 <h2>Basic Elements of HTML</h2>
20 <div>
21 HTML elements are used to organize and display content on a web page.
22 They include tags for text, images, links, and more.
23 </div>
24 <hr>
25 <ul>
26 <li>Headings (e.g., <h1>, <h2>)</li>
27 <li>Paragraphs (<p>)</li>
28 <li>Links (<a>)</li>
29 <li>Lists (<ul>, <ol>)</li>
30 <li>Images (<img>)</li>
31 </ul>
32 <hr>
33- <h3>About '<h1>' tag and '<h2>' tag</h3>
34+ <h3>About '<h1>' tag and '<h2>' tag</h3>
35 <img src="image.png"
36- alt="This is an example of "image"">
37+ alt="This is an example of "image"">
38 </main>
39 </body>
40</html>
HTML-Versionen
Lassen Sie uns hier einen Blick auf HTML-Versionen werfen.
HTML-Versionen haben sich entwickelt, um die Struktur und Funktionalität von Webseiten zu definieren. Hier sind die Hauptversionen:.
-
HTML 1.0 (1993)
Die erste HTML-Version hatte nur sehr grundlegende Markup-Funktionen. Es definierte Elemente wie Links, Überschriften, Absätze und Listen.
-
HTML 2.0 (1995)
Die erste standardisierte Version, mit der mehr Elemente hinzugefügt wurden, einschließlich Unterstützung für Formulare und Tabellen.
-
HTML 3.2 (1997)
Es wurden mehr Layoutfunktionen hinzugefügt, die das Einbetten von Stilelementen und Skripten ermöglichten. Außerdem wurde das Layout mit dem
<table>-Element üblich. -
HTML 4.01 (1999)
Die Trennung von Struktur und Präsentation machte Fortschritte und CSS wurde eingeführt. Die Erstellung von standardkonformen Websites wurde empfohlen. Darüber hinaus wurden die Internationalisierung und Zugänglichkeit von Dokumenten verbessert.
-
HTML5 (2014)
Die neueste Hauptversion, die Unterstützung für Video und Audio, Canvas, lokalen Speicher, Geolokalisierung und andere neue APIs einführt. Es ist mobilfreundlich und ermöglicht die Entwicklung von interaktiveren Webanwendungen.
HTML5.2 ist eine Version von HTML, die 2017 empfohlen wurde und eine verbesserte Version von HTML5 darstellt. Seit HTML5.2 wird es kontinuierlich als HTML Living Standard aktualisiert, anstatt eine statische Versionsnummer zu haben.
HTML hat sich durch diese Versionen weiterentwickelt und ist zu einer flexibleren und leistungsfähigeren Webtechnologie geworden.
Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.