Artikelverzeichnis
1. Einführung in HTML
1. Webseite
1> Was ist eine Webseite?
Eine Website bezieht sich auf eine Sammlung von Webseiten im Internet, die mithilfe von HTML erstellt wurden, um bestimmte Inhalte nach bestimmten Regeln anzuzeigen.
Eine Webseite ist eine „Seite“ einer Website, normalerweise eine Datei im HTML-Format, die von einem Browser gelesen wird. Eine Webseite ist das Grundelement einer Website und besteht normalerweise aus Bildern, Links, Text, Ton, Video und anderen Elementen. Normalerweise enden die Webseiten, die wir sehen, oft mit den Suffixen .htm oder .html, daher werden sie üblicherweise aufgerufenHTML-Datei。
2> Was ist HTML?
HTML bezieht sich aufHypertext-Auszeichnungssprache(Hyper Text Markup Language), eine Sprache zur Beschreibung von Webseiten.
HTML ist keine Programmiersprache, sondern eine Auszeichnungssprache. Eine Auszeichnungssprache ist eine Reihe von Auszeichnungs-Tags.
Die Bedeutung von Hypertext :
- Es kann Bilder, Töne, Animationen, Multimedia und mehr hinzufügen (über Textbeschränkungen hinaus).
- Es kann auch von einer Datei zur anderen springen, mit Datei-Links (Hyperlink-Text) von Hosts auf der ganzen Welt.
2. Webstandards
Webstandards sind eine Sammlung von Standards, die von der W3C-Organisation und anderen Standardisierungsorganisationen entwickelt wurden. W3C (World Wide Web Consortium) ist die bekannteste internationale Standardisierungsorganisation.
1> Warum brauchen wir Webstandards?
Aufgrund der inkonsistenten Ergebnisse, die von verschiedenen Browsern analysiert werden, müssen Entwickler mehrere Versionen entwickeln.
Webstandards können dafür sorgen, dass von verschiedenen Entwicklern geschriebene Seiten standardisierter und einheitlicher werden; auf Inhalte kann von einer größeren Anzahl von Geräten zugegriffen werden; sie können von Suchmaschinen leichter durchsucht werden; sie können die Wartung von Websites erleichtern und die Geschwindigkeit beim Durchsuchen von Seiten verbessern.
2> Zusammensetzung von Webstandards
Webstandards umfassen hauptsächlich drei Aspekte: Struktur, Präsentation und Verhalten.
| Standard | veranschaulichen |
|---|---|
| Struktur | Die Struktur wird zum Organisieren und Kategorisieren von Webseitenelementen (HTML) verwendet |
| Leistung | Es wird verwendet, um die Farbe, Größe und andere Darstellungsstile von Webseitenelementen festzulegen (CSS). |
| Verhalten | Verhalten bezieht sich auf die Definition des Webseitenmodells und das Schreiben von Interaktionen , Javascript |
Die Struktur wird in HTML-Dateien geschrieben, die Präsentation wird in CSS-Dateien geschrieben und das Verhalten wird in JavaScript-Dateien geschrieben.
3. HTML-Syntaxspezifikation
1> Grundlegende Grammatik
- HTML-Tags sind Schlüsselwörter, die von spitzen Klammern umgeben sind, z. B. <html>
- Doppelte Tags : Erscheinen paarweise (die meisten sind doppelte Tags), z. B. < html>< /html>
- Einzelnes Tag : ein einzelnes Tag (selten), wie < br />
2> Tag-Beziehung
- Eindämmungsbeziehung
<head>
<title> </title>
</head>
- Konstellation
<head></head>
<body></body>
Zweitens HTML-Tags
1. Grundetikett
| Verlinke den Namen | Definition |
|---|---|
| < html>< /html> | HTML-Tags |
| <Kopf>< /Kopf> | Dokumentenkopf |
| <Titel>< /title> | der Titel des Dokuments |
| <Körper>< /Körper> | Hauptteil des Dokuments |
<html>
<head>
<title> 文章标题</title>
</head>
<body>
文章主题在这里！
</body>
</html>
2. Titel-Tags
Um Webseiten semantischer zu gestalten, verwenden wir häufig Titel-Tags auf Seiten.HTML bietet 6 Ebenen von Webseitentiteln, nämlich <h1> – <h6>.
- Der Text mit dem Titel wird fett dargestellt und die Schriftgröße erhöht sich entsprechend.
- Ein Titel nimmt eine einzelne Zeile ein.
3. Absatz- und Zeilenumbruch-Tags
Um Texte auf einer Webseite geordnet anzuzeigen, ist es notwendig, diese Texte in Segmenten anzuzeigen. In HTML-TagsDas <p>-Tag wird zum Definieren von Absätzen verwendet, wodurch die gesamte Webseite in mehrere Absätze unterteilt werden kann.
- Text innerhalb eines Absatzes wird automatisch entsprechend der Größe des Browserfensters umbrochen.
- Zwischen Absätzen und Absätzen ist Platz.
In HTML läuft der Text in einem Absatz von links nach rechts, bis er das rechte Ende des Browserfensters erreicht, und wird dann automatisch umbrochen.Wenn Sie möchten, dass ein bestimmter Text in einer neuen Zeile angezeigt wird, müssen Sie das Newline-Tag < br /> verwenden.
- < br /> ist ein einzelnes Tag.
- Das < br />-Tag beginnt einfach eine neue Zeile, im Gegensatz zu Absätzen, bei denen ein gewisser vertikaler Abstand zwischen ihnen eingefügt wird.
4. Textformatierungs-Tags
Herausragende Bedeutung, wichtiger als gewöhnlicher Text
| Semantik | Etikett |
|---|---|
| deutlich | < stark>< /strong> |
| Neigung | < em>< /em> |
| durchgestrichen | <del>< /del> |
| unterstreichen | <ins>< /ins> |
5. <div>- und <span>-Tags
Sie haben keine Semantik, sondern nur eine Box für den Inhalt.
- Das <div>-Tag wird für das Layout verwendet, aber jetzt kann nur ein <div> in einer Zeile platziert werden. Große Schachtel
- Das <span>-Tag wird für das Layout verwendet und es kann mehr als ein <span> in einer Zeile geben. kleine Kiste
6. Bild-Tags
Das <img>-Tag wird zum Definieren von Bildern in HTML-Seiten verwendet.
<img src="图像URL"/>
src ist ein erforderliches Attribut des <img>-Tags, das zur Angabe des Pfads und Dateinamens der Bilddatei verwendet wird.
Beschreibung des Bild-Tag-Attributs:
| Attribute | veranschaulichen |
|---|---|
| src | Bildpfad |
| alt | Das Bild kann den Text, der es ersetzt, nicht anzeigen |
| Titel | Der Text, der angezeigt wird, wenn die Maus auf dem Bild platziert wird |
| Breite | Legen Sie die Breite des Bildes fest |
| Höhe | Stellen Sie die Höhe des Bildes ein |
| Grenze | Legen Sie die Stärke des Bildrandes fest |
- Bild-Tags können mehrere Attribute haben, die nach dem Tag-Namen geschrieben werden müssen.
- Attribute haben keine bestimmte Reihenfolge und Tags und Attribute sowie Attribute und Attribute werden durch Leerzeichen getrennt.
Relativer Pfad: Der Verzeichnispfad, der basierend auf dem Speicherort der referenzierten Datei erstellt wird.
Absoluter Pfad: Bezieht sich auf den absoluten Speicherort unter dem Verzeichnis, direkt zum Zielspeicherort, normalerweise der Pfad, der mit dem Laufwerksbuchstaben beginnt.
7. Hyperlink-Label
Mit dem <a>-Tag wird ein Hyperlink definiert, der zum Verlinken von einer Seite auf eine andere verwendet wird.
Grammatikformat:
<a href="跳转目标url地址" target="目标窗口弹开方式">文本或图像</a>
| Attribute | Wirkung |
|---|---|
| href | Geben Sie die URL-Adresse des Linkziels an |
| Ziel | Link-Öffnungsmethode, der Standardwert ist _self, in einem neuen Fenster als _blank öffnen |
Linkkategorie:
- Externer Link : etwa < a href="http://www.baidu.com ">Baidu</a>.
- Interner Link : Verlinken Sie einfach direkt auf den internen Seitennamen
- Leerer Link : <a href="#">Homepage</a>, wenn zu diesem Zeitpunkt kein Linkziel ermittelt wurde.
- Download-Link : Wenn es sich bei der Adresse im href um eine Datei oder ein komprimiertes Paket handelt, wird die Datei heruntergeladen.
- Links zu Webseitenelementen : Hyperlinks können zu verschiedenen Webseitenelementen in Webseiten hinzugefügt werden, z. B. zu Text, Bildern, Tabellen, Audio, Video usw.
- Ankerlink : Klicken Sie auf den Link, um schnell zu einer bestimmten Position auf der Seite zu navigieren. (Setzen Sie im href-Attribut des Linktextes den Attributwert auf die Form #name, suchen Sie das Zielort-Tag und fügen Sie ein id-Attribut = hinzu der Name gerade eben)
8. Formularetikett
- <table>< /table> wird zum Definieren der Tabelle verwendet
- <tr></tr> definiert die Zeile in der Tabelle
- < td>< /td> definiert die Zellen in der Tabelle
- < th>< /th> Kopfzelle (zentriert und fett)
Grammatikformat:
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
1> Formulareigenschaften
| Attributname | Attributwert | beschreiben |
|---|---|---|
| ausrichten | links, Mitte, rechts | Ausrichtung der Tabelle relativ zu umgebenden Elementen |
| Grenze | 1 oder „ “ | Gibt es eine Grenze? |
| Zellpolsterung | Pixelwerte | Leerwert zwischen Rahmen und Inhalt, Standard 1 |
| Zellabstand | Pixelwerte | Abstand zwischen den Zellen, Standard 2 |
| Breite | Pixelwert oder Prozentsatz | Gibt die Breite der Tabelle an |
2>Formularstrukturbezeichnung
- < thehead>< /thead>: wird verwendet, um den Kopf der Tabelle zu definieren. <thead> muss ein <tr>-Tag enthalten. Normalerweise befindet es sich in der ersten Reihe.
- < tbody>< /tbody>: Wird zum Definieren des Tabellenkörpers verwendet und hauptsächlich zum Einfügen der Datenontologie verwendet.
- Die oben genannten Tags werden im Tag <table></table> platziert.
3>Zellen zusammenführen
- Bestimmen Sie zunächst, ob die Zusammenführung zeilen- oder spaltenübergreifend erfolgen soll.
- Finden Sie die Zielzelle.
- Überflüssige Zellen löschen.
Weg:
- Zeilenübergreifend zusammenführen: Die oberste Zelle ist die Zielzelle, rowspan="Anzahl der zusammengeführten Zellen" und die Zielzelle ist die oberste Zelle
- Spaltenübergreifend zusammenführen: Die Zelle ganz links ist die Zielzelle, colspan="Anzahl der zusammengeführten Zellen", die Zelle ganz links ist die Zielzelle
9. Listenetikett
Tabellen werden dann zur Darstellung von Daten verwendetListen dienen der Gestaltung. Das größte Merkmal der Liste ist Sauberkeit, Ordnung und Ordnung, und sie wird als Layout freier und praktischer sein.
Je nach Verwendungsszenario können Listen in drei Kategorien unterteilt werden: ungeordnete Listen , geordnete Listen und benutzerdefinierte Listen .
1> Ungeordnete Liste
<ul>Das Tag stellt eine ungeordnete Liste von Elementen auf einer HTML-Seite dar und stellt Listenelemente im Allgemeinen mit Aufzählungszeichen dar, während Listenelemente dies verwenden<li>Tag-Definition.
Grammatikformat:
- Es gibt keine Ordnungsebene zwischen den verschiedenen Listenelementen der ungeordneten Liste und sie sind parallel.
- <ul></ul> kann nur <li></li> verschachteln
- Zwischen < li> und </li> entspricht einem Container, der alle Elemente aufnehmen kann.
2> Geordnete Liste
<ol>Beschriftungen werden verwendet, um geordnete Listen zu definieren, die numerisch und nach sortiert sind<li>Tags zum Definieren von Listenelementen.
Grammatikformat :
3> Benutzerdefinierte Liste
Benutzerdefinierte Listen werden häufig verwendetErklären und beschreiben Sie Begriffe oder Substantive, ohne Aufzählungszeichen vor den Listenelementen der Definitionsliste.
<dl>Tag wird verwendet, um die Beschreibungsliste (oder Definitionsliste) zu definieren, die mit verwendet wird<dt>(Definition des Projekts/Namens) und
< dd>(Beschreiben Sie jedes Element/jeden Namen) zusammen.
Grammatikformat:
- <dl></dl> kann nur <dt> und <dd> enthalten.
- Es gibt keine Begrenzung für die Anzahl von <dt> und <dd>, normalerweise entspricht ein <dt> mehreren <dd>.
10. Formularetikett
Ein vollständiges Formular besteht normalerweise aus drei Teilen: Formularfeldern , Formularsteuerelementen (auch als Formularelemente bezeichnet) und Eingabeaufforderungsinformationen .
1> Formularfeld
Ein Formularfeld ist ein Bereich, der Formularelemente enthält. Das <form>-Tag wird verwendet, um Formularfelder zum Sammeln und Übertragen von Benutzerinformationen zu definieren.
< form> übermittelt die Formularelementinformationen innerhalb seines Gültigkeitsbereichs an den Server
Gemeinsame Attribute :
| Attribute | Wirkung |
|---|---|
| Aktion | Geben Sie die URL-Adresse des Serverprogramms an, das Formulardaten empfängt und verarbeitet |
| Methode | Legen Sie die Übermittlungsmethode für Formulardaten fest. Der Wert ist „get“ oder „post“. |
| Name | Geben Sie den Namen des Formulars an, um mehrere Formulare auf einer Seite zu unterscheiden |
<form action="url地址" method="提交方式" name="表单域名称">
表单元素控件
</form>
2> Formularsteuerung
<Eingabeformularelement
<input type="属性值"/>
Das Typattribut legt verschiedene Attributwerte fest, um unterschiedliche Steuerelementtypen anzugeben
Typattributwert
| Attributwert | beschreiben |
|---|---|
| überprüfen | Definieren Sie eine einzelne Zeile Eingabetext |
| Passwort | Definieren Sie das Passwortfeld |
| Radio | Optionsfelder definieren |
| Kontrollkästchen | Kontrollkästchen |
| einreichen | Senden Sie den Wert des Formularelements im Formularfeldformular an den Hintergrundserver |
| zurücksetzen | Klicken Sie auf die Schaltfläche „Zurücksetzen“, um alle Daten im Formular zu löschen |
| Taste | Definieren Sie eine anklickbare Schaltfläche |
| Datei | Dateidomäne, Dateien hochladen mit |
Andere Attribute außer Typ :
| Attribute | beschreiben |
|---|---|
| Name | Definieren Sie den Namen des Eingabeelements |
| Wert | Gibt den Wert des Eingabeelements an |
| überprüft | Das Eingabeelement wird beim ersten Laden ausgewählt |
| maximale Länge | Gibt die maximale Länge von Zeichen an |
- Name und Wert sind die Attributwerte jedes Formularelements, die hauptsächlich vom Hintergrundpersonal verwendet werden.
- name Der Name des Formularelements, erforderlichOptionsfelder und Kontrollkästchen müssen denselben Namenswert haben.
- Das Attribut „checked“ ist hauptsächlich für Optionsfelder und Kontrollkästchen vorgesehenDie Hauptfunktion besteht darin, ein Formularelement standardmäßig auszuwählen, sobald die Seite geöffnet wird.
Etikett Etikett
Definieren Sie Anmerkungen für Eingabeelemente. Beschriftungen werden zum Binden eines Formularelements verwendet. Wenn Sie auf den Text im <label>-Tag klicken, richtet der Browser automatisch den Fokus (Cursor) auf das entsprechende Formularelement oder wählt es aus, um die Benutzereingabe zu verbessern. Erfahrung .
Grammatikformat:
<!-- <label> 标签的 for 属性应当与相关元素的 id 属性相同。 -->
<label for="sex">男</label>
<input type="radio" name="sex" id="sex"/>
<Dropdown-Formularelement auswählen
Wenn der Benutzer mehrere Optionen zur Auswahl hat und wir Platz auf der Seite sparen möchten, können wir das <select>-Tag-Steuerelement verwenden, um eine Dropdown-Liste zu definieren.
grammatikalisches Format::
- Ein <select> enthält mindestens ein Paar von <option>.
- Wenn Sie selected="selected" in <option> definieren, ist das aktuelle Element das standardmäßig ausgewählte Element.
<textarea Textfeld-Formularelement
Wenn der Benutzer viele Inhalte eingibt, können wir das Textfeldformular nicht verwenden. Zu diesem Zeitpunkt können wir das <textarea>-Tag verwenden. In Formularelementen wird das Tag <textarea> verwendetDefinieren Sie die mehrzeilige TexteingabeKontrollen. Sie können mehr Text eingeben, indem Sie ein mehrzeiliges Texteingabesteuerelement verwenden, das häufig in Message Boards und Kommentaren verwendet wird.
Grammatikformat :
<textarea row3="3" cols="20">
文本内容
</textarea>
- cols = „Anzahl der Zeichen in jeder Zeile“, rows = „Anzahl der angezeigten Zeilen“