So erstellen Sie eine HTML-Webseite

HTML ist eine Standardsprache zum Erstellen von Webseiten. Durch das Erlernen der Verwendung von HTML können schnell schöne Webseiten erstellt werden. In diesem Artikel werden die grundlegende Syntax von HTML und die Schritte zum Erstellen von Webseiten vorgestellt.

1. Grundlegende Syntax von HTML

HTML ist eine Auszeichnungssprache, die Tags verwenden kann, um die Struktur und den Inhalt eines Dokuments zu beschreiben. Eine vollständige HTML-Webseite besteht aus zwei Teilen: den Attributen und Metadaten der Webseite werden im Kopf definiert und der Inhalt und Stil der Webseite werden im Körper hinzugefügt.

Die Grundstruktur einer typischen HTML-Webseite ist wie folgt:

  
    <title>网页标题</title>
  
  
    <h1 id="一级标题">一级标题</h1>
    <p>段落1</p>
    <p>段落2</p>
  

Unter ihnen:

1. ist die Dokumenttypdeklaration von HTML5, die dem Browser mitteilt, dass dies der Fall ist eine HTML5-Webseite; <code>是HTML5的文档类型声明，告诉浏览器这是HTML5的网页；
2. 是HTML文档的根元素，包含了整个网页的内容；
3. 包含了网页的一些元数据，例如title（网页标题）、meta（网页描述和关键字）、link（样式表）等；
4. 包含了网页的主体内容，包括文本、图片、链接等。

二、开始制作网页

1. 编辑器选择

在制作网页前，首先需要选择一个好的编辑器。常见的编辑器有Sublime Text、Visual Studio Code、Atom等。我这里选择Visual Studio Code作为示例。

2. 新建HTML文件

打开Visual Studio Code并新建一个HTML文件，可以使用任意名称，扩展名为.html。

3. 编写HTML代码

在新建的HTML文件中，按照上文介绍的基本语法，编写HTML代码。例如，下面的代码显示了一个简单的网页结构：

  
    <meta charset="UTF-8">
    <title>我的网页</title>
    <link rel="stylesheet" href="style.css">
  
  
    <h1 id="欢迎来到我的网站">欢迎来到我的网站</h1>
    <p>这是我的第一个网页</p>
    <img src="/static/imghwm/default1.png" data-src="picture.jpg" class="lazy" alt="我的图片">
    <a href="http://www.baidu.com">去百度一下</a>
  

其中：

• <meta charset="UTF-8">指定了网页的编码方式为UTF-8，确保网页中的中文能够正确地显示；
• <link rel="stylesheet" href="style.css">将样式表style.css链接到了当前网页中，使得网页的样式与内容可以分离；
• <h1></h1>代表一级标题，<p></p>代表段落，<img alt="So erstellen Sie eine HTML-Webseite" >代表图片，<a></a>代表链接。

4. 添加CSS样式

CSS（Cascading Style Sheets）是一种用于控制网页外观和样式的语言，通过CSS可以改变网页的背景颜色、文字颜色、字体、大小、间距等。为了让网页更加美观，我们需要添加一些CSS样式。

首先，我们创建一个名为style.css的文件，在HTML文件的head标签中引入该文件，代码如下：

  
    <meta charset="UTF-8">
    <title>我的网页</title>
    <link rel="stylesheet" href="style.css">
  
  
    ...
  

然后，在style.css文件中添加一些样式，例如：

body {
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
}

h1 {
  color: #444;
  font-size: 36px;
  text-align: center;
}

p {
  color: #666;
  font-size: 16px;
  line-height: 1.5;
  margin: 20px 0;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

a {
  color: #0074D9;
  text-decoration: none;
}

其中：

• body指定了整个网页的字体、背景颜色等样式；
• h1指定了一级标题的颜色、字号和居中对齐；
• p指定了段落的颜色、字号、行距和段落之间的上下边距；
• img指定了图片的最大宽度、高度自适应、居中显示和上下边距为0；
• a
ist das Stammelement des HTML-Dokuments und enthält den Inhalt der gesamten Webseite

enthält einige Metadaten der Webseite, wie Titel (Webseitentitel), Meta (Webseitenbeschreibung und Schlüsselwörter), Link (Stylesheet) usw.;
5. enthält den Hauptinhalt der Webseite, einschließlich Text, Bilder, Links usw.

<p></p>2. Beginnen Sie mit der Erstellung von Webseiten<p></p>

Editor-Auswahl

<p></p>Bevor Sie eine Webseite erstellen, müssen Sie zunächst einen guten Editor auswählen. Zu den gängigen Editoren gehören Sublime Text, Visual Studio Code, Atom usw. Als Beispiel wähle ich hier Visual Studio Code. 🎜

🎜Erstellen Sie eine neue HTML-Datei🎜🎜🎜Öffnen Sie Visual Studio Code und erstellen Sie eine neue HTML-Datei. Sie können einen beliebigen Namen verwenden und die Erweiterung ist .html. 🎜
🎜HTML-Code schreiben🎜🎜🎜Schreiben Sie in der neuen HTML-Datei HTML-Code gemäß der oben eingeführten grundlegenden Syntax. Der folgende Code zeigt beispielsweise eine einfache Webseitenstruktur: 🎜rrreee🎜wobei: 🎜

🎜<meta charset="UTF-8"> die Kodierungsmethode des Webs angibt Seite ist UTF -8, stellen Sie sicher, dass das Chinesisch auf der Webseite korrekt angezeigt werden kann 🎜🎜<link rel="stylesheet" href="style.css"> verlinkt den Stylesheet-Stil .css zur aktuellen Webseite, damit Stil und Inhalt der Webseite getrennt werden können 🎜🎜<h1></h1> stellt den Titel der ersten Ebene dar,

steht für den Absatz, <img alt="So erstellen Sie eine HTML-Webseite" > steht für ein Bild und <a></a> steht für einen Link. 🎜🎜

🎜CSS-Stile hinzufügen🎜🎜🎜CSS (Cascading Style Sheets) ist eine Sprache, mit der Sie das Erscheinungsbild und den Stil von Webseiten steuern können. Mithilfe von CSS können Sie die Hintergrundfarbe und Textfarbe ändern. Schriftart, Größe, Abstand usw. Um die Webseite schöner zu machen, müssen wir einige CSS-Stile hinzufügen. 🎜🎜Zuerst erstellen wir eine Datei mit dem Namen style.css, fügen die Datei in das Head-Tag der HTML-Datei ein. Der Code lautet wie folgt: 🎜rrreee🎜Dann fügen wir einige Stile in die Datei style.css ein, zum Beispiel: 🎜 rrreee🎜wobei: 🎜
🎜body die Schriftart, Hintergrundfarbe und andere Stile der gesamten Webseite angibt; 🎜🎜h1 die Farbe, Schriftgröße und die Mitte angibt Ausrichtung des Titels der ersten Ebene; 🎜 🎜p gibt die Farbe, die Schriftgröße, den Zeilenabstand sowie die oberen und unteren Ränder zwischen den Absätzen an; 🎜🎜img gibt die maximale Breite an , adaptive Höhe und zentrierte Anzeige des Bildes. Und der obere und untere Rand sind 0; 🎜🎜a gibt die Farbe des Links an und entfernt die Unterstreichung. 🎜🎜🎜🎜Speichern Sie die Webseite und zeigen Sie eine Vorschau an.🎜🎜🎜Nachdem Sie die oben genannten Schritte ausgeführt, die HTML- und CSS-Dateien gespeichert und die HTML-Datei im Browser geöffnet haben, können Sie eine Vorschau der von uns erstellten Webseite anzeigen. 🎜🎜Wenn es nicht gut aussieht, können Sie den CSS-Stil weiter anpassen und verbessern. 🎜🎜3. Zusammenfassung🎜🎜Die oben genannten Schritte sind die grundlegenden Schritte zum Erstellen von HTML-Webseiten. Durch das Erlernen und Beherrschen der grundlegenden HTML- und CSS-Syntax und die Verwendung eines guten Editors können wir schnell schöne Webseiten erstellen. Natürlich erfordert die Erstellung von Webseiten ständiges Experimentieren und Lernen. Ich hoffe, dass dieser Artikel für Anfänger hilfreich sein kann. 🎜

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine HTML-Webseite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!