Grundlagen von HTML und CSS-CSS-Tutorial-php.cn

HTML und CSS sind die grundlegendsten Bausteine einer Webseite und auch Ihr erster Schritt auf dem Weg zum Webentwickler. HTML stellt das Layout und den Inhalt der Webseite bereit und CSS definiert deren Stil und Erscheinungsbild. In diesem Tutorial behandeln wir die Grundlagen von HTML und CSS, und am Ende werden Sie in der Lage sein, responsive Webseiten zu entwerfen, die nahtlos auf Geräten jeder Größe funktionieren.

Was ist HTML?

HTML ist die Standard-Auszeichnungssprache, die zum Erstellen von Webseiten verwendet wird. Es definiert die Struktur und den Inhalt von Webseiten mithilfe von HTML-Elementen wie Überschriften, Absätzen, Bildern, Links, Formularen und mehr.

Um mit dem Schreiben von HTML-Code zu beginnen, können Sie die CodePen-Demo unten verwenden:

Code-Demo ?

Auf der linken Seite finden Sie den HTML-Quellcode, der im Wesentlichen die Blaupause für das ist, was angezeigt wird. Der Browser wandelt diesen Entwurf dann in die Webseite um, die Sie auf der rechten Seite sehen.

Sie können den Quellcode direkt ändern, um zu sehen, wie er sich auf die angezeigte Webseite auswirkt.

Bereiten Sie Ihren Computer für die Webentwicklung vor

Natürlich können Sie sich in der Praxis nicht auf Tools wie CodePen verlassen, um eine funktionierende und voll funktionsfähige Webanwendung zu erstellen. Sie benötigen etwas Leistungsstärkeres, also richten wir Ihren Computer für die Webentwicklung ein.

Stellen Sie zunächst sicher, dass ein Browser installiert ist. Für diesen Kurs sollte jeder gängige Webbrowser wie Google Chrome, Microsoft Edge, Safari oder Firefox ausreichen. Sie können den Browser von den verlinkten Websites herunterladen und installieren.

Darüber hinaus benötigen Sie einen Code-Editor, um Ihren Code zu schreiben und zu bearbeiten. Visual Studio Code ist eine großartige Option für Anfänger (und auch für Profis). Es ist der weltweit am häufigsten verwendete Code-Editor. Laden Sie einfach das entsprechende Installationsprogramm für Ihr Betriebssystem von der offiziellen Website herunter.

Fundamentals of HTML and CSS

Nachdem Sie VSCode installiert haben, stellen Sie sicher, dass Sie auch die Erweiterung Live Server installieren. Navigieren Sie zur Registerkarte Erweiterungen in der linken Seitenleiste und geben Sie Live Server in das Suchfeld ein. Von dort aus können Sie die Erweiterung herunterladen und installieren.

Fundamentals of HTML and CSS

Live Server erstellt einen lokalen Entwicklungsserver mit der Funktion zum automatischen Neuladen. Erstellen Sie beispielsweise ein neues Arbeitsverzeichnis und öffnen Sie es mit VSCode.

Fundamentals of HTML and CSS

Erstellen Sie in diesem Verzeichnis eine neue Datei mit dem Namen index.html. Die Erweiterung .html gibt an, dass es sich um ein HTML-Dokument handelt. Geben Sie ein! in VSCode, und Sie werden Vorschläge wie diesen sehen:

Fundamentals of HTML and CSS

Dies ist eine Verknüpfung zum schnellen Erstellen von HTML-Dokumenten. Sie können mit den Tasten ↑ oder ↓ navigieren. Wählen Sie die erste Option und der folgende Code sollte generiert werden.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>

Nach dem Login kopieren

Beachten Sie, dass sich in der unteren rechten Ecke des VSCode-Fensters eine Schaltfläche Go Live befindet.

Fundamentals of HTML and CSS

Durch Klicken auf diese Schaltfläche wird die Erweiterung Live Server aktiviert. Ein lokaler Entwicklungsserver wird gestartet, der die gerade erstellte index.html-Datei hostet.

Fundamentals of HTML and CSS

Natürlich ist die Datei im Moment noch leer, sodass Sie nichts sehen können. Fügen Sie etwas zwischen dem und Tags.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    Hello, world!
  </body>
</html>

Nach dem Login kopieren

Speichern Sie die Änderungen und die Webseite wird automatisch mit dem neuen Inhalt aktualisiert.

Fundamentals of HTML and CSS

Die Struktur eines HTML-Dokuments

Ein typisches HTML-Dokument hat immer die folgende Struktur:

<!DOCTYPE html>
<html lang="en">
  <head>
    . . .
  </head>
  <body>
    . . .
  </body>
</html>

Nach dem Login kopieren

Der Tag definiert den Dokumenttyp. Wenn der Webbrowser auf trifft, versteht er, dass die Seite gemäß den Spezifikationen von HTML5, der neuesten Version des HTML-Standards, analysiert und angezeigt werden sollte. Dadurch wird sichergestellt, dass moderne Browser den Inhalt und das Layout der Webseite korrekt interpretieren.

Alles andere in der Datei sollte in einem -Format eingeschlossen sein. Element, definiert durch ein öffnendes Tag () und ein schließendes Tag ().

lang wird als Attribut bezeichnet und hat den Wert „en“. Dadurch wird sowohl dem Browser als auch der Suchmaschine mitgeteilt, dass Englisch die primäre Sprache ist, die für diese Webseite verwendet wird.

Im Element gibt es zwei untergeordnete Elemente: und . enthält Metadaten und andere Informationen zum HTML-Dokument. Diese Informationen werden nicht im Browser angezeigt, sondern häufig von Suchmaschinen für SEO-Zwecke (Suchmaschinenoptimierung) verwendet.

hingegen enthält den Hauptinhalt der Webseite, der für die Benutzer sichtbar ist, und ist daher auch der Teil der HTML-Datei, auf den wir uns in diesem Kurs konzentrieren werden .

Elemente und Attribute

Schauen wir uns das vorherige Beispiel genauer an und stellen fest, dass das HTML-Dokument aus verschiedenen Elementen in einer verschachtelten Struktur besteht. In HTML haben die meisten Elemente sowohl ein öffnendes als auch ein schließendes Tag:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>

Nach dem Login kopieren

In diesem Fall ist das öffnende Tag und ist das schließende Tag und zusammen bilden sie ein HTML-Element. Ein Element könnte Textinhalt zwischen den öffnenden und schließenden Tags enthalten.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    Hello, world!
  </body>
</html>

Nach dem Login kopieren

Das Element kann sich auch um andere Elemente wickeln und so eine verschachtelte Struktur bilden.

<!DOCTYPE html>
<html lang="en">
  <head>
    . . .
  </head>
  <body>
    . . .
  </body>
</html>

Nach dem Login kopieren

Im Eröffnungs-Tag können Sie Attribute definieren, die zur Angabe zusätzlicher Informationen über das Element verwendet werden, wie z. B. seine Klasse, ID usw.

<tag>. . .</tag>

Nach dem Login kopieren

Das Attribut befindet sich normalerweise in einem Schlüssel/Wert-Paar und der Wert muss immer in passende Anführungszeichen (doppelt oder einfach) eingeschlossen werden.

Es gibt einige Ausnahmen von diesen allgemeinen Formaten. Beispielsweise ist das
Das Element, das einen Zeilenumbruch erzeugt, benötigt kein schließendes Tag. Für einige Attribute, beispielsweise mehrere, ist kein Wert erforderlich. Wir werden diese Ausnahmen später in diesem Kurs besprechen, sobald wir auf sie stoßen.

Sie sollten jedoch bedenken, dass ein Element, das ein schließendes Tag erfordert, niemals weggelassen werden sollte. In den meisten Fällen könnte die Webseite immer noch korrekt gerendert werden, aber wenn die Struktur Ihres HTML-Dokuments komplexer wird, können unerwartete Fehler auftreten. Werfen Sie bei Interesse einen Blick auf unsere Best-Practice-Richtlinien zum Schreiben von HTML und CSS.

Weitere Lektüre

Einführung in das Cascading Style Sheet (CSS)
Einführung in JavaScript
Was ist Responsive Design?
So erstellen Sie interaktive Formulare mit HTML und CSS

Das obige ist der detaillierte Inhalt vonGrundlagen von HTML und CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!