Hallo zusammen und willkommen zum ersten Blog der Reihe „Erste Schritte mit Front End“. In dieser Serie lernen wir gemeinsam die Grundlagen der Front-End-Entwicklung und das Erstellen von Webseiten und Webanwendungen von Grund auf kennen. Dieser Blog führt Sie in die grundlegenden Konzepte und Tags von HTML (Hypertext Markup Language) ein und erleichtert Ihnen den schnellen Einstieg.
Die grundlegende Einführung und der erste Versuch von HTML
Vorwort: Lernziele
Die Ziele für dieses Semester sind:
- Wissen, was HTML ist
- Lernen Sie, die HTML-Struktur einer kompletten Seite zu verstehen
- Verstehen Sie die Beziehung zwischen HTML-Tags und -Elementen
- Hallo Weltpraxis
- Beherrschen Sie gängige Entwicklungstools
- Erfahren Sie mehr über gängige Browser und deren Kernel
Was ist HTML?
HTML ist eine Sprache zur Beschreibung von Webseiten.
- HTML steht für Hypertext Markup Language : Hyper Text Markup Language
- HTML ist keine Programmiersprache, sondern eine Auszeichnungssprache
- Eine Auszeichnungssprache ist eine Reihe von Auszeichnungs- Tags
- HTML verwendet Markup-Tags, um Webseiten zu beschreiben
- HTML- Dokumente enthalten HTML- Tags und Textinhalte
- HTML-Dokumente werden auch Webseiten genannt
HTML-Tags und -Elemente
HTML-Tags
HTML-Markup-Tags werden oft als HTML-Tags (HTML-Tag) bezeichnet.
- HTML-Tags sind Schlüsselwörter, die in spitze Klammern eingeschlossen sind, z. B
- HTML-Tags kommen normalerweise paarweise vor , z. B. und
- Das erste Tag in einem Tag-Paar ist das öffnende Tag und das zweite Tag ist das schließende Tag
- Öffnende und schließende Tags werden auch als öffnende und schließende Tags bezeichnet
<标签>内容</标签>
HTML-Elemente
„HTML-Tags“ und „HTML-Elemente“ beschreiben normalerweise dasselbe.
Aber streng genommen enthält ein HTML-Element ein Start-Tag und ein End-Tag, wie im folgenden Beispiel:
HTML-Elemente:
<p>这是一个段落。</p>
HTML-Seitenstruktur
Hier ist ein HTML-Gerüst:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>前端入门-html系列</title>
</head>
<body>
<p>程序员小豪</p>
</body>
</html>
Beispielanalyse
![[Externer Link Bildübertragung fehlgeschlagen, die Quellseite verfügt möglicherweise über einen Anti-Leeching-Mechanismus, es wird empfohlen, das Bild zu speichern und direkt hochzuladen (img-Sr0n11P2-1687583272139)(/Users/adherezheng/mynote/note/csdn/html/ asset/image-20230623164323975. png)]](https://img-blog.csdnimg.cn/e476e1aba62e4dc1a054219876386b17.png)
1. <!DOCTYPE html>声明为 HTML5 文档
2. <html>元素是 HTML 页面的根元素
3. <head>元素包含了文档的元（meta）数据，如<meta charset="utf-8">定义网页编码格式为utf-8。
4. <title>元素描述了文档的标题
5. <body>元素包含了可见的页面内容
6. <h1>元素定义一个大标题
7. <p>元素定义一个段落
Hinweis : Verwenden Sie auf der Browserseite die Taste F12 auf der Tastatur, um den Debug-Modus zu öffnen, und Sie können die Komponenten-Tags sehen.
Handgeschriebene Hallo Welt
Wählen Sie Entwicklungstools aus
Wir können die folgenden Entwicklungstools für die Entwicklung von HTML auswählen:
- Visual Studio Code (bevorzugt)
- WebStorm
- Erhabener Text
- DreamWeaver
- HBuilder
Erstellen Sie eine Datei
Ich verwende vs-Code. Wir können einen Ordner öffnen, eine neue Datei erstellen, sie test.html nennen und in diese neue Datei „! + Enter“ eingeben. Dadurch wird direkt ein HTML-Skelett generiert. Wir befinden uns im Hauptteil div-Tag, um ein Hallo-Wort in das Tag zu schreiben:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>前端入门-html系列</title>
</head>
<body>
<div>hello world</div>
</body>
</html>
Browser öffnen
Klicken Sie in dieser Datei mit der rechten Maustaste auf „Im Standardbrowser öffnen“. Wir können sehen, dass HTML auf der Webseite gerendert wird
![[Externer Link Bildübertragung fehlgeschlagen, die Quellseite verfügt möglicherweise über einen Anti-Leeching-Mechanismus, es wird empfohlen, das Bild zu speichern und direkt hochzuladen (img-x0YTW66J-1687583272142)(/Users/adherezheng/mynote/note/csdn/html/ asset/image-20230623165500223. png)]](https://img-blog.csdnimg.cn/3ebcdba1710f42e3a09893938b35affd.png)
Die fünf gängigen Browser und ihre Kernel
Machen Sie hier übrigens die fünf gängigen Browser bekannt:
| Browser | Rendering-Engine-Kern |
|---|---|
| Chrom/Chrom | Blinken |
| Feuerfuchs | Gecko |
| Safari | WebKit |
| Microsoft Edge | EdgeHTML (alte Version) / Blink (neue Version) |
| Oper | Blinken |
Jeder Browser verwendet eine andere Rendering-Engine zum Parsen und Rendern von Webinhalten. Diese Rendering-Engines können Unterschiede in der Leistung, den Funktionen und der Standardunterstützung aufweisen.