Zusammenstellung von Frontend-HTML-Wissenspunkten

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 . )

• 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

　

　　

　　块级标签和内联标签

　　块级标签：

　　内联标签：_{^{><span></span>}}

　　block（块）元素的特点
　　① 总是在新行上开始；

　　
　　② 高度，行高以及外边距和内边距都可控制；
　　③ 宽度缺省是它的容器的100%，除非设定一个宽度。
　　④ 它可以容纳内联元素和其他块元素

　　inline元素的特点
　　① 和其他元素都在一行上；
　　② 高，行高及外边距和内边距不可改变；
　　③ 宽度就是它的文字或图片的宽度，不可改变
　　④ 内联元素只能容纳文本或者其他内联元素

　　对行内元素，需要注意如下 
　　设置宽度width 无效。
　　设置高度height 无效，可以通过line-height来设置。
　　设置margin 只有左右margin有效，上下无效。
　　设置padding 只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。

 

　　特殊字符：

      < >；"；©®

　　图形标签：　　

　　src: 要显示图片的路径.

　　alt: 图片没有加载成功时的提示.

　　title: 鼠标悬浮时的提示信息.

　　width: 图片的宽

　　height:图片的高 (宽高两个属性只用一个会自动等比缩放.)

　　超链接标签:　

　　href:要连接的资源路径 格式如下: href="http://www.baidu.com" 

 

　　target: _blank : 在新的窗口打开超链接. 框架名称: 在指定框架中打开连接内容.

 

　　name: 定义一个页面的书签.

 

　　用于跳转 href : #书签名称.

 

　　列表标签:　　

　　

: 无序列表

　　

:有序列表

     

1. :列表中的每一项.

   　　

   定义列表

        

   列表标题

        

   列表项

   　　表格标签

：
　　

　　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>)

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.

　 Dropdown-Auswahlbezeichnungsattribut:

Name: der Schlüssel des Formularübermittlungselements.

Größe: Anzahl der Optionen

mehrfach: mehrfach

& lt; Option & gt; jedes Attribut der Dropdown-Auswahl: Wert: der Wert des Formular-Sendeelements Ausgewählt: ausgewählt: AUSGEWÄHLT Auswahl nach unten, um den Standard

auszuwählen

                                                                                                                                                                              

　

　 Textbereichsname: der Schlüssel des Formularübermittlungselements. Spalten: wie viele Spalten der Textbereich standardmäßig hat. Zeilen: wie viele Zeilen der Textbereich standardmäßig hat <p>　<label></label></p> <p></p>                                                                                                                         www" <p>type=</p>"text"<p class="p1">><span class="s1"><span class="s2"><span class="s3"><span class="s1"><span class="s1"><br><span class="s2"><span class="s3"><span class="s2"><span class="s3"><span class="s1"> </span></span>　<fieldset></fieldset></span></span> </span></span> 　<fieldset>></fieldset></span> 　　<legend>>Anmelden</legend></span>></span></span></p> 　　<input class="p1">type=<span class="s1"> " text"</span>>　<p class="p1">><span class="s1"><span class="s1"><br><span class="s1"><span class="s1"><br><span class="s2"><span class="s3"><span class="s1"> <br> <span class="s1"> </span>　</span> </span> </span></span></span></span> </span></p>

: table head cell	: table data cell 　　rowspan: 单元格竖跨多少行 　　colspan:  单元格横跨多少列（即合并单元格）	: table header