Zusammenfassung der HTML-Wissenspunkte für das Frontend (empfohlen)

1. HTML-Übersicht

htyper Textauszeichnungssprache Hypertext-Auszeichnungssprache

Hypertext: Dies bedeutet, dass eine Webseite Bilder, Links und sogar nicht-textliche Elemente wie Musik und Programme enthalten kann.

Auszeichnungssprache: Eine aus Tags bestehende Sprache.

Webseite == HTML-Dokument, vom Browser zur Anzeige analysiert

Statische Webseiten: statische Ressourcen, wie zum Beispiel xxx.html

Dynamische Webseiten: HTML-Code wird dynamisch von einer bestimmten Entwicklungssprache basierend auf Benutzeranforderungen generiert

Nachfolgend sehen Sie ein Baumstrukturdiagramm der HTML-Datei

Das Label-Konzept:

•Es besteht aus einem Wortpaar in spitzen Klammern, zum Beispiel: <html> *Wörter in keinem Tag dürfen mit einer Zahl beginnen.

• Tags unterscheiden nicht zwischen Groß- und Kleinschreibung. <html> und <HTML>. Kleinschreibung wird empfohlen.

•Ein Tag besteht aus zwei Teilen: dem öffnenden Tag <a> und dem schließenden Tag </a>. Der Teil zwischen den beiden Tags wird als Tag-Text bezeichnet.

•Einige Tags haben eine einfachere Funktion. Sie können nur ein Tag verwenden. Diese Art von Tag wird als selbstschließender Tag bezeichnet. Beispiel: <br/> <hr/> <input /> <img />

• Tags können verschachtelt sein, aber nicht kreuzverschachtelt. <a><b></a></b>

Die Attribute des Tags:

•Wird normalerweise in Form von Schlüssel-Wert-Paaren angezeigt. Beispiel: name="alex"

•Attribute können nur in einem Start-Tag oder einem selbstschließenden Tag erscheinen.

• Attributnamen sind alle klein geschrieben. * Attributwerte müssen in doppelte oder einfache Anführungszeichen eingeschlossen werden, zum Beispiel name="alex"

•Wenn der Attributwert und der Attributname genau gleich sind, schreiben Sie einfach den Attributnamen. Zum Beispiel readonly

2. Einführung in die wichtigsten Head-Tags

•<meta>Zusammensetzung des Meta-Tags: Das Meta-Tag hat zwei Attribute, nämlich das http-equiv-Attribut und das Name-Attribut. Unterschiedliche Attribute haben unterschiedliche Parameterwerte, und diese unterschiedlichen Parameterwerte realisieren unterschiedliche Webseitenfunktionen.

1 Das Namensattribut wird hauptsächlich zur Beschreibung der Webseite verwendet. Der entsprechende Attributwert ist Inhalt. Der Inhalt im Inhalt wird hauptsächlich verwendet, um Suchmaschinenrobotern das Auffinden und Klassifizieren von Informationen zu erleichtern.

2 http-equiv entspricht, wie der Name schon sagt, dem Dateiheader von http. Es kann einige nützliche Informationen an den Browser zurücksenden, um dabei zu helfen, den Inhalt der Webseite richtig und genau anzuzeigen. Der entsprechende Attributwert ist content. Der Inhalt in content ist eigentlich der variable Wert jedes Parameters.

•<title>Alter Junge</title>

•<link rel="icon" href="http://www.jd.com/favicon.ico">

3. Body-Tag

Grundlegende Tags:

<hn>: Der Wertebereich von n ist 1 bis 6; von groß bis klein. Wird verwendet, um den Titel anzuzeigen.

<p>: Absatz-Tag. Der umgebrochene Inhalt wird in eine neue Zeile umgebrochen. Zwischen dem oberen und unteren Inhalt steht außerdem eine Leerzeile.

<b> <strong>: fettgedruckte Tags.

<durchgestrichen>: Fügt dem Text eine Mittellinie hinzu.

<em>: Macht den Text kursiv.

<sup> und <sub>: hochgestellte und tiefgestellte Tabellen.

<br>: Zeilenumbruch.

<hr>: horizontale Linie

Blockebenen- und Inline-Tags

Tags auf Blockebene: <p><h1><table><ol><ul><form><p>

Inline-Tags: <a><input><img><sub><sup><textarea><span>

Funktionen von Blockelementen

① Beginnen Sie immer in einer neuen Zeile.

② Höhe, Zeilenhöhe, Ränder und Polsterung können alle gesteuert werden;

③ Die Standardbreite beträgt 100 % des Containers, sofern keine Breite festgelegt ist.

④ Es kann Inline-Elemente und andere Blockelemente aufnehmen

Funktionen von Inline-Elementen

① Es steht mit den anderen Elementen auf einer Zeile.

② Höhe, Zeilenhöhe, Ränder und Polsterung können nicht geändert werden;

③ Die Breite ist die Breite des Textes oder Bildes und kann nicht geändert werden

④ Inline-Elemente können nur Text oder andere Inline-Elemente enthalten

Bei Inline-Elementen ist folgendes zu beachten

Das Einstellen der Breite hat keine Auswirkung.

Die Höheneinstellung ist ungültig. Sie können sie über die Zeilenhöhe festlegen.

Beim Festlegen des Rands sind nur der linke und der rechte Rand gültig, nicht der obere und der untere.

Beim Festlegen der Polsterung sind nur die linke und rechte Polsterung gültig, während die obere und untere Polsterung ungültig sind. Beachten Sie, dass die Elementreichweite vergrößert wird, der Inhalt um das Element herum jedoch nicht beeinflusst wird.

Sonderzeichen:

< >"©®

Grafik-Tag <img>:

src: Der Pfad zum anzuzeigenden Bild.

alt: Die Eingabeaufforderung, wenn das Bild nicht erfolgreich geladen wurde.

Titel: Der Tooltip, der angezeigt wird, wenn die Maus darüber schwebt.

Breite: die Breite des Bildes

Höhe: Die Höhe des Bildes (wenn Sie nur eines der Breite- und Höhe-Attribute verwenden, erfolgt eine automatische proportionale Skalierung.)

Hyperlink-Tag <a>:

href: Der zu verbindende Ressourcenpfad hat folgendes Format: href="https://www.jb51.net"

Ziel: _blank: Öffnet den Hyperlink in einem neuen Fenster. Framename: Öffnet den Linkinhalt im angegebenen Frame.

Name: definiert ein Lesezeichen für eine Seite.

Wird zum Springen zu href verwendet: #Lesezeichenname.

Liste der Schlagwörter:

<ul>: Ungeordnete Liste

<ol>: geordnete Liste

<li>: Jedes Element in der Liste.

<dl> Definitionsliste

<dt> Listentitel

<dd> Listenelement

Tabellen-Tag <table>:

border: Tabellenrand.

cellpadding: innerer Rand

cellspacing:

äußerer

Rand.

width: Prozentsatz der Pixel. (Länge und Breite legen Sie am besten über CSS fest)

<tr>: Tabellenzeile

<th>: Tabellenkopfzelle

<td>: Tabellendatenzelle

rowspan: die Anzahl der Zeilen, die eine

Zelle vertikal überspannt colspan: die Anzahl der Spalten, die eine Zelle horizontal überspannt (d. h. verbundene Zellen)

<th>: Tabellenkopf <tbody> (nicht häufig verwendet): partitioniert die Tabelle

Formular-Tag <form>

Formulare werden verwendet, um Daten auf einen Server zu übertragen.

Ein Formular kann Eingabeelemente wie Textfelder, Kontrollkästchen, Optionsfelder, Senden-Schaltflächen usw. enthalten.

Formulare können auch Textbereichs-, Auswahl-, Feldsatz- und Beschriftungselemente enthalten.

1. Formulareigenschaften

HTML-Formulare werden verwendet, um verschiedene Arten von Benutzereingaben zu empfangen. Wenn ein Benutzer ein Formular absendet, werden Daten an den Server übertragen und ermöglichen so die Interaktion zwischen dem Benutzer und dem Webserver. Formular-Tag, der gesamte zu übermittelnde Inhalt sollte in diesem Tag stehen.

Aktion: Wo das Formular übermittelt wird. Zeigt im Allgemeinen auf ein Programm auf der Serverseite, und das Programm empfängt die vom Formular übermittelten Daten (dh den Wert des Formularelements) und verarbeitet sie entsprechend, z. B. https://www.sogou.com/web

Methode: Die Übermittlungsmethode des Formulars post/get. Der Standardwert ist get (Umschlag)

get: 1. Das übermittelte Schlüssel-Wert-Paar wird nach der URL in die Adressleiste eingefügt. 2. Die Sicherheit ist relativ schlecht. 3. Die Länge des übermittelten Inhalts ist begrenzt.

post: 1. Das übermittelte Schlüssel-Wert-Paar befindet sich nicht in der Adressleiste. 2. Die Sicherheit ist relativ hoch. 3. Die Länge des übermittelten Inhalts ist theoretisch nicht begrenzt.

get/post sind zwei gängige Anforderungsmethoden.

2. Formularelement

<input>
Typ:
Text, Text-Eingabefeld,

Passwort, Kennwort-Eingabefeld, Radio,

Einzelauswahlfeld,

Kontrollkästchen, Mehrfachauswahlfeld,

Senden, Senden-Schaltfläche,

Schaltfläche (muss mit js verwendet werden.) Was ist der Unterschied zwischen einer Schaltfläche und Senden?

Datei Datei senden: Formular muss Attribut enctype="multipart/form-data" hinzufügen.

XML/HTML-Code. Inhalt in Zwischenablage kopieren.

-Index (Anforderung):
Druckanforderung.POST
Druckanforderung.GET
Druckanforderung.FILES
für Element

in Anforderung.FILES:

fileObj = Anfrage.FILES.get (Element)
f = öffnen (Dateiobjektname, „wb“)
iter_file = fileObj .chunks()
für Zeile in iter_file:
f.write(line)
f.close()
return HttpResponse('ok')

Name: der Schlüssel des Formular-Übermittlungselements. Beachten Sie den Unterschied beim ID-Attribut: Das Name-Attribut ist der Name, der bei der Kommunikation mit dem Server verwendet wird; das ID-Attribut ist der Name, der vom Browser verwendet wird. Dieses Attribut wird hauptsächlich

in CSS und JavaScript verwendet, um die clientseitige Programmierung zu erleichtern.

value: der Wert des Formular-Übermittlungselements. Das value-Attribut wird für verschiedene Eingabetypen unterschiedlich verwendet:

type="button", "reset", "submit" - definiert den auf der Schaltfläche angezeigten Text

type="text", "password", "hidden" - definiert den Anfangswert des Eingabefelds

type="checkbox", "radio", "image" - definiert den mit der Eingabe verknüpften Wert

checked: Radio und Kontrollkästchen sind standardmäßig ausgewählt

readonly: schreibgeschützt. Text und Kennwort

deaktiviert: funktioniert für alle Eingaben.

<select> Dropdown-Auswahl-Tag-Attribute:

name: der Schlüssel des Formular-Übermittlungselements.

size: die Anzahl der Optionen

multiple: mehrere

<option>-Attribute jedes im Dropdown-Menü ausgewählten Elements: value: der Wert des Formular-Übermittlungselements. selected: die ausgewählte Dropdown-Auswahl ist standardmäßig ausgewählt

<optgroup> fügt Gruppen für jedes Element hinzu

<textarea> Textfeldname: der Schlüssel des Formular-Übermittlungselements. cols: die Standardanzahl der Spalten im Textfeld rows: die Standardanzahl der Zeilen im Textfeld

<label>

<Feldsatz>
<legend>Anmelden</legend>
<Eingabetyp="Text">
</Feldsatz>

Die obige Zusammenfassung der Front-End-HTML-Wissenspunkte (empfohlen) ist der gesamte Inhalt, den der Editor mit Ihnen teilt. Ich hoffe, er kann Ihnen als Referenz dienen. Ich hoffe auch, dass Sie 123WORDPRESS.COM unterstützen.

<<: Implementierung eines Element-Eingabefelds, das automatisch den Fokus erhält

>>: Kurze Analyse des MySQL B-Tree-Index

Zusammenfassung der HTML-Wissenspunkte für das Frontend (empfohlen)

FTP-Remoteverbindung zu Linux über SSH

Zusammenfassung der mit dem Abfangen von MySQL-Zeichenfolgen verbundenen Funktionen

Wartungsmethode für den Innodb-Systemtabellenbereich

Eine vollständige Liste häufig verwendeter MySQL-Funktionen (klassifiziert und zusammengefasst)

Lösung zum Importieren weiterer Daten aus MySQL in Hive

So handhaben Sie den Token-Ablauf in WeChat-Miniprogrammen

Der Unterschied und die Einführung von ARGB, RGB und RGBA

Detaillierte Erklärung zum Schreiben und Verwenden von Makefile unter Linux

So verwenden Sie den Vue-Video-Player für eine Live-Übertragung

Teilen Sie 12 häufig verwendete Loader in Webpack (Zusammenfassung)

Artikel empfehlen

Beispielcode zum Festlegen des Beschriftungsstils mithilfe des CSS-Selektors

Eine kurze Diskussion über den Unterschied zwischen src und href in HTML

Lösung für die lange Verzögerung der MySQL-Datenbank-Master-Slave-Replikation

Lösung für „Keine Eingabedatei angegeben“ in nginx+php

Grafisches Tutorial zur Installation und Konfiguration von CentOS 7

Docker verwendet CMD- oder ENTRYPOINT-Befehle, um mehrere Dienste gleichzeitig zu starten

React-Internationalisierung – Verwendung von react-intl

SVN-Installation und grundlegende Bedienung (grafisches Tutorial)

Erweitert und Zusammenfassung häufig verwendeter SQL-Anweisungen in MySQL-Datenbanken

Detaillierte Beschreibung von Shallow Copy und Deep Copy in js

So installieren Sie Oracle Java 14 auf Ubuntu Linux

Detaillierte Erklärung des JS-Speicherplatzes

Grafisches Tutorial zur Installation und Konfiguration der grünen Version von MySQL 5.7.21 winx64

Node.js löst das Problem verstümmelter chinesischer Zeichen in Clientanforderungsdaten

So legen Sie fest, dass der Text im Dropdown-Auswahlmenü nach links und rechts gescrollt wird