Detaillierte Erklärung der grundlegenden HTML-Tags und -Strukturen
1. HTML-Übersicht1.HTML: Hypertext Markup Language. Es handelt sich um eine Identifikationssprache und nicht um eine Programmiersprache, und sie kann keine logischen Operationen verwenden. Tags werden verwendet, um die Dokumentformate im Internet zu vereinheitlichen und verstreute Netzwerkressourcen zu einem logischen Ganzen zu verknüpfen. Hypertext ist eine Möglichkeit, Informationen zu organisieren, indem mehrere Medien über Hyperlinks miteinander verknüpft werden. Schlagwörter: Schlagwörter. Mit <> umschlossener Inhalt hat eine bestimmte Bedeutung, beispielsweise: … Statische Webseite: unverändert Dynamische Webseiten: ändern sich gleichzeitig mit dem Hintergrund 2.HTML-Tag-Struktur1. Dokumentstruktur:
<!doctype html><!--! bedeutet Deklaration. Diese Codezeile bedeutet: Die folgenden Dokument-Tags werden als HTML5 analysiert -->
<html>
<!-Header. Wird verwendet, um die relevanten Einstellungen einer Webseite zu vervollständigen->
<Kopf>
<meta charset="utf-8"><!--Chinesische Zeichenkodierung--><!--meta: yuan, wird verwendet, um die entsprechenden Einstellungen zu vervollständigen-->
<meta name="keywords" content=""><!--Legen Sie ein Schlüsselwort für die Website-Suche fest-->
<meta name="description" content=""><!--Beschreibung der Website-->
<title>Meine erste HTML-Webseite</title><!--Title-->
<!--Das kleine Icon der Website festlegen-->
<link rel="Verknüpfungssymbol" href="" type="image/png">
<Stil>
/*Schreibstil*/
</Stil>
<link rel="stylesheet" href="style.css"><!--Wird verwendet, um externe Stildateien einzuführen-->
</Kopf>
<!--2. Hauptteil-->
<Text>
<p>Dies ist ein Absatz</p>
</body>
<Skript>
//Wo soll der Skriptcode abgelegt werden</script>
</html>2. Gemeinsame Tags:
<!--Mobile Entwicklung einrichten-->
<meta name="viewport" content="Breite=Gerätebreite, benutzerdefiniert skalierbar=nein, Anfangsmaßstab=1,0, Maximalmaßstab=1,0, Minimalmaßstab=1,0">
<!--1.div-Tag, wird für das Layout verwendet, keine besondere Bedeutung, Schichtung. Ebene -->
<div></div>
<!--2.hx: Titel, von Ebene 1 bis Ebene 6, Ebene 1 ist die größte, Ebene 6 die kleinste, automatisch fett, mit Standardschriftgröße -->
<h1></h1>…<h6></h6>
<!--3.p-Tag: kennzeichnet einen Absatz. Entspricht einem Wagenrücklauf. -->
<p></p>
<!--4.br: Zeilenumbruch erzeugen -->
<br>
<!--6.a-Tag, Linksprung, Ziel: _leeres neues Fenster/_selbst aktuelles Fenster_übergeordnet/oben-->
<a href="URL-Adresse/Link" title="Station B">Text</a>
<a href="URL-Adresse" target="_blank">Text</a>
<a href="URL-Adresse" target="_self">Text</a>
<a href="'#href" target="#href">Text</a>
Der Zielort des Ankerlinks href='#href' sollte auf dasselbe Attribut wie seine id='#href' gesetzt werden.
<!--7.img wird zum Laden externer Bilder verwendet, src wird zum Entwerfen des Pfads des geladenen Bildes oder Bildes verwendet, alt wird verwendet, um den Inhalt in alt anzuzeigen, wenn das Laden des Bildes fehlschlägt, andernfalls wird es nicht angezeigt -->
src-Pfad alt-Ersetzungstext Titel Bild Eingabeaufforderungstext Breite: Bildbreite Höhe: Bildhöhe Rahmen Rahmen <img src="" alt="Nicht angezeigter Name">
<!--8. Die Funktion von span ist die gleiche wie die von div, beide werden für das Layout verwendet. Div belegt eine einzelne Zeile, span hingegen nicht. Span-Notizen werden für das Inline-Layout verwendet-->
<span></span>
<!--9.ul und ol, ersteres ist ungeordnet und letzteres ist geordnet, beide verwenden li-Tags. -->
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
<ol>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ol>
//Benutzerdefinierter Listenfokus Jede Website wird grundsätzlich unten angepasst. <dl> dl kann nur dt und dd enthalten. Ein dt entspricht mehreren dd als Brüdern. <dt></dt> Substantiv 1
<dd></dd>Substantiv 1 Erklärung 1
<dd></dd>Substantiv 1 Erklärung 2
</dl>Benutzerdefinierte Liste4. Tag-Attribute:
<!--Tag-Attribute:
1. Besteht in der Regel aus Attributname = „Attributwert“ 2. Dient als Zusatzinformation.
3. Nicht alle Tags haben Attribute, wie z. B. das br-Tag -->
Die Titelklasse unten ist der Attributname und Folgendes ist der Attributwert <p title="paragraph" class="content" id="content">Dies ist ein Testabsatz</p>5. Einige andere Tags:
<!--Textformatierungs-Tags: Verwenden Sie Tags, um das Erscheinungsbild von Text zu verschönern->
<!--1.b und strong: beide haben Fettdruckeffekte und sind Beschriftungen auf Zeilenebene (werden nicht automatisch umbrochen).
Aber auch „stark“ hat eine Betonung. Hinweis: Hervorhebung wird hauptsächlich für SEO verwendet, um die Verwendung von Schlüsselwörtern im Voraus zu erleichtern -->
<b>Fett</b>
<strong>Fett und hervorgehoben</strong>
<!--2 i und em: macht den Text kursiv, em hat eine hervorhebende Wirkung. Und es sind alles Zeilenbeschriftungen (keine automatischen Zeilenumbrüche),
Wenn Sie nur einen einfachen Neigungseffekt wünschen, können Sie das i-Tag verwenden, z. B. um ein Symbol usw. hinzuzufügen -->
<i>Neigung</i>
<em>Schräg und betont</em>
<!--3.preText vorformatieren, Zeilenumbrüche, Leerzeichen und Breite beibehalten.
Die Schriftgröße des Textes wird kleiner sein und das Block-Level-Tag (belegt eine einzelne Zeile im Browser) -->
<vor>
Text vorformatieren, Zeilenumbrüche, Leerzeichen und Breite beibehalten</pre>
<!--samll and big, verkleinert oder vergrößert den Text um eine Größe (Beschriftungen auf Zeilenebene, nehmen keine einzelne Zeile ein und erkennen Breite und Höhe nicht) -->
<!--Die vom Browser unterstützte Mindestschriftgröße beträgt 12 Pixel. Wenn der Text kleiner als 12 Pixel ist, muss er verarbeitet werden-->
<p>Ich bin normal</p>
<small>Ich bin ein kleinerer Text</small>
<!--sub und sup: Legen Sie für den Text Tief- und Hochstellung fest. Dadurch wird die Grundlinie der normalen Textanzeige angepasst. Der Text wird dann automatisch kleiner dargestellt.-->
<p>Normale Anzeige: X1+X2=Y</p>
<p>Index:X<sub>1</sub>+X<sub>2</sub>=Y</p>
<p>Index:X<sup>1</sup>+X<sup>2</sup>=Y</p>
Zeile löschen <del></del> <s></s>
Unterstreichen <ins></ins> <u></u>
Escape-Zeichen: Leerzeichen < Kleiner-als-Zeichen > Größer-als-Zeichen6. Tabellen-Tags und Formular-Tags
Struktur des Tabellentags: Funktion: Daten anzeigen <table> <!--Table tag-->
<th></th> Kopfzelle <tr>
<td></td>Zelle</tr>Zeile</table>
Attribute align left center right Ausrichten border border cellpadding Der Abstand zwischen Text und Zellen cellspacing Der Abstand zwischen Zellen width
Tags der Tabellenstruktur <thead></thead> Kopfbereich <tbody></tbody> Textbereich Zellen zusammenführen: Zeilenübergreifend zusammenführen: rowspan Zeilen- und spaltenübergreifend zusammenführen: colspan Spalten und Spalten zusammenführen Code: Zeilenübergreifend: Schreiben Sie den Merge-Code in die oberste Zelle als Zielzelle Spaltenübergreifend: Schreiben Sie den Merge-Code in die Zelle ganz links als Zielzelle Schritte zum Verkreuzen von Zeilen oder Spalten:
1. Bestimmen Sie, ob Zeilen oder Spalten überspannt werden sollen. 2. Suchen Sie die Zielzelle. 3. Löschen Sie die zusätzlichen Zellen.7. Formular-Tags:
Formular-Tag: Hauptzweck: Sammeln von Benutzerinformationen. Das Formular besteht aus Formularfeldern, Formularsteuerelementen (Elementen), Eingabeaufforderungsinformationen und Formularfeldern zur Realisierung der Übertragung von Benutzerinformationen <form action="" method=""></form>
Auf die Aktion folgt das Adress-Methoden-Übermittlungsmethoden-Namenseingabe-Eingabeformularelement:
<Eingabetyp="Text">
Typ Attributwert: Text Textkennwort Kennwortschaltfläche Ridio Optionsfeld () Kontrollkästchen (Multiple-Choice-Schaltfläche) .....
Absenden (Senden-Button, sendet den Formularwert an den Server) Zurücksetzen löscht alle Daten im Formular-Button Normaler Button kombiniert mit js Datei verwenden Datei hochladen
Namensattribut: der Name des Formularelements. Optionsfelder müssen denselben Namen haben, um mehrere Auswahlmöglichkeiten zu ermöglichen.
Sowohl das Optionsfeld als auch das Kontrollkästchen müssen den gleichen Namen haben
Das Value-Attribut definiert den Wert, den jedes Element haben sollte und wird hauptsächlich von Backend-Mitarbeitern verwendet
aktiviert ist die Standardauswahl für Einzel- und Mehrfachauswahl beim Öffnen der Seite
maxlength Maximale Länge Dropdown-Formularelement auswählen Anwendungsszenario: Es gibt mehrere Optionen und Sie möchten Platz sparen <select name="" id="">
<Optionswert=""></Option>
</Auswählen>
select enthält mindestens eine Option. Das Attribut selected = selected in option ist standardmäßig ausgewählt. <label for=""></label>Anwendungsszenario: for entspricht demselben ID-Attribut wie das Formularelement. Wenn das Textfeld-Formularelement viel Eingabetext enthält, <textarea><textarea>wird die Länge im Allgemeinen durch CSS angegeben.Dies ist das Ende dieses Artikels mit der detaillierten Erklärung grundlegender HTML-Tags und -Strukturen. Weitere relevante grundlegende HTML-Tags und -Strukturen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! |
<<: Welche magischen Anwendungen haben CSS-Filter?
>>: Die Popup-Maske der Frontend-Seite verhindert das Scrollen der Seite
Artikel empfehlen
Das schnellste Textsuchtool von Linux: ripgrep (die beste Alternative zu grep)
Vorwort Apropos Textsuchtools: Jeder sollte grep ...
Mit einem Befehl können Sie die allgemeinen Parameter des Lesebefehls in der Shell verstehen
Wir wissen, dass es in der Shell zwei Möglichkeit...
Detaillierte Erläuterung verschiedener Möglichkeiten zum Abrufen der PID (TID, LWP) von Linux-Threads
In Linux C/C++ werden Operationen auf Thread-Eben...
Detaillierte Analyse des Diff-Algorithmus in React
Verständnis des Diff-Algorithmus in React diff -A...
Lösung für das Jitter-Problem beim CSS3-Transformationsübergang
transform: scale(); Skalierung verursacht Jitter ...
mysql: [FEHLER] unbekannte Option '--skip-grant-tables'
MySQL-Datenbank meldet FEHLER 1045 (28000): Zugri...
Zusammenfassung von 9 hervorragenden Codevergleichstools, die unter Linux empfohlen werden
Wenn wir Code schreiben, müssen wir oft die Unter...
Einführung in den Prozess zum Erstellen einer TCP-Verbindung im Linux-System
Inhaltsverzeichnis Schritte zum Erstellen von TCP...
Tiefgreifendes Verständnis des Statusübergangs des MySQL-Master-Slave-Replikationsthreads
Vorwort Das Grundprinzip der MySQL-Master-Slave-R...
Verwenden Sie VSCodes Remote-SSH, um eine Verbindung zu Linux für die Remote-Entwicklung herzustellen
Remote-SSH installieren und konfigurieren Öffnen ...
Grafisches Tutorial zur Installation und Konfiguration der MySQL 5.7.17 Winx64-Dekomprimierungsversion
In diesem Artikel wird die Installations- und Kon...
Design-Sharing der Download-Seite des Pengyou.com-Mobilclients (Bild und Text)
Schauen wir uns zunächst einige einfache Daten an:...
Postman-Datenverschlüsselung und -entschlüsselung zur Implementierung der Simulationsanforderung der APP-Anmeldeschnittstelle
Inhaltsverzeichnis Hauptsächlich verwendete Postm...
Zusammenfassung verschiedener Methoden für Vue zum Erreichen dynamischer Stile
Inhaltsverzeichnis 1. Ternäres Operatorurteil 2. ...
Textmodus im IE! Einführung in die Rolle von DOCTYPE
Nachdem das im vorherigen Artikel besprochene Prob...