HTML-Grundlagen

Einführung in die Front-End-Entwicklung

1. Was ist Frontend-Entwicklung?

Erstellen Sie Front-End-Seiten wie Webseiten oder Apps, um sie den Benutzern zu präsentieren
Kern-Framework für HTML, CSS, JS und abgeleitete Technologien
Anwendungsszenarien PC, APP, Applet, Spiel, Server

2. Lernroute

HTML-Syntax, Semantik, SEO-Basis
CSS-Syntax, Seitenlayout, Medienabfragen, CSS3
Erweiterte CSS-Präprozessor-, Framework- und Architekturspezifikationen
JS-Syntaxdatenstruktur WebAPI ES6 + Modular Tyscript
Erstellen Sie das Tool npm
Framework VUE React Angular
Fahren Sie mit dem Rendern des Node.js-Servers fort

3. Prinzipien des Internets

Front-End dreischichtiges HTML (Struktur), CSS (Stil), JS (Verhalten)
Multimedia-Inhalte: Bilder, Videos, Audios, Hyperlinks
Internet-Betriebsprozess

Client -> HTTL-Anfrage senden -> Server

Server -> HTTL-Antwort ----> Client

Server : Einschließlich Prozessor, Festplatte, Speichersystembus usw. mit hohen Anforderungen an Geschäftsverarbeitung, Stabilität, Zuverlässigkeit und Sicherheit sowie Speichern von Daten als Antwort auf Anforderungen und Verarbeitung
( Cloud-Server : einfach, effizient, sicher, zuverlässig, und skalierbarer Computerdienst)

Client : Benutzerunterbrechung, am häufigsten verwendeter App-Browser (Google, dh Firefox)

HTTP-Protokoll : Hypertext-Übertragungsprotokoll, Kommunikationsprotokoll auf Anwendungsebene zwischen Client und WEB-Server

4. Nur-Text-Format (HTML, CSS, JS)

Speichern Sie nur Text, keine anderen Formate oder Nicht-Text-Inhalte, was der Netzwerkübertragung förderlich ist
Sie können das Format zum Speichern der Erweiterung direkt ändern
Dateien im Nur-Text-Format können jeden Nur-Text-Editor verwenden

5. HTML-Theorie

Konzept

Hypertext wird verwendet, um Bilder, Audio, Video und Programmtext zu verknüpfen
Ein grammatikalisches Format, das in den Browser geschrieben wurde, um eine spezielle Semantik zu erzielen oder Inhalte anzuzeigen

Eigenschaften

Marker fügen dem normalen Text Semantik hinzu, beschreiben Hypertextinhalte und bauen die Grundstruktur von Webseiten auf
Semantisierung: Fügen Sie spezielle semantische Tags hinzu, um das Lesen und die Wartung von Code zu erleichtern. Dies ist für Webcrawler hilfreich und verbessert die SEO-Suchmaschinenoptimierung

Detail

Der gesamte Inhalt des HTML-Elements vom Start-Tag bis zum End-Tag, einschließlich Start-Tag, Elementinhalt und End-Tag
Beschriftungsebene
Containerebene: Jeder Inhalt kann in der Textebene gespeichert
werden: Es kann nur Text geschrieben werden
Der Leerraum außerhalb der Beschriftung wird ignoriert und der Leerraum im Elementinhalt wird gefaltet und angezeigt
Attribute der Bezeichnung: Attributname: Das Format "Attributwert", Vielfache werden durch Leerzeichen getrennt

Skelett

<html><head><titile></title></head></html>

Titel der Titelseite, Schlüsselwörter als Suchmaschinenschlüsselwörter, Optimierung der SEO-Suche, als Standardseitentitel der Favoriten, Hinzufügen von Titelinhalten zur Optimierung der Seite, Extrahieren der Seitenschlüsselwörter
Körper zum Speichern von Seitenanzeigeinhalten

DTD, Namespace, Zeichensatz

Referenzstandard für die DTD-Analyse
Die erweiterbare XML-Markup-Sprache wird zum Übertragen und Speichern von Daten verwendet. Lang wird zum Festlegen des Namespace verwendet
Der Zeichensatz, der die von der aktuellen Webseite verwendete Zeichenkodierung definiert, erfordert keine Geschwindigkeit für die Verwendung von utf-8 und eine Geschwindigkeit für die Verwendung von gbk

6. Spezifisches Etikett

Titel-Tag

 <h1> </h1>

Fügen Sie den internen Elementen des Beschriftungselements Semantik hinzu, und die Titel-Tags können nicht verschachtelt werden
Das Gewicht des h1-Titels ist am höchsten. Wenn wir unseren wichtigsten Inhalt einfügen, kann im Allgemeinen nur ein h1 angezeigt werden

Absatz-Tag

<p></p>      <br/>

Das P-Tag fügt dem Inhalt eine vollständige Semantik hinzu und ist nicht für den Stil des automatischen Inhaltsumbruchs verantwortlich
Das obligatorische Zeilenumbruchzeichen des br-Tags ist ein leeres Element

Textformatierung

Das Etikett wird verwendet, um das b-Etikett zu fetten
Tags werden für kursive i-Tags verwendet
Betonen Sie Text mit kursiven em-Tags
Definieren Sie den Unterstrich u-Tag
Fügen Sie den Unterstrich ins Tag ein
~~Durchgestrichenes del-Tag~~

Bild-Tag

<img></img> 支持格式png、jpg、jif

src-Attribut: Bildverknüpfungspfad
Relativer Pfad: Wird von der HTML-Datei selbst ausgelöst und nach der relativen Position durchsucht. Es gibt die gleiche Ebene, Unterebene und übergeordnete Suche.
Absoluter Pfad: Suche aus dem Stammverzeichnis des Computerlaufwerksbuchstabens, normalerweise der Adresse des Bildes
Anzeige von Breite und Höhe, Titel: Textanzeige, wenn die Maus auf das Bild gesetzt wird, alt: Bildaufforderungstext kann nicht normal angezeigt werden

Audio-Tag

<audio></audio>  支持格式mp3、ogg、wav controls=“controls”

Video-Tag

<video></video>支持格式mp4、ogg、webm

Hyperlink

<a></a>锚

URL zur Seite springen
Ziel: Definieren Sie, wo zum verknüpften Dokument gesprungen werden soll. _selbst Standardwert (im aktuellen Fenster) _blank: Neues Fenster

Titel: Texterinnerung bei eingeschalteter Maus

Ankersprung

Ankersprung in der Seite

  <h2 id="html"></h2> ——<a href="#html"></a>
  <a name="html"></a> ——<a href="#html"></a>

Geben Sie einen Sprung außerhalb der Seite an

Setzen Sie den Link <a href="Jump page"#specific location> zum Ankerpunkt

Liste

Ungeordnete Liste

<ul><li></li></ul>

Hinweis: ul kann nur li verschachteln, li kann nicht alleine existieren, aber ul kann verschachtelt werden

Bestellliste

<ol><li></li></ol>

Zeigt die Sequenznummernanordnung

Definitionsliste

<dl><dt>关键词</dt><dd>描述</dd></dl>
<dd>是用来描述最近的<dt>,为容量级标签，内部可以放东西

. Für eine einfache Verwaltung ist es am besten, jedem dl nur einen Satz von dt und dd hinzuzufügen

Layoutetikett

div

Kann jeden Inhalt, klassisches Etikett auf Containerebene, relativ große Reichweite setzen

Spanne

Unterstützen Sie in kleinen Bereichen lokale Anpassungen, ohne den Gesamteffekt zu ändern

Formularbasis

<table><tr><td>/<th></th>/</tr></table>

Hiermit wird der Header festgelegt, der Standard-CSS-Stil

Layoutanzeige

Zellzusammenführung

Zeilenbereich: Zeilenübergreifend zusammenführen, nach oben und unten zusammenführen und schließlich einen Attributwert angeben, der die Anzahl der übergreifenden Zeilen und Spalten angibt
colspan: Zeilen- und Spaltenzusammenführung, linke und rechte Zusammenführung

Tipps: Wenn Sie die Zeile der Zelle teilen, wird die Oberseite an derselben Zeile ausgerichtet

Bilden

Formularfeld

Es entspricht einem Container, in dem alle Formularsteuerelemente und Eingabeaufforderungsinformationen gespeichert sind. Über diesen wird die URL-Adresse des Programms definiert, mit dem die Formulardaten verarbeitet werden, und die Daten werden an den Hintergrundserver übertragen

Geben Sie die Methode und den Speicherort der Datenübermittlung über entsprechende Attribute an
Aktion: URL gibt die URL-Adresse des Servers an, der Daten empfängt und verarbeitet
Methode: get / post wird verwendet, um die Übermittlungsmethode für Formulardaten festzulegen
name: Benutzerdefinierter Name, gibt den Namen des Formulars an

Sofortige Information

Beschreibender Text, der den Benutzer auffordert, bestimmte Füllvorgänge auszuführen

<input>

Unterschiedliche Typattributwerte zeigen unterschiedliche Eingabeinhalte an

Text einzeiliger Textwert, Wertwert wird verwendet, um den Standardanzeigeinhalt festzulegen

<input type="text"> value="请输入">

Das Passwortfeld wird maskiert

<input type="password">

Radio ist ein einzelnes Auswahlfeld (die sich gegenseitig ausschließende Beziehung legt das gleiche Namensattribut fest). Mit diesem Kontrollkästchen wird die Standardauswahl festgelegt

<input type="radio" name="sex" checked="男">男

Kontrollkästchen Kontrollkästchen (Gruppierung verwendet das gleiche Namensattribut)

<input type="checkbox" name="hobby">绘画

Das Dateiattribut definiert die Schaltfläche zum Hochladen von Dateien. Wählen Sie den lokalen Server zum Hochladen von Dateien aus. Mehrere werden verwendet, um mehrere Uploads gleichzeitig einzurichten

<input type="file" multiple="multiple"/>

Formularsteuerung

Formularfunktionselemente, einzeilige Texteingabe, Passworteingabe, Schaltflächen

Taste

Taste: Normale Taste, ohne Sonderfunktion

<input type="button" value="普通按钮">

Zurücksetzen: Schaltfläche zurücksetzen, Inhalt im Formular löschen, Standard wiederherstellen

Senden: Senden Sie die Schaltfläche, senden Sie die Daten an den im Formular angegebenen Back-End-Server und löschen Sie die Standardeinstellung

Bild: als Bild

Textfeld können Sie mehrere Textzeilen eingeben

Zeilenattributwert, Anzeige der maximalen Anzahl von Zeilen, Spaltenspaltenattributwert, Anzeige der maximalen Anzahl von Bytes pro Zeile (1 chinesisches Zeichen hat 2 Bytes)

Dropdown-Menü

<select><option></option></select>

Standardauswahl, ausgewähltes Attribut zur Option hinzufügen, der Attributwert ist selbst
Das Optgroup-Label gruppiert die Optionen, zwischen den beiden, label = "Gruppenname" für die Gruppierung, keine Auswahl ist zulässig

Etikette

(Die Entfernung ist weit entfernt.) Legen Sie das ID-Attribut für das Formular fest, schreiben Sie den Bindungsinhalt in das Label-Tag und legen Sie das for-Attribut fest. Der Attributwert ist der ID-Attributwert
(Näherer Abstand), schreiben Sie den Inhalt des Eingabeetiketts direkt in das Etikett, das Sie direkt binden können

Zeichenentität

In W3C gibt es spezielle entsprechende Optionen
Beginnen Sie mit & und enden Sie mit;, verwenden Sie im Allgemeinen den Entitätsnamen

7. Zusammenfassung der falschen Fragen

Der Programmierer lädt die Webseiten-Quelldatei zur Speicherung auf den Server hoch
HTML-Elemente sind alles vom Start-Tag bis zum End-Tag, einschließlich Start-Tag, Element-Tag und End-Tag
Das Absatz-Tag P ist ein Doppel-Tag und ein Text-Tag, aber Bilder können darin platziert werden

Spannender:
CSS Basic Review

Grundlegende Überprüfung (1) | HTML