HTML-Inhalt der Front-End-wissen

Tags: Skript versteckte post Programmier Sprache Ble zu Element Einführung Elf

HTML beschreibt die Art von WEB-services

import socketsk = socket.socket()sk.bind(("127.0.0.1", 8080))sk.listen(5)while True:    conn, addr = sk.accept()    data = conn.recv(8096)    conn.send(b"HTTP/1.1 200 OK\r\n\r\n")    conn.send(b"<h1>Hello world!</h1>")    conn.close()

Browser-Anfrage--> HTTP Protokoll--> Server Anfrage erhalten--> Server Rückkehr Antwort--> Server sendet HTML-Dateiinhalt zum Browser--> Browser-Render-Seite

Was ist HTML?

• Hypertext Markup Language (Hypertext Markup Language, HTML) ist eine Markup-Sprache verwendet, um Webseiten zu erstellen.
• Im Wesentlichen eine Browser-erkennbare Regel, wir schreiben Seiten nach den Regeln, und der Browser rendert unsere Seiten nach den Regeln. Für verschiedene Browser möglicherweise unterschiedliche Interpretationen desselben Etiketts. (Probleme mit der Anwendungskompatibilität)
• Erweiterung der Webseitendatei:. html oder. Htm

Was ist HTML-Code nicht?

HTML ist eine Markup-Sprache (Markup Language), die keine Programmiersprache ist.

HTML verwendet Tags, um Web-Seiten zu beschreiben.

Struktur des HTML-Dokuments

Die grundlegende HTML-Dokumentation:

≪! DOCTYPE html >< html Lang = "Zh-CN" < Meta Charset = "UTF-8", < Titel > Css-Stil Priorität < / Titel das

1. ≪! DOCTYPE Html > als HTML5-Dokument erklärt.
2. Die Marke an den Start und das Ende des Dokuments ist das Zeichen das Mark und die Endung. Ist das Root-Element der HTML-Seite, zwischen denen die Kopfzeile des Dokuments (Kopf) und der Körper ist.
3. Der erste Teil des HTML-Dokuments wird definiert, der Der Inhalt zwischen ihnen ist nicht im Dokumentfenster des Browsers angezeigt. Enthält Metadaten (Meta) für das Dokument.
4. Die Highlights der Seite gelten der Titelleiste des Browsers.
5. Der Text zwischen den _ und den anderen Seiten ist für den Hauptinhalt der Seite sichtbar.

Achtung:Für chinesische Webseiten verwenden müssen≪ Meta Charset = "Utf-8"Erklärt die Codierung, sonst erscheint es verstümmelt. Bei einigen Browsern GBK als die Standardcodierung, und Sie müssen es≪ Meta Charset = "GBK".

HTML-Label Format

• HTML-Tags sind Stichwörter, die umgeben von geschweiften Klammern, z. B. < html >
• HTML-Tags angezeigt werden in der Regel paarweise, wie z. B.: < Div > und < / Div > das erste Etikett ist der Anfang, und das zweite Etikett ist das Ende. Das Label Ende müssen einen Schrägstrich.
• Es gibt auch einige Tags, die separat dargestellt werden wie z.B.: < Br / >, die < Img Src = "1.jpg"/ > und so weiter.
• Tags können verschiedene Eigenschaften haben können, oder sie ohne Attribute.

Syntax für Etiketten:

• 1 = "Eigenschaftswert 1" Eigenschaft 2 = "Eigenschaftswert 2"... Abschnitt der Inhalt der < / Label ist der Name des der
• 1 = "Eigenschaftswert 1" Eigenschaft 2 =... "Eigenschaftswert 2" / >

Ein paar wichtige Eigenschaften:

• ID: Die einzige ID HTML Dokument Baum, der eine Beschriftung definiert
• Klasse: Definieren Sie eine oder mehrere Klassennamen (Classname) für HTML-Elemente (CSS-Stil Klassenname)
• : Stil die Inline-des angegebenen Elements (CSS-Stil)

HTML-Kommentare

<!--Anmerkung Inhalt-->

Kommentare sind die Mutter des Codes. -Auszug aus Nezha Zitate

≪! DOCTYPE > Tags

≪! Der DOCTYPE > Erklärung muss die erste Zeile des HTML-Dokuments vor dem _-_-Label.

≪! Der DOCTYPE > Erklärung ist kein HTML-Label, es ist eine Anweisung an einen Web-Browser über die HTML-Version der Seite verwendet, um zu schreiben.

Allgemeine HTML-Tags im Kopf gemeinsamen tags

Etikett	Bedeutung
das	Definieren Sie einen Seitentitel
das	Definieren Sie ein internes Stylesheet
das	JS-Code definieren oder externe JS-Dateien vorstellen
das	Einführung einer externen Stylesheet-Datei
das	Original Webseiteninformationen definieren

META-tags

Meta-Tags Einführung:

• Mata-Informationselement enthält original Informationen Seite, Beschreibungen und Schlüsselwörter für die Suchmaschinen und Update-Frequenzen.
• _ _ Label befindet sich an der Spitze des Dokuments und enthält nichts.
• Die Angaben der % ist nicht für den Benutzer sichtbar.

Zusammensetzung von META-Tags: Meta-Tags verfügen über zwei Eigenschaften, sie sind http-Equiv Eigenschaften und Namen Eigenschaften, unterschiedliche Eigenschaften haben unterschiedliche Parameterwerte, diese unterschiedliche Parameterwerte zu verschiedenen Web-Funktion.

1.http-Equiv Eigenschaft: der Datei-Header des HTTP, die einige nützliche Informationen an den Browser zu helfen, den Inhalt der Webseite korrekt angezeigt zurücksenden kann, entspricht der Wert der Eigenschaft der Inhalte in den Inhalt entspricht eigentlich der Wert der Variablen der einzelnen Parameter.

<! – 2 Sekunden nach dem Sprung auf die entsprechende URL, achten Sie darauf, das Anführungszeichen--> < Meta http-Equiv = "Refresh" Content = "2;" URL = https://www.oldboyedu.com "!--den Codierungstyp des angegebenen Dokuments-->< Meta http-Equiv =" Content-Type "Charset = UTF-8" !--Sagen IE, um das Dokument zu rendern, im Superlativ Modus-->< Meta http-Equiv = "X-Ua-Compatible" Content = "Ie = Edge"

2. benennen Sie Attribute: hauptsächlich verwendet, um die Web-Seite, der Wert der entsprechenden Eigenschaft des Inhalts, beschreiben Inhalt im Inhalt ist vor allem leicht für Suchmaschinen-Robot, Informationen und Klassifizierung zu finden.

≪ Meta Name = "Keywords" Content = "Meta-Zusammenfassung, HTML-Meta, Meta-Attribute, Meta-Sprung" >< Meta Name = "Description" Content = " Old boy Bildung Python College"

Einfaches Etikett (Block-Level-Label und Inline-Label) häufig verwendet im Körper

% Zuzüglich Crude
Die kursiv
Die # Unterstreichung von der
Die Löschung der

# Absatz Label von der

Der Titel des 1 < / h1 >
Der Titel des 2 < / h2 >
Die Titel der 3 < / h3 >
Der Titel der 4 < / h4 >
Die Titel der 5 < / h5 >
Der Titel der 6 < / h6 >

<!--Linie Verpackung-->
das

<!--horizontale Linie--> < hr >

Sonderzeichen

Inhalt	Entsprechenden Code
Raum	das
das	das
das	das
das	das
￥	das
Copyright	das
Registriert	das

Labels der Div und span

Div-Tags dienen zum Definieren eines Block-Level-Element und haben keine praktische Bedeutung. Es ist vor allem eine unterschiedliche Leistung durch CSS-Stile gegeben.
Span-Tags dienen zum definieren Inlineelemente (Inline) und haben keine praktische Bedeutung. Es ist vor allem eine unterschiedliche Leistung durch CSS-Stile gegeben.

Der Unterschied zwischen einem Element auf Blockebene und ein Inline-Element:
Ein Block-Element ist ein Element, das Rendern in eine andere Zeile beginnt, und ein Inline-Element erfordert keine eine andere Linie. Wenn Sie diese beiden Elemente separat in eine Webseite einfügen, gibt es keine Auswirkungen auf die Seite.
Diese beiden Elemente sind speziell für CSS-Stile definieren.

Achtung:

Über Label Verschachtelung: Block-Level Elemente können in der Regel enthalten Inline-Elemente oder einige Blockebenen-Elemente, aber Inline-Elemente können keine Block-Level Elemente enthalten, sie können nur andere Inline-Elemente enthalten.

Das P-Label kann nicht Blockebenen-Etiketten enthalten, noch kann die P-Label enthalten die P-Label.

IMG-Tags

≪ Img Src = "Bildpfad" Alt = "Bild wird nicht geladen, wenn die Eingabeaufforderung" Titel = "Maus Aussetzung Fenster mit der Meldung" Breite = Höhe der "Breite" = "hoch (Breite zwei Eigenschaften nur mit einem werden automatisch als Zoom gleich)"

A-tags

Hyperlink tags

Ein Hyperlink ist eine Verbindung, die von einer Webseite zu einem Ziel, die sein kann, eine andere Seite, eine andere Stelle auf der gleichen Seite, ein Bild, eine e-Mail-Adresse, eine Datei oder sogar eine Anwendung verweist.

URL

≪ Ein Href = "http://www.oldboyedu.com" Target = "_blank"

Die Href-Eigenschaft gibt die Seite Zieladresse. Es können mehrere Arten von Adressen:

• Absolute URL-Punkt an einen anderen Ort (z. B. Href = "http://www.jd.com)
• Relative URL verweist auf den genauen Pfad in der aktuellen Site (Href = "index.htm")
• Ankerpunkt URL in Seite zu verankern (Href = "#top")

Ziel

• _Blank weist darauf hin, dass die Zielseite in der neuen Registerkarte geöffnet wird
• _Self weist darauf hin, dass die Zielseite im aktuellen Tab öffnet

Liste

(1) ungeordnete Liste

≪ Ul-Typ = "disc", erste der folgenden

Type-Eigenschaft:

• Scheibe (ausgefüllter Punkt, Standard)
• Kreis (Hollow Circle)
• Quadrat (ausgefülltes Quadrat)
• None (kein Stil)

(2) geordnete Liste

≪ Ol-Typ = "1" Start = "2" das erste Element von der

Type-Eigenschaft:

• 1 Liste, Standardwert
• Ein Großbuchstabe
• Ein Kleinbuchstaben
• Ⅰ Hauptstadt Rom
• Ⅰ Kleinbuchstaben Rom

3. Titel-Liste

1 < /dt > 1 < /dd > der folgenden ist der Titel der DD > Inhalt 2 < /dd >< /dl >

Form

Eine Tabelle ist eine zweidimensionale Daten-Raum, eine Tabelle bestehend aus mehreren Reihen und einer Reihe, bestehend aus mehreren Zellen, die Text, Listen, Muster, Formen, numerische Symbole, vordefinierten Text enthalten kann und anderen Tabellen.
Das wichtigste Ziel des Tisches ist Klasse Tabellendaten anzeigen. Tabellenklasse Daten beziehen sich auf die Daten, die am besten geeignet, um eine Organisation für Tabellenformat (d. h. von Zeile und Spalte Organisation).
Grundstruktur der Tabelle:

Der Name des "No." Die < TD & G der   T; Niang des Tages, der PT. das

Eigenschaft:

• Grenze: Tabellenrahmen.
• Cellpadding: Innere Rand
• CellSpacing: der äußere Abstand.
• Breite: Pixel Prozentsatz. (vorzugsweise mit CSS, legen Sie die Länge und Breite)
• RowSpan: Wie viele Zeilen sind die Zellen vertikal hinüber
• Colspan: Wieviele Spalten erstreckt sich über eine Zelle (d. h. eine verbundene Zelle)

Form

Funktion:

Formulare werden verwendet, um Daten an den Server, damit Benutzer zur Interaktion mit dem WEB-Server übertragen

Das Formular kann input Reihenbezeichnungen wie Textfelder, Checkboxen, Radio-Boxen, senden-Schaltflächen, usw. enthalten.

Das Formular kann auch enthalten Textarea, auswählen, FieldSet, und Beschriften von Etiketten.

Formular-Eigenschaften

Immobilien	Beschreiben
Akzeptieren-charset	Gibt den Zeichensatz in der eingereichten Form verwendet (Standard: Seite Zeichensatz).
Aktion	Geben Sie an, wo das Formular Adresse (URL) (Submit-Seite) zu übermitteln.
AutoVervollständigen	Gibt an, dass der Browser sollte automatisch beim Ausfüllen des Formulars (Standard: auf).
Encodingtyp	Gibt die Kodierung der übermittelten Daten (Standard: Url-kodiert).
Methode	Gibt die HTTP-Methode zu verwenden, wenn das Formular absenden (Standard: bekommen).
Name	Gibt den Namen des Formulars Identifikation (für DOM-Einsatz: document.forms.name).
Novalidate	Gibt an, dass der Browser nicht die Form validiert.
Ziel	Gibt das Ziel der Adresse in der Action-Eigenschaft (Standard: _self).

Formular-Elemente

Grundlegende Konzepte:
HTML-Formulare sind komplexere Teile von HTML-Elementen, Formen werden oft mit Skripts, dynamische Seiten, Datenverarbeitung und anderen Funktionen kombiniert, so ist es sehr wichtig, um dynamische Webseiten zu machen.
Formulare werden in der Regel verwendet, um Benutzer eingegebenen Informationen sammeln
Nährboden für Arbeit:
Besucher können die erforderlichen Informationen ausfüllen, wenn sie eine Web-Seite mit einem Formular durchsuchen, und drücken Sie eine Taste, um ihn zu unterbreiten. Diese Informationen werden über das Internet an den Server übermittelt.
Diese Daten werden durch ein spezielles Programm auf dem Server verarbeitet, und wenn ein Fehler vorliegt, wird eine Fehlermeldung zurückgegeben, und ein Fehler muss behoben werden. Wenn die Daten vollständig und richtig sind, speist der Server wieder eine Eingabe, um die Informationen zu vervollständigen.

Importieren von django.conf.urls Import Urlfrom django.shortcuts HttpResponsedef hochladen (Request): Print ("Request. Holen Sie sich: ", auf Anfrage. Holen Sie sich) Print ("Request. Beitrag: ", beantragen." POST) wenn Anfrage. Dateien: Filename = Anforderung. Dateien ["File"] .name mit offenen (Dateiname, "WB") als f: für die Brocken in Anfrage. Dateien [' Datei '] (.chunks): F.write (Chunk) zurückgeben return HttpResponse HttpResponse ("erfolgreich hochgeladen") ("kopieren,!" ") Urlpatterns = [Url (R ' ^ hochladen /", hochladen),]

Eingang

_ _ Element ändert sich in einer Vielzahl von Formen, basierend auf verschiedenen Eigenschaften.

Wert der Type-Eigenschaft	Ausdrucksformen	Entsprechenden Code
Text	Single Line Input text	≪ Input Type = Text "/ >
Passwort	Passwort-Eingabefeld	≪ Input Type = "Password" / >
Datum	Datum-Eingabefeld	≪ Input Type = "Datum" / >
CheckBox	Aktivieren Sie das Kontrollkästchen	≪ Input Type = "Checkbox" überprüft = "Checked" / >
Radio	Einzelne Select-box	≪ Input Type = "Radio" / >
Senden	Schaltfläche einreichen	≪ Input Type = "Submit" Value = "eingereicht" / >
Zurücksetzen	Reset-Taste	≪ Input Type = "reset" Wert = "reset" / >
Schaltfläche "	Schaltfläche "normal"	≪ Input Type = "Button" Value = "normale Tasten" / >
Versteckt	Eingabefeld ausblenden	≪ Input Type = "hidden" / >
Datei	Text-Auswahl-box	≪ Input Type = "File" / >

Hotelbeschreibung:

• Name: die "Taste", wenn das Formular gesendet wird, den Unterschied zwischen der Notiz und die ID
• Wert: Werte für die entsprechenden Gegenständen zum Zeitpunkt der Übermittlung des Formulars
  • Type = "button", "Reset", "Absenden", wenn der Text auf der Schaltfläche "Jahr Inhalt angezeigt wird
  • Type = "Text", "Password", "versteckt" als der Anfangswert des Eingabefeldes
  • Type = "Checkbox", "Radio", "File", der Wert der Eingabe zugeordnet
• Geprüft: Radio und Checkbox Standard ausgewählte Elemente
• ReadOnly:Text und das Kennwort festlegen, nur-Lese
• Behinderte: alle Eingänge gelten

Tags auswählen

≪ Formularaktion = "Methode ="post", < select Name =" Stadt "Id ="Stadt", < option Value ="1", Beijing ≪ Option ausgewählt = "Selected" Value = "2", Shanghai, < option Value = "3", Guangzhou < Option Wert = "4", Shenzhen,

Hotelbeschreibung:

• Mehrere: Boolean-Eigenschaft festlegen, Mehrfachauswahl, sonst Standard radio
• Disabled: deaktivieren
• Ausgewählte: Dieser Artikel ist standardmäßig aktiviert
• Wert: Definiert den Wert der Option zum Zeitpunkt der Einreichung

Label-tags

A: < Label > Label definieren einen Detailausschnitt (Tag) für ein INPUT-Element definiert.
Hinweis

1. Das Label-Element stellt keine Spezialeffekte für dem Benutzer.
2. Der Eigenschaftswert für _ _ Label sollte der Wert der ID-Eigenschaft des zugehörigen Elements identisch sein.

≪ Formularaktion = "" < label für "Username" = "Die" "" die "" die "" Username"

TextArea mehrere Textzeilen

≪ Textarea Name = "Memo" Id = "Memo" Cols = "Zeilen =" ["]" den Inhalt der Standard der

Hotelbeschreibung:

• Name: Titel
• Zeilen: Anzahl der Zeilen
• COLS: Anzahl der Spalten
• Disabled: deaktivieren

HTML-Inhalt der Front-End-wissen