Über den Autor: Hallo zusammen, ich bin Xiao Tang (๑><๑), Xiao Tang, der hart für seinen Traum arbeitet, lasst uns zusammenarbeiten! ! !
Persönliche Homepage: Xiaotangs Blog-Homepage (๑><๑)
Anfänger, redet nicht gerne miteinander, bitte korrigiert mich, wenn ich falsch liege
Inhaltsverzeichnis
Formular-Tab: (Anmeldefenster)
HTML-Erklärung:
HTML: Hypertext-Auszeichnungssprache
HTML wird im Browser ausgeführt und Tags werden vom Browser analysiert
Die Webseite besteht aus drei Teilen:
Struktur: HTML
Leistung: CSS
Verhalten: JavaScript
Einfache Etiketteneinführung:
Das <HTML>-Tag definiert ein HTML-Dokument
<head>-Tag definiert Dokumentinformationen
<title> definiert den Titel des Dokuments
<body> definiert den Betreff des Dokuments
<font> definiert Attribute (Schriftart, Größe, Farbe des Textinhalts)
<font face="楷体"size="5"color="#ffc0cb">大哥666</font><h1> definiert die Tags 1-6 (1 ist das größte, 6 das kleinste)
<b>Fett</b>
<i>Kursiv
<u>unterstreichen
<hr> definiert die horizontale Linie
<br>Zeilenumbruch definieren
<p>Absätze definieren
<center> definiert die Mitte des Textes
<img> definiert das Bild
src: gibt die URL zum Anzeigen des Bildes an (Uniform Resource Locator -- path (absoluter Pfad, relativer Pfad))
height: Bildhöhe (Einheit: 1. Pixel px 2. Prozent)
width: Definiere die Bildbreite (Einheit: 1. Pixel px 2. Prozent)
<audio> definiert Audio
src: gibt die URL des Audios an
Steuerelemente: Anzeige der Wiedergabesteuerung
<video> definiert das Video
src: gibt die URL des Videos an
Steuerelemente: Anzeige der Wiedergabesteuerung
<a>: Hyperlink-Tag – definiert einen Hyperlink zum Verbinden mit einer anderen Ressource
href: Gibt die URL für den Zugriff auf die Ressource an
Ziel: Geben Sie an, wie die Ressource geöffnet werden soll
_self: Standardwert, auf der aktuellen Seite öffnen
_blank: Auf einer leeren Seite öffnen
Listenlabel:
<ol> definiert eine geordnete Liste
<ul>-Definition ohne Liste
<li>Listenelemente definieren
Das type-Attribut ist die Änderungskennung (1.-2.-3.)
Bestelltes Etikett (Bestellliste):
<ol>
<li>咖啡</li>
<li>茶</li>
</ol>Ungeordnete Liste (ungeordnete Liste):
<ul>
<li>咖啡</li>
<li>茶</li>
</ul>Registerkarte „Formular“:
Tabelle: Definieren Sie die Tabelle
border: legt die Breite des Tabellenrandes fest
Breite: gibt die Breite der Tabelle an
Cellspacing: Gibt den Abstand zwischen Zellen an
tr: Linie definieren
align: definiert die inhaltliche Ausrichtung der Tabellenzeile (linksbündig linksbündig, rechtsbündig rechtsbündig und zentriert bündig)
td: Zelle definieren
rowspan: Gibt die Anzahl der Zeilen an, die eine Zelle umfassen kann
colspan: Gibt die Anzahl der Spalten an, die eine Zelle überspannen kann
<th> Kopfzelle (kann fett sein)
Registerkarte „Layout“:
<div>: definiert den Bereichsteil des HTML-Dokuments, wird oft zusammen mit CSS verwendet, um die Webseite zu gestalten (volle Zeile)
<span> wird verwendet, um Inline-Elemente zu gruppieren
Formular-Tab: (Anmeldefenster)
Formular: Auf der Webseite ist es hauptsächlich für die Datenerfassungsfunktion verantwortlich, wobei das <form>-Tag verwendet wird, um das Formular zu definieren
Formularelemente (Elemente): verschiedene Arten von Eingabeelementen, Dropdown-Listen, Textfelder usw.
<Form>: definiert die Form, die ein Ganzes ist
Attribute:
Aktion: Gibt an, wohin die Formulardaten gesendet werden sollen, wenn das Formular gesendet wird, URL (Uniform Resource Locator – Pfad (absoluter Pfad, relativer Pfad)) (Standard „#“ – sendet die Webseite und später an den Server)
Methode: Gibt die Methode an, die zum Senden von Formulardaten verwendet wird
1.get: Der Browser hängt die Daten direkt nach der Aktions-URL des Formulars an, und die Größe ist begrenzt (4KB)
2. Post: Der Browser fügt die Daten in den Nachrichtentext der HTTP-Anfrage ein, die Größe ist unbegrenzt (wird ausgeblendet).
<input>: Definieren Sie das Formularelement, steuern Sie das Eingabeformular über das Attribut type
Wert eingeben:
text : Standardwert, definiert ein einzeiliges Eingabefeld
Passwort: definiert das Passwortfeld
radio: definiert das Optionsfeld
checkbox: Checkbox definieren (Mehrfachauswahl)
file: definiert die Schaltfläche zum Hochladen von Dateien
hidden: Definiere versteckte Eingabefelder (werden nicht auf der Seite angezeigt, können aber auf der Entwicklerseite angezeigt werden)
Submit: Definieren Sie die Submit-Schaltfläche, die die Formulardaten an den Server sendet
Zurücksetzen: Definieren Sie die Schaltfläche „Zurücksetzen“. Die Schaltfläche „Zurücksetzen“ löscht alle Daten im Formular
button: Anklickbare Buttons definieren (kombiniert mit js um Effekte zu erzeugen)
<select>: definiert die Dropdown-Liste, <option> definiert das Listenelement
<textarea>: Textfeld (lässt Sie das Formular zur Verbesserung ausfüllen)
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="#" method="post">
用户名：<input type ="text" name ="username"><br>
密码：<input type="password" name="userpassword"><br>
<!--name 用于提交数据-->
<br>
<!--扩大按钮点击区域-->
<label for="username">用户名：</label>
<br>
<input type ="text" name ="username" id="username">
<br>
<input type="submit" value="免费注册">
<!-- value 给按钮设置文本显示内容-->
<!-- 单选框-->
<br>
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<br>
<!-- 多选框-->
爱好：
<input type="checkbox" name="hobby"value="1">旅游
<input type="checkbox"name="hobby"value="2">电影
<input type="checkbox"name="hobby"value="3">游戏
<!-- 文件-->
<br>
头像：
<input type="file"> <br>
<!--下拉列表-->
城市：
<select name="city"><!--name是指定属性，必须指定属性才能提交-->
<option>上海</option>
<option>北京</option>
</select>
<br>
意见 ： <textarea></textarea>
</form>
</body>
</html>