Einführung in HTML für Frontend-Entwickler

Einführung in HTML für Frontend-Entwickler

1 Einführung in HTML

1.1 Erste Erfahrungen mit Code, Erstellen der ersten Webseite

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <!DOCTYPE HTML >   
  2. < html >   
  3.      <Kopf>​​   
  4.          < Meta   http-equiv = "Inhaltstyp"   Inhalt = "Text/HTML; Zeichensatz=utf-8" >   
  5.          < Titel > Meine erste Webseite erstellen </ Titel >   
  6.      </ Kopf >   
  7.      < Textkörper >   
  8.          < h1 > Hallo Welt </ h1 >   
  9.      </ Körper >   
  10. </ html >   

1.2 Die Beziehung zwischen HTML und CSS

Um die grundlegenden Technologien der Web-Frontend-Entwicklung zu erlernen, müssen Sie die Sprachen HTML, CSS und JavaScript beherrschen. Schauen wir uns an, was mit diesen drei Technologien erreicht wird:
1. HTML ist der Träger des Webseiteninhalts. Bei Inhalten handelt es sich um die Informationen, die die Ersteller von Webseiten auf der Seite platzieren, damit Benutzer sie durchsuchen können. Dazu können Text, Bilder, Videos usw. gehören.
2. CSS-Stile sind Ausdrücke. Wie die äußere Hülle einer Webseite. Ändern Sie beispielsweise die Schriftart oder Farbe des Titels oder fügen Sie dem Titel ein Hintergrundbild oder einen Rahmen hinzu. Alle diese Dinge, die das Erscheinungsbild des Inhalts verändern, werden Präsentation genannt.
3. JavaScript wird verwendet, um Spezialeffekte auf Webseiten zu erzielen. Beispiel: Wenn die Maus über ein aufspringendes Dropdown-Menü bewegt wird. Oder die Hintergrundfarbe der Tabelle ändert sich, wenn man mit der Maus darüber fährt. Zudem gibt es eine Rotation der Top-News (Nachrichtenbilder). Es ist verständlich, dass Animation und Interaktion im Allgemeinen mit JavaScript implementiert werden.
Der folgende Code demonstriert die Wirkung von CSS. HTML wird verwendet, um Webseitenelemente darzustellen, und CSS verleiht Elementen mehr Ausdruckskraft, wie etwa Elementposition, Größe, Farbe, Schriftart usw.:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <!DOCTYPE HTML >   
  2. < html >   
  3.      <Kopf>​​   
  4.          < Meta   http-equiv = "Inhaltstyp"   Inhalt = "Text/HTML; Zeichensatz=utf-8" >   
  5.          < title > Die Beziehung zwischen HTML und CSS </ title >   
  6.          < Stil   Typ = "Text/CSS" >   
  7. h1{
  8. Schriftgröße: 19px;
  9. Farbe: Nr. 930;
  10. Textausrichtung: zentriert;
  11. }
  12.          </ Stil >   
  13.      </ Kopf >   
  14.      < Textkörper >   
  15.          < h1 > Hallo Welt! </ h1 >   
  16.      </ Körper >   
  17. </ html >   
  18.   

(1) Zeile 8 des Codes beeinflusst die Textgröße des Fensters.
(2) Zeile 9 des Codes betrifft die Änderung der Fenstertextfarbe.
(3) Zeile 10 betrifft die Änderungen in der Zentrierung des Fenstertextes.

1.3 HTML-Tags verstehen

Es gibt verschiedene Webseiten, die alle aus HTML-Tags bestehen. Hier ist eine einfache Webseite:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <!DOCTYPE HTML >   
  2. < html >   
  3.      <Kopf>​​   
  4.          < Meta   http-equiv = "Inhaltstyp"   Inhalt = "Text/HTML; Zeichensatz=utf-8" >   
  5.          < Titel > HTML-Tags verstehen </ Titel >   
  6.      </ Kopf >   
  7.   
  8.      < Textkörper >   
  9.          < h1 > Mut </ h1 >   
  10.          < p > Als ich in der dritten Klasse war, war ich noch ein schüchternes Mädchen. Ich traute mich nie, im Unterricht auf die Fragen des Lehrers zu antworten, aus Angst, dass der Lehrer mich kritisieren würde, wenn ich falsch antwortete. Ich hatte nie den Mut, die Fragen des Lehrers zu beantworten. Ich habe nicht den Mut, an von der Schule organisierten Aktivitäten teilzunehmen. </ p >   
  11.          < p > Im zweiten Halbjahr der dritten Klasse gab es in unserer Klasse eine offene Unterrichtsstunde. Der Lehrer stellte eine ganz einfache Frage. Viele Schüler in der Klasse hoben die Hand, sogar diejenigen, deren Noten viel schlechter waren als meine, und sagten: „Ich mache es, ich mache es.“ Ich schaute mich um und war der Einzige, der seine Hand nicht hob. </ p >   
  12.          < img   Quelle = "http://img.imooc.com/52b4113500018cf102000200.jpg"   >   
  13.      </ Körper >   
  14. </ html >   
  15.   

Die Wirkung ist wie folgt:

Analysieren Sie die HTML-Komponenten dieser Webseite:
(1) „Mut“ ist der Titel des Artikels auf der Webseite. <h1></h1> ist der Titel-Tag und sein Code auf der Webseite wird als <h1>Mut</h1> geschrieben.
(2) „Als ich in der dritten Klasse war … hatte ich nicht den Mut, mitzumachen.“ ist ein Absatz im Artikel auf der Webseite und <p></p> ist ein Absatz-Tag. Der Code auf der Webseite lautet: <p>In der dritten Klasse … hatte ich nicht den Mut, mitzumachen. </p>
(3) Das Bild des kleinen Mädchens auf der Webseite wird durch das img-Tag vervollständigt. Sein Code auf der Webseite lautet <img src="1.jpg">

1.4 Tag-Syntax

1. Tags werden in englische spitze Klammern < und > eingeschlossen, z. B. < und >.
2. Tags in HTML erscheinen im Allgemeinen paarweise, unterteilt in Start-Tags und End-Tags. Das End-Tag hat ein / mehr als das Start-Tag.
3. Die schematische Darstellung der Etikettenstruktur sieht wie folgt aus:

4. Etikettenbeispiele:

(1) <p></p>
(2) <div></div>
(3) <span></span>


5. Tags können verschachtelt werden, die Reihenfolge muss jedoch konsistent bleiben. Wenn beispielsweise <p> in <div> verschachtelt ist, muss </p> vor </div> stehen. Wie in der Abbildung unten gezeigt.

6. Bei HTML-Tags muss die Groß-/Kleinschreibung nicht beachtet werden. <h1> und <H1> sind gleich, aber Kleinschreibung wird empfohlen, da die meisten Programmierer Kleinbuchstaben verwenden.
7. Test: Es gibt einen Webseitencode, aber Zeile 9 fehlt. Bitte ergänzen Sie:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <!DOCTYPE HTML >   
  2. < html >   
  3.      <Kopf>​​   
  4.          < Meta   http-equiv = "Inhaltstyp"   Inhalt = "Text/HTML; Zeichensatz=utf-8" >   
  5.          Syntax des <title> -Tags </title>​   
  6.      </ Kopf >   
  7.      < Textkörper >   
  8.          < h1 > In diesem Tutorial erfahren Sie, wie Sie eine Website mit HTML erstellen </ h1 >   
  9.          < p > Wenn auf einzelne Elemente spezielle Stile angewendet werden müssen, können Inline-Stile verwendet werden.
  10.      </ Körper >   
  11. </ html >   
  12.   

1.5 html/head/body Verstehen Sie die grundlegende Struktur von HTML-Dateien

Lernen Sie die Struktur von HTML-Dateien kennen: Eine HTML-Datei hat ihre eigene feste Struktur.

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. < html >   
  2.      <Kopf> … </Kopf>​​​​   
  3.      < Körper > … </ Körper >   
  4. </ html >   

Code-Erklärung:
1. <html></html> wird als Stammtag bezeichnet und alle Tags der Webseite befinden sich in <html></html>.
2. Das Tag <head> wird verwendet, um die Kopfzeile des Dokuments zu definieren und ist der Container für alle Kopfzeilenelemente. Zu den Header-Elementen gehören <title>, <script>, <style>, <link>, <meta> und andere Tags. Die Header-Tags werden im nächsten Abschnitt ausführlich vorgestellt.
3. Der Inhalt zwischen den Tags <body> und </body> ist der Hauptinhalt der Webseite, z. B. <h1>, <p>, <a>, <img> und andere Inhalts-Tags für Webseiten. Der Inhalt in den Tags hier wird im Browser angezeigt.

Die HTML-Dateistruktur des folgenden Codes ist unvollständig, da die Tags <html> und </html> fehlen:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <!DOCTYPE HTML >   
  2.   
  3.      <Kopf>​​   
  4.          < Meta   http-equiv = "Inhaltstyp"   Inhalt = "Text/HTML; Zeichensatz=utf-8" >   
  5.          < title > Verstehen Sie die grundlegende Struktur von HTML-Dateien </ title >   
  6.      </ Kopf >   
  7.      < Textkörper >   
  8.          < h1 > In diesem Abschnitt lernen Sie die grundlegende Struktur von HTML-Dateien kennen </ h1 >   
  9. </ Körper >   
  10.   


1.6 Kopf-Tag

•Die Rolle von Tags: Die Kopfzeile eines Dokuments beschreibt verschiedene Eigenschaften und Informationen des Dokuments, einschließlich des Titels des Dokuments. Die meisten Dokumentkopfzeilen enthalten Daten, die dem Leser nicht tatsächlich als Inhalt angezeigt werden.
• Die folgenden Tags können im Kopfbereich enthalten sein:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <Kopf>​​   
  2.      <Titel> ... </Titel>​​​​   
  3.      <Meta>​​   
  4.      < Link >   
  5.      <Stil> … </Stil>​​​​   
  6.      < Skript > … </ Skript >   
  7. </ Kopf >   

•<title>-Tag: Der Text zwischen den Tags <title> und </title> stellt die Titelinformation der Webseite dar, die in der Titelleiste des Browsers angezeigt wird. Das Titel-Tag einer Webseite wird verwendet, um Benutzern und Suchmaschinen mitzuteilen, was der Hauptinhalt der Webseite ist. Suchmaschinen können das Thema der Webseite schnell anhand des Titels der Webseite bestimmen. Der Inhalt jeder Webseite ist anders und jede Webseite sollte einen eindeutigen Titel haben.
Beispielsweise wird der Inhalt des <title>-Tags „Hallo Welt“ in der Titelleiste des Browsers angezeigt, wie in der Abbildung dargestellt:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <Kopf>​​   
  2.      < Titel > Hallo Welt </ Titel >   
  3. </ Kopf >   


1.7 HTML-Codekommentare verstehen

Die Rolle von Codekommentaren: Helfen Sie Programmierern, den Zweck des Codes zu markieren. Wenn Sie nach einer gewissen Zeit auf den von Ihnen geschriebenen Code zurückblicken, können Sie sich schnell an den Zweck des Codes erinnern. Codekommentare helfen Programmierern nicht nur, sich an den Zweck vorheriger Codes zu erinnern, sondern tragen auch dazu bei, dass andere Programmierer die Funktionen Ihres Programms schnell verstehen. So können mehrere Personen leichter bei der Entwicklung von Webseitencodes zusammenarbeiten.
Grammatik:

<!--Kommentartext-->

Die Zeilen 8 und 12 des folgenden Codes sind Kommentarcodes, es wurde jedoch festgestellt, dass sie nicht im Ergebnisfenster angezeigt werden:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <!DOCTYPE HTML >   
  2. < html >   
  3.      <Kopf>​​   
  4.          < Meta   http-equiv = "Inhaltstyp"   Inhalt = "Text/HTML; Zeichensatz=utf-8" >   
  5.          < Titel > HTML-Code-Kommentare </ Titel >   
  6.      </ Kopf >   
  7.      < Textkörper >   
  8.          <!--Online-Beratung beginnt-->   
  9.          <div>​​   
  10.              < p > Anmeldungsberatung aus einer Hand! <   href = "#" > Wenden Sie sich an den Registrierungsberater </ a > </ p >   
  11.          </div>​​   
  12.          <!--Ende der Online-Konsultation-->   
  13.      </ Körper >   
  14. </ html >   

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Ursprüngliche Adresse: http://blog.csdn.net/qq_17416741/article/details/51416313

<<:  CSS3 + HTML5 + JS realisiert den Schrumpf- und Expansionsanimationseffekt eines Blocks

>>:  Sehr praktisches Tutorial zur umfassenden Zusammenfassung der MySQL-Funktionen und detaillierten Beispielanalysen

Artikel empfehlen

MySQL 8.0.19 Installations-Tutorial

Laden Sie das Installationspaket von der offiziel...

So installieren Sie Docker auf Raspberry Pi

Da Raspberry Pi auf der ARM-Architektur basiert, ...

Detaillierte Schritte zur Installation von MinIO auf Docker

Inhaltsverzeichnis 1. Überprüfen Sie, ob die Dock...

Detaillierte Ansicht versteckter Spalten in MySQL

Inhaltsverzeichnis 1. Primärschlüssel vorhanden 2...

Grafisches Tutorial zur Installation und Verwendung von MySQL 5.7.17

MySQL ist ein relationales Datenbankverwaltungssy...

Schritt-für-Schritt-Anleitung zur Installation von VMware Workstation und des Betriebssystems WIN10 zur Verbindung mit dem externen Netzwerk (sehr ausführliches Tutorial)

Laden Sie zuerst die Version 15.1 von VMware Work...

Prototyp und Prototypenkette Prototyp und Protodetails

Inhaltsverzeichnis 1. Prototyp 2. Prototypenkette...

Detaillierte Installationshistorie von Ubuntu 20.04 LTS

In diesem Artikel wird die Erstellung einer USB-S...

Installieren Sie MySQL 5.7.17 im Win10-System

Das Betriebssystem Win10 MySQL ist die 64-Bit-ZIP...

SQL-basierte Abfrageanweisungen

Inhaltsverzeichnis 1. Einfache SELECT-Anweisung 1...

Beschreibung der chinesischen Sortierregeln für MySQL

Bei der Verwendung von MySQL sortieren und fragen...

Docker-Lösung zum Anmelden ohne Root-Rechte

Wenn Sie den Docker-Befehl zum ersten Mal verwend...

Viewport-Parameter für mobile Browser (Web-Frontend-Design)

Mobile Browser platzieren Webseiten in einem virtu...

Beispielcode zur Implementierung der WeChat-Kontoaufteilung mit Nodejs

Das Geschäftsszenario des Unternehmens erfordert ...

Unterschiede und Vergleiche von Speicher-Engines in MySQL

MyISAM-Speicher-Engine MyISAM basiert auf der ISA...