Gemeinschaft
Lernen
Tools-Bibliothek
KI-Tools
Freizeit
suchen
Deutsch
Heim Web-Frontend HTML-Tutorial Zusammenstellung von Frontend-HTML-Wissenspunkten

Zusammenstellung von Frontend-HTML-Wissenspunkten

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Aug 22, 2016 am 10:13 AM

1. HTML-Übersicht

　htyper Text Markup Language ist Hypertext Markup Language

Hypertext: Dies bedeutet, dass die Seite Bilder, Links und sogar Nicht-Text-Elemente wie Musik und Programme enthalten kann.

Auszeichnungssprache: Eine aus Tags bestehende Sprache Webseite == HTML-Dokument, vom Browser analysiert und zur Anzeige verwendet

Statische Webseite: statische Ressourcen, z. B. xxx.html

Dynamische Webseite: HTML-Code wird dynamisch von einer bestimmten Entwicklungssprache basierend auf Benutzeranfragen generiert

Das Folgende ist das Baumstrukturdiagramm der HTML-Datei

　

　Das Konzept der Tags

:

besteht aus einem Wortpaar in spitzen Klammern. Beispiel: *Die Wörter in allen Tags dürfen nicht mit einer Zahl beginnen.

Beim
    -Tag wird die Groß-/Kleinschreibung nicht beachtet und wird empfohlen Das
  • -Tag ist in zwei Teile unterteilt: das Start-Tag und das End-Tag . Der Teil zwischen den beiden Tags wird als Tag-Körper bezeichnet.
  • Einige Tag-Funktionen sind relativ einfach. Diese Art von Tag wird als selbstschließendes Tag bezeichnet. img />
  • Tags können verschachtelt werden, aber nicht über Kreuz verschachtelt werden
  • 　
    • Attribute des Tags:
  • 　

erscheint normalerweise in Form von Schlüssel-Wert-Paaren, zum Beispiel name="alex" Attribute können nur in öffnenden oder selbstschließenden Tags erscheinen.

    Attributnamen sind alle in Kleinbuchstaben geschrieben. *Attributwerte müssen in doppelte oder einfache Anführungszeichen gesetzt werden. Beispiel: name="alex"
    • Wenn der Attributwert und der Attributname genau gleich sind, schreiben Sie einfach den Attributnamen direkt. Beispiel: schreibgeschützt
  • 2. Einführung in die Haupt-Tags von head

　

Die Zusammensetzung des Meta-Tags: Das Meta-Tag hat zwei Attribute, nämlich das http-equiv-Attribut und das Namensattribut. Diese unterschiedlichen Parameterwerte realisieren unterschiedliche Webfunktionen .

  • 　1 Das Namensattribut wird hauptsächlich zur Beschreibung von Webseiten verwendet, und der entsprechende Attributwert ist Inhalt. Der Inhalt im Inhalt wird hauptsächlich von Suchmaschinenrobotern verwendet, um Informationen zu finden und Informationen zu klassifizieren.

　2 http-equiv entspricht, wie der Name schon sagt, der Datei-Header-Funktion von http. Es kann einige nützliche Informationen an den Browser zurückgeben, um den Inhalt einer Webseite korrekt und genau anzuzeigen. Inhalt Der Inhalt ist eigentlich der Variablenwert jedes Parameters.

//(Beachten Sie die Anführungszeichen am Ende, vor den Sekunden und nach der URL . )

Oldboy

  • 3. Body-Tag

Grundlegende Tags:

　

　: Der Wertebereich von n reicht von groß bis klein; wird zur Darstellung des Titels verwendet.

　

: Der umbrochene Inhalt wird umbrochen. Zwischen dem oberen und unteren Inhalt befindet sich auch eine Leerzeile

　 : Fettgedruckte Beschriftung.

　: Fügen Sie dem Text eine Mittellinie hinzu.

　: Der Text wird kursiv.

　 und : hochgestellt und tiefgestellt.

　
: Zeilenumbruch.

　

:Horizontale Linie

　

　　

　　块级标签和内联标签

　　块级标签：

：
　　

　　border: 表格边框.

　　cellpadding: 内边距

　　cellspacing: 外边距.

　　width: 像素 百分比.（最好通过css来设置长宽）

　　

: table row

         　　

(不常用): 为表格进行分区

　　表单标签

　　

　　表单用于向服务器传输数据。

      表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。

      表单还可以包含textarea、select、fieldset和 label 元素。

　　1、表单的属性

　　HTML 表单用于接收不同类型的用户输入，用户提交表单时向服务器传输数据，从而实现用户与Web服务器的交互。表单标签, 要提交的所有内容都应该在该标签中.

　　action: 表单提交到哪. 一般指向服务器端一个程序,程序接收到表单提交过来的数据（即表单元素值）作相应处理，比如https://www.sogou.com/web

　　method: 表单的提交方式 post/get 默认取值 就是 get（信封）

　　 get: 1.提交的键值对.放在地址栏中url后面. 2.安全性相对较差. 3.对提交内容的长度有限制.

　　post:1.提交的键值对 不在地址栏. 2.安全性相对较高. 3.对提交内容的长度理论上无限制.

　　 get/post是常见的两种请求方式.

　　2.表单元素

　　

　　     type:     text 文本输入框

Passwort-Passwort-Eingabefeld

Radio-Optionsschaltfläche

                    Kontrollkästchen                                                                                                                                                     Kontrollkästchen

Senden-Button

Button Button (muss mit js verwendet werden.) Was ist der Unterschied zwischen Button und Submit?

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

　

<span style="color: #008080;"> 1</span> <span style="color: #0000ff;">def</span><span style="color: #000000;"> index(request):
</span><span style="color: #008080;"> 2</span>     <span style="color: #0000ff;">print</span><span style="color: #000000;"> request.POST
</span><span style="color: #008080;"> 3</span>     <span style="color: #0000ff;">print</span><span style="color: #000000;"> request.GET
</span><span style="color: #008080;"> 4</span>     <span style="color: #0000ff;">print</span><span style="color: #000000;"> request.FILES
</span><span style="color: #008080;"> 5</span>     <span style="color: #0000ff;">for</span> item <span style="color: #0000ff;">in</span><span style="color: #000000;"> request.FILES:
</span><span style="color: #008080;"> 6</span>         fileObj =<span style="color: #000000;"> request.FILES.get(item)
</span><span style="color: #008080;"> 7</span>         f = open(fileObj.name, <span style="color: #800000;">'</span><span style="color: #800000;">wb</span><span style="color: #800000;">'</span><span style="color: #000000;">)
</span><span style="color: #008080;"> 8</span>         iter_file =<span style="color: #000000;"> fileObj.chunks()
</span><span style="color: #008080;"> 9</span>         <span style="color: #0000ff;">for</span> line <span style="color: #0000ff;">in</span><span style="color: #000000;"> iter_file:
</span><span style="color: #008080;">10</span> <span style="color: #000000;">            f.write(line)
</span><span style="color: #008080;">11</span> <span style="color: #000000;">        f.close()
</span><span style="color: #008080;">12</span>     <span style="color: #0000ff;">return</span> HttpResponse(<span style="color: #800000;">'</span><span style="color: #800000;">ok</span><span style="color: #800000;">'</span>)
Nach dem Login kopieren
Code anzeigen
　 Name: Der Schlüssel des Formularübermittlungselements: Das Namensattribut ist der Name, der bei der Kommunikation mit dem Server verwendet wird Und in
, um die Client-Programmierung zu vereinfachen

Wird in CSS und Javascript verwendet.

Wert: Der Wert des Formularübermittlungselements. Für verschiedene Eingabetypen ist auch die Verwendung des Wertattributs unterschiedlich:

　

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

type="text", "password", "hidden" – Definieren Sie den Anfangswert des Eingabefelds

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

aktiviert: Radio und Kontrollkästchen sind standardmäßig aktiviert

schreibgeschützt: schreibgeschützter Text und Passwort

deaktiviert: Funktioniert gut für alle verwendeten Eingaben.

　

: table head cell

        　　 

: table data cell

　　rowspan: 单元格竖跨多少行

　　colspan:  单元格横跨多少列（即合并单元格）

　　

: table header