Einführung in HTML

Einführung in HTML

1. Die Funktion eines Webbrowsers besteht darin, HTML-Dokumente zu lesen und sie in Form von Webseiten anzuzeigen. Browser zeigen keine HTML-Tags an, sondern verwenden Tags, um den Inhalt der Seite zu interpretieren.

2. >

# Die Textbeschreibungsseite zwischen

und

# Der Text zwischen und

ist sichtbarer Seiteninhalt

# Der Text zwischen

und

wird als Titel

angezeigt # Der Text zwischen wird als Absatz

HTML-Link

1 angezeigt. Der HTML-Link wird durch das Tag

definiert.

Dies ist ein Link

HTML-Bild

HTML-Bild wird durch das

-Tag definiert.

HTML-ElementsyntaxHTML-Element beginnt mit einem Start-Tag

HTML-Element endet mit einem End-Tag

Element Der Inhalt ist der Inhalt zwischen dem Start-Tag und dem End-Tag

Einige HTML-Elemente haben leeren Inhalt (leerer Inhalt)

Leere Elemente werden im Start-Tag geschlossen (mit dem Ende des Start-Tag Ende)

Die meisten HTML-Elemente können Attribute haben

Leeres HTML-Element

HTML-Inhalte ohne Inhalt werden als leeres Element bezeichnet. Leere Elemente werden im öffnenden Tag geschlossen.

ist ein leeres Element ohne schließendes Tag (

Tag-Definition umbricht).

In XHTML, XML und zukünftigen Versionen von HTML müssen alle Elemente geschlossen sein.

Das Hinzufügen eines Schrägstrichs im öffnenden Tag, z. B.

, ist die richtige Methode zum Schließen eines leeren Elements und wird von HTML, XHTML und XML akzeptiert.

Obwohl
in allen Browsern gültig ist, ist die Verwendung von

tatsächlich eine längerfristige Garantie.

HTML Centering

enthält zusätzliche Informationen zur Ausrichtung.

enthält zusätzliche Informationen zur Hintergrundfarbe.

Horizontale HTML-Linie Das

-Tag erstellt eine horizontale Linie in einer HTML-Seite. Das

hr-Element kann zum Trennen von Inhalten verwendet werden.

Attributwerte immer in Anführungszeichen setzen

Attributwerte sollten immer in Anführungszeichen gesetzt werden. Doppelte Anführungszeichen werden am häufigsten verwendet, die Verwendung einfacher Anführungszeichen ist jedoch kein Problem.

---

In einigen Einzelfällen, beispielsweise wenn der Attributwert selbst doppelte Anführungszeichen enthält, müssen Sie einfache Anführungszeichen verwenden, zum Beispiel:

name='Bill „HelloWorld“ Gates'

Die Verwendung leerer Absatz-Tags

zum Einfügen einer Leerzeile ist eine schlechte Angewohnheit. Ersetzen Sie es durch das Tag

!

Wenn Sie Zeilenumbrüche (neue Zeilen) wünschen, ohne einen neuen Absatz zu erstellen, verwenden Sie das

-Tag:

Dies ist

ein Absatz

Diagramm mit Zeilenumbrüchen

Element ist ein leeres HTML-Element. Da ein schließendes Tag keinen Sinn ergibt, gibt es kein schließendes Tag.

Vorformatierter Text

Dieses Beispiel zeigt, wie Sie das Pre-Tag verwenden, um leere Zeilen und Leerzeichen zu steuern.

Dies ist der

vorformatierte Text.          >>>>>>>>>>> Vorformatierter Text.

Es behält Leerzeichen

und Zeilenumbrüche bei. und Zeilenumbrüche.

Pre-Tag eignet sich hervorragend zum Anzeigen von Computercode

 <p></p>Adresse<p></p>Dieses Beispiel zeigt, wie man eine Adresse in einen HTML-Code schreibt Datei. <p></p> <p></p><p>Adresse von Donald Duck: </p><p></p><p></p><p>Donald Duck</p><p></p> BOX 555 <p></p><p>Disneyland</p><p></p>USA<p></p><address>
<p><br></p> <p><br></p>
<p> <br> </p>
<p><br>Adresse der W3School: </p>
<p></p>
</address><p></p> <p>Benutzerservice-Mailbox<br></p><p></p> Shanghai Yingke Investment Co., Ltd.<p></p><p></p> Nr. 789, Jinqiao Development Zone<p></p><address>
<p><a href="mailto:service@w3school.com.cn">Ergebnis: </a><br> Adresse von Donald Duck: </p>
<p> <br></p>Donald Duck<p><br>BOX 555</p>
<p>Disneyland</p>
</address>USA<p></p> <p> </p>Benutzerservice-Mailbox<p></p>Shanghai Yingke Investment Co., Ltd.<p></p>Nr. 789, Jinqiao Development Zone<p></p> <p></p>Abkürzungen und Akronyme<p> </p><p>UN</p><p></p><p>WWW</p><p></p> <p></p>Textrichtung<p></p><p><abbr title="United Nations"> </abbr>Hier ist ein hebräischer Text</p><p><acronym title="World Wide Web"></acronym></p>Hier ist ein hebräischer Text<p></p> <p></p>Blockzitat<p><bdo dir="rtl"></bdo></p> <p></p>Das ist ein langes Zitat. Das ist ein langes Zitat. Das ist ein langes Zitat. Das ist ein langes Zitat. Das ist ein langes Zitat. Das ist ein langes Zitat. Das ist ein langes Zitat. Das ist ein langes Zitat. Das ist ein langes Zitat. Das ist ein langes Zitat. Das ist ein langes Zitat. <p></p><p></p><p>Bei Verwendung des Blockquote-Elements fügt der Browser Zeilenumbrüche und Ränder ein, während das q-Element keine spezielle Darstellung hat. </p><p><br></p><p>Beispiel für einen HTML-Stil – Hintergrundfarbe </p><p>Das Attribut „background-color“ definiert die Hintergrundfarbe für das Element: </p><p></p> <p></p><h2 style="background-color:red">Dies ist eine Überschrift</h2><p></p><p style="background-color:green">Dies ist ein Absatz.</p><p></p><p>Schriftfamilie Die Attribute , Farbe und Schriftgröße definieren jeweils die Schriftfamilie, die Farbe und die Schriftgröße des Texts im Element: </p><p></p><h1 style="font-family:verdana">Eine Überschrift</h1><p></p><p style="font-family:arial;color:red;font-size:20px;">Ein Absatz. </p> ><p>Das text-align-Attribut gibt die horizontale Ausrichtung des Textes im Element an: </p><p></p><h1 style="text-align:center"></h1><p></p><p> </p><p><a href="../example/html/lastpage.html" tppabs="http://www.w3school.com.cn/example/html/lastpage.html"> </a></p><p>Kopfzeile der Tabelle<img  border="0" src="../i/eg_buttonnext.gif" tppabs="http://www.w3school.com.cn/i/eg_buttonnext.gif" alt="Einführung in HTML" ></p>Tabelle Die Tabellenkopfzeile wird mithilfe des <p>-Tags definiert. <🎜> 🎜>Eine weitere Überschrift</p><p></p><p></p><p></p><th>
<p>Zeile 1, Zelle 1</p>
<table border="1">
<p></p>
<tr>
<p></p>
<th>Heading</th>           >>>>>>>>注意<p></p>
<th>Another Heading</th>
<p></p>
</tr>
<p></p>
<tr>
<p></p>
<td>row 1, cell 1</td>
<p></p>
<td>row 1, cell 2</td>
<p></p>
</tr>
<p></p>
<tr>
<p></p>
<td>row 2, cell 1</td>
<p></p>
<td>row 2, cell 2</td>
<p></p>
</tr>
<p></p>
</table>
<p></p>Zeile 1, Zelle 2<p></p>
<p></p>
<p></p>
</th><tr>
<p></p>
<td></td>Zeile 2, Zelle 1 <p></p>
<td></td>Zeile 2, Zelle 2<p></p>
</tr><p></p><tr>
<p></p>
<td> </td> Leere Zelle im Tabellengitter<p></p>
<td>table border="1"></td>
<p></p>
</tr><p>Zeile 1, Zelle 1 Zeile 1, Zelle 2Zeile 2, Zelle 1 </p><p> </p><p>Ungeordnete Liste:</p><p></p><h4>Eine ungeordnete Liste: </h4><p></p>

• Kaffee
• Tee
• Milch

Geordnete Liste:

Eine geordnete Liste:

1. Kaffee
2. Tee
3. Milch

Definitionsliste

Kaffee

Schwarzes Heißgetränk

Milch

Weiß Kaltgetränk

Formular

Ein Formular ist ein Bereich, der Formularelemente enthält.

Formularelemente sind Elemente, die es Benutzern ermöglichen, Informationen in ein Formular einzugeben (z. B. Textfelder, Dropdown-Listen, Optionsfelder, Kontrollkästchen usw.).

Formulare werden mithilfe des Formular-Tags (

) definiert.

Eingabe

Das in den meisten Fällen verwendete Formular-Tag ist das Eingabe-Tag (). Eingabetypen werden durch das Typattribut (Typ) definiert.

Textfeld

Textfelder werden verwendet, wenn Benutzer Buchstaben, Zahlen usw. in ein Formular eingeben möchten.

Vorname:

Nachname :

Optionsfeld

Männlich Was bedeuten Name und Wert?

Weiblich

Kontrollkästchen

Ich habe ein Fahrrad

Ich habe ein Auto

Das Aktionsattribut (Aktion) und die Bestätigungsschaltfläche des. Formulars

                                                                                                                                                          .

Benutzername:

Was bedeutet Wert?

Beispiel:

Einfache Dropdown-Liste

Dieses Beispiel zeigt, wie man eine einfache Dropdown-Liste erstellt. Dropdown-Liste in einer HTML-Seite. Dropdown-Listenfeld. Das Dropdown-Listenfeld ist eine auswählbare Liste.

Volvo

Saab

Fiat 》》》》Zur ersten Wahl hinzufügen

Audi

Textfeld

Dieses Beispiel zeigt, wie man ein Textfeld erstellt (mehrzeiliges Texteingabesteuerelement). Der Benutzer kann Text in das Textfeld schreiben. Es gibt keine Begrenzung für die Anzahl der Zeichen, die geschrieben werden können.

Dieses Beispiel kann nicht bearbeitet werden

da unser Editor einen Textbereich

für die Eingabe

und Ihren Browser verwendet erlaubt nicht

einen Textbereich innerhalb eines Textbereichs.

den Garten.

Schaltfläche „Erstellen“

Feld erstellen:

Gesundheitsinformationen:

Größe:

Gewicht:

Mit Eingabefeld und Bestätigungsschaltflächenformular

Zuerst Name:

Nachname:

Formular mit Kontrollkästchen

Ich habe ein Fahrrad:

Ich habe ein Auto:

Ich habe ein Flugzeug:

Formular mit Optionsfeldern

Männlich:

Weiblich:

Vertikaler Tabellenkopf:

Name

Bill Gates

Telefon

555 77 854

		Telefon	555 77 855

Abbildung: Name Bill Gates

Telefon 555 77 854

Telefon 555 77 855

Tabelle mit Titel

Dieses Beispiel zeigt eine Tabelle mit einem Titel (Beschriftung)

Zellen, die sich über zwei erstrecken Spalten:

Mein Titel

Zellen, die sich über zwei Zeilen erstrecken:

Name	Telefon
Telefon	555 77 854