Zusammenfassung zum Erlernen von HTML-Tags und Grundelementen
|
1. Elemente und Tags in HTML <br />Ein Element ist ein geschlossener Bereich, der durch ein einzelnes Tag oder ein Tag-Paar definiert wird. Ein Tag ist eine Zeichenfolge mit einem Kleiner-als-Zeichen (<) und einem Größer-als-Zeichen (>) links und rechts. Ein Starttag ist ein Tag, der nicht mit einem Schrägstrich (/) beginnt und eine Folge zulässiger Attribut-Wert-Paare enthält. Das schließende Tag beginnt mit einem Schrägstrich (/). wie: Code kopieren Der Code lautet wie folgt:<html>//Startsymbol. Auch ohne Browser kann es analysiert werden <head> //Dokumentkopfzeile beginnen <Titel> Mein Name ist Cauthy! //Beginn des Dokumenttitels </title>//Ende des Dokumenttitels </head> //Ende des Dokumentkopfes <body color="red">//Dokumenttext beginnen Hallo Welt! //Vom Browser angezeigter Inhalt </body>//Ende des Dokumenttexts </html> //HTML-Dokument beenden Hinweis: In HTML wird bei Attributen und Tags die Groß-/Kleinschreibung nicht beachtet. Attributwerte können in Anführungszeichen eingeschlossen sein oder nicht. 3. Tags im Zusammenhang mit der Absatzsteuerung <palign="#"> bedeutet Absatz, Funktion: einen Absatz erstellen. Das Attribut align gibt die Ausrichtung des Segments an. Diese kann linksbündig oder rechtsbündig sein. <br> bedeutet Zeilenumbruch Funktion: Zeilenumbruch <hrcolor="””> gibt eine horizontale Linie an. Funktion: Fügt eine horizontale Linie ein. Das Attribut gibt die Farbe an. Sie können rotes Grün oder hexadezimale Zahlen wie #ffoooo verwenden. Code kopieren Der Code lautet wie folgt:<html> <head><title>Gedanken einer ruhigen Nacht</title></head> <Text> <p ausrichten="zentrieren"> Ruhige Nachtgedanken <hr color="#ffoooo"> <p ausrichten="zentrieren"> Das Mondlicht scheint hell vor meinem Bett, ich dachte, es wäre Frost auf dem Boden. Wenn ich zum hellen Mond aufblicke, denke ich an meine Heimatstadt. </body> </html>//Wirkungsdiagramm 4. Tags im Zusammenhang mit der Textanzeige <center>…</center>: Text zentrieren <hn align="”>…<hn>: wird verwendet, um den Titel des Dokuments anzugeben, n ist eine Ganzzahl von 1 bis 6, 1 steht für den größten Titel und das Attribut align steht für die Ausrichtung des Titels, die zentriert, links oder rechts sein kann <fontsize=”n”color=””>…</font>: wird zum Einstellen der Schriftart verwendet, Größe gibt die Schriftgröße an, n kann eine Ganzzahl von 1 bis 7 sein, je größer die Zahl, desto größer die angezeigte Schriftart. <b>…</b>: Text fett darstellen <i>…</i>: Setzt den Text auf kursiv Code kopieren Der Code lautet wie folgt:<html> <head><title>Gedanken einer ruhigen Nacht</title></head> <Text> <Mitte> <h1><fontcolor="red"><b><i>Gedanken in einer ruhigen Nacht</i></b></font></h1> Li Bai <hr color="#ffoooo"> <p> <Schriftfarbe="blau"Größe=6> Das Mondlicht scheint hell vor meinem Bett, ich dachte, es wäre Frost auf dem Boden. Wenn ich zum hellen Mond aufblicke, denke ich an meine Heimatstadt. </font> </center> </body> </html> 5. So geben Sie Sonderzeichen ein <br />In HTML-Dokumenten müssen Symbole wie geschützte Leerzeichen, Zeilenumbrüche, reservierte HTML-Wörter und einige Zeichen, die auf der Tastatur nicht vorhanden sind, in Anführungszeichen gesetzt werden, damit sie eingegeben werden können. In HTML gibt es zwei Arten von Referenzen: Zeichenreferenzen und Entitätsreferenzen. Sowohl Zeichenreferenzen als auch Entity-Referenzen beginnen mit einem & und enden mit einem Semikolon (;). Wenn Sie eine Zeichenreferenz verwenden, müssen Sie nach dem & ein # hinzufügen, gefolgt vom Dezimalcode oder Hexadezimalcode (der Kodierung des Zeichens im ISO 10646-Zeichensatz) des gewünschten Zeichens. Wenn Sie eine Entity-Referenz verwenden, schreiben Sie die Mnemonik des Zeichens nach dem &. In HTML können Leerzeichen mithilfe von Leerzeichen in voller Breite eingegeben werden. 6. Kommentare in HTML <!--Dies ist der Inhalt des Kommentars--> 7. Klassenliste – Erstellen Sie eine nummerierte Liste <br />Verwenden Sie die Tags <ol> und <li>, um eine nummerierte Liste zu erstellen. Mit dem Typattribut kann der Typ des Nummerierungssystems angegeben werden: A (A, B, C), a (a, b, c), I (III III), i (i ii iii) 1 (1, 2, 3). Standardmäßig wird das Startattribut im <ol>-Tag verwendet, um die Startnummer festzulegen. Verwenden Sie das Wertattribut im <li>-Tag, um die Reihenfolge der Zahlen in der Liste zu ändern. Verwenden Sie die Tags <ul> und <li>, um Aufzählungslisten zu erstellen. Das Typattribut in Ul kann Scheibe (ausgefüllter Kreis), Quadrat (ausgefülltes Quadrat) oder Kreis (hohler Kreis) sein. Verwenden Sie die Tags <dl> und <dt>, um vorzeichenlose Listen zu erstellen, und verwenden Sie das Tag <dd> anstelle von <dt>, um eingerückte Listen zu erstellen. Verwenden Sie sowohl die Tags <dt> als auch <dd> innerhalb eines <dl>-Elements, um eine Begriffsliste zu erstellen. Listenelemente in einer Begriffsliste bestehen aus zwei Teilen, dem Begriff und seiner Beschreibung. Der Begriff wird durch das Tag <dt> und die Beschreibung durch das Tag <dd> angegeben. Code kopieren Der Code lautet wie folgt:<ol start="10"Typ="I"> Mathematik <livalue="20">Sprache <li>Physik </ol> <ul Typ="Kreis"> Mathematik <li>Sprache <li>Physik </ul> <dl> Mathematik <dd>Sprache <dt>Physikalisch <dd>Chemie </dl> 8. Tabelle <br />Die Tabelle wird mit <table border= n align=”” bgcolor=””>…</table> erstellt, wobei border die Breite der Tabelle ist. Der Standardwert ist 0, was bedeutet, dass die Breite der Tabelle nicht angezeigt wird. <caption>…</caption>: Wird verwendet, um den Titel der Tabelle zu definieren <tralign=”” valign=”” >…</br>: Das Attribut align gibt die horizontale Ausrichtung dieser Zeile an, die linkszentriertrechts sein kann. valign gibt die vertikale Ausrichtung an, die oben, mittig oder unten sein kann. <th>…</th>: wird für Tabellenüberschriften verwendet <td>…</td>: wird verwendet, um eine Zelle zu definieren Code kopieren Der Code lautet wie folgt:<html> <head><title>Tabelle</title></head> <Text> <table border="5"align="center" bgcolor="bule"> <caption>Prüfungsergebnisse</caption> <tr align="center"valign="middle"> <th>Sprache</th> <th>Mathematik</th> <th>Englisch</th> </tr> <tr align="center"valign="middle" > <td>80</td> <td>70</td> <td>60</td> <tr align="center"valign="middle" > <td>60</td> <td>70</td> <td>80</td> </Tabelle> </body> </html> 9. Formularerstellung <form method="get or post" action="URL">: Das Attribut „Methode“ gibt die HTTP-Methode an, die beim Senden von Daten an den Server verwendet wird. Dies kann eine Get- oder Post-Methode sein. Get ist die Standardmethode. Wenn die Get-Methode zum Senden eines Formulars verwendet wird, werden die gesendeten Daten an das Ende der URL (angegeben im Aktionsattribut) angehängt und als Teil der URL an den Server gesendet. Wenn wir beispielsweise die Aktion auf reg.asp festlegen, sehen wir nach dem Senden des Formulars http://localhost:8080/reg.asp?user=zhangsan&pwd=1234 in der Browseradresse. Die Post-Methode sendet die Informationen im Menü als Datenblock an den Server. Unabhängig davon, welche Methode verwendet wird, ist die Datenkodierung dieselbe, im Format: name1=value1&name2=value2 Das Aktionsattribut gibt die Adresse des Skripts an, das das Formular verarbeitet. Mit anderen Worten: Wer verarbeitet das Formular, nachdem es an den Server übermittelt wurde? Die URL des Prozessors wird in der Aktion angegeben. <inputtype=””name=””size=””value=””>: Typ gibt den Typ des zu erstellenden Steuerelements an. Der Attributname wird verwendet, um den Namen des Steuerelements anzugeben. Das serverseitige Skript, das das Formular verarbeitet, kann die durch Name-Wert-Paare dargestellten Formulardaten abrufen und den Namen verwenden, um den entsprechenden Wert abzurufen. Das Name-Attribut wird im Formular nicht angezeigt und das Size-Attribut wird verwendet, um die anfängliche Breite des Steuerelements im Formular festzulegen. Der Attributwert gibt den Anfangswert des Steuerelements an. Steuerelement für einzeilige Texteingabe (Typ „text“) Schaltfläche „Senden“ (Typ „submit“) Reset-Button (type="rest") Passwort-Eingabesteuerung (type="password") Optionsfeld (Typ „Radio“) Kontrollkästchen (Typ „Checkbox“) Verstecktes Steuerelement (Typ „Hidden“) Erstellen Sie eine mehrzeilige Texteingabe <textarea name=”” rows=””cols=”” >…</textarea> Das folgende Beispiel verwendet eine Tabelle zur Steuerung des Formulars Code kopieren Der Code lautet wie folgt:<html> <head><title>Formular</title></head> <Text> <form method="get" action="reg.jsp"> <Tabellengrenze="0"> <tr valign="Mitte"></tr> <td>Benutzername:</td> <td><inputtype="text" size="20" name="Benutzer"></td> <tr align="left"valign="middle"></tr> <td>Passwort:</td> <td><inputtype="Passwort"></td> <tr align="left"valign="middle"> </tr> <td>Interessen</td> <td><inputtype="checkbox"name="interest" value="football">Fußball <input type="checkbox" name="interesse" value="basketball">Basketball </td> <tr align="left"valign="middle"></tr> <td>Geschlecht</td> <td><inputtype="radio" name="sex"checked value="1">Männlich <input type="radio"name="sex" value="0">Weiblich </td> </Auswählen></td> <tr align="left"valign="middle"></tr> <tdvalign="top">Persönliches Profil:</td> <td><textareaname="personal" rols="5" cols="20">Persönliches Profil</textarea> </td> <tr align="left"valign="middle"></tr> <td></td> <td><inputtype="hidden"value="001" name="id"></td> <tr align="left"valign="middle"></tr> <td></td> <td><inputtype="reset" value="Zurücksetzen"><inputtype="submit" value="Senden"></td> </Tabelle> </form> </body> </html> 10. Hyperlinks Code kopieren Der Code lautet wie folgt:<a href="URL">…Linktext</a> <a href="form.html">Aktuelles Verzeichnis</a> <ahref=../”form.html”>Das Verzeichnis über dem aktuellen Verzeichnis</a> <ahref=”E://form.html”>Absoluter Pfad</a> <ahref=”http://www.baidu.com”>World Wide Web-Adresse</a> 11. Bilder einbetten Code kopieren Der Code lautet wie folgt:<imag src=”URL” Breite=”” Höhe=””> |
<<: So integrieren Sie Bilder eleganter in Vue-Seiten
>>: Tutorial zum Erstellen eines Kommentarfelds mit Emoticons mithilfe von HTML und CSS
Artikel empfehlen
Mysql Sql-Anweisungsübungen (50 Fragen)
Tabellenname und Felder –1. Studentenliste Studen...
CentOS6.8 – Tutorial-Diagramm zum Umschalten der chinesischen/englischen Umgebung
1. Einleitung Personen, die nicht an die englisch...
Zusammenfassung ungewöhnlicher Operatoren und Operatoren in js
Zusammenfassung gängiger Operatoren und Operatore...
So verwenden Sie localStorage in JavaScript
Wenn Sie Entwickler sind und in die Welt von .NET...
Detailliertes Tutorial zur Konfigurationsmethode der kostenlosen Installationsversion von Mysql 5.7.19 (64-Bit)
Laden Sie mysql-5.7.19-winx64 von der offiziellen...
Vergleichende Analyse von IN und Exists in MySQL-Anweisungen
Hintergrund Als ich kürzlich SQL-Anweisungen schr...
Bezüglich des Problems der Verwendung von Webpack-Anweisungen in VSCode, das anzeigt: „Weil das Ausführen von Skripten in diesem System verboten ist“ (perfekte Lösung)
Wenn ich Vue lerne und immer Webpack-Anweisungen ...
HTML+CSS zum Erstellen des Spezialeffektcodes für das Blut-Sharingan und das Samsara-Auge
Das Ergebnis (vollständiger Code unten): Die Impl...
Detaillierte Erklärung und klassische Interviewfragen zum Vue-Lebenszyklus und zu Hook-Funktionen
Inhaltsverzeichnis 1. Vue-Lebenszyklus 2. Hook-Fu...
So stellen Sie die MySQL5.7-Kodierung auf utf8mb4 ein
Ich bin vor kurzem auf ein Problem gestoßen. Die ...
Ein praktisches Tutorial zum Erstellen einer vollständig verteilten Hadoop-Umgebung unter Ubuntu 16.4
Vorwort In diesem Artikel werden hauptsächlich di...
Detaillierte Erklärung der Lösung zum Vergessen des Passworts in MySQL 5.7
Umwelt: [root@centos7 ~]# uname -r 3.10.0-514.el7...
So stellen Sie einzelne Tabellendaten mithilfe der vollständigen MySQL-Datenbanksicherungsdaten wieder her
Vorwort Beim Sichern der Datenbank wird eine voll...
Detaillierte Erläuterung der Verwendung des gemeinsam genutzten Speichers in Nginx
Im Nginx-Prozessmodell erfordern Aufgaben wie Ver...
So verhindern Sie, dass die Bildlaufleiste die Seitenbreite beeinflusst, wenn die Bildlaufleiste auf der Seite angezeigt wird
Stellen Sie die Breite des Textkörpers auf die Bre...