Eine der Grundkomponenten von HTML sind Absätze. Verwenden Sie die Tags „<p>“ und „</p>“, um Absätze zu definieren. Zum Beispiel:
<p>Dies ist ein Absatz. </p>
Ein Hyperlink ist ein Link zu einer anderen Seite oder Website. Verwenden Sie die Tags „<a href=''>“ und „</a>“, um Hyperlinks zu erstellen, wobei das href-Attribut die URL des Links angibt. Zum Beispiel:
<a href="https://www.jb51.net">Dies ist ein Link</a>
Bilder können die visuelle Wirkung einer Seite verstärken und mehr Informationen vermitteln. Fügen Sie Bilder mit dem Tag „<img src='' alt=''/>“ ein, wobei das src-Attribut den Pfad zur Bilddatei angibt und das alt-Attribut alternativen Text enthält, der angezeigt wird, wenn das Bild nicht angezeigt werden kann. Zum Beispiel:
<img src="image.jpg" alt="Ein wunderschönes Bild">
Tabellen sind eine primäre Möglichkeit, Daten auf Webseiten darzustellen. Verwenden Sie die Tags „<table>“, „<tr>“ und „<td>“, um Tabellen, Zeilen bzw. Zellen zu definieren. Zum Beispiel:
<Tabelle> <tr> <td>Erste Zeile, erste Spalte</td> <td>Erste Zeile, zweite Spalte</td> </tr> <tr> <td>Zweite Zeile, erste Spalte</td> <td>Zweite Zeile, zweite Spalte</td> </tr> </table>
Verwenden Sie die Tags „<ul>“ oder „<ol>“, um eine ungeordnete oder geordnete Liste zu erstellen, und verwenden Sie dann das Tag „<li>“, um die Listenelemente zu definieren. Zum Beispiel:
<ul> <li>Listenelement 1</li> <li>Listenelement 2</li> </ul> <ol> <li>Listenelement 1</li> <li>Listenelement 2</li> </ol>
Formulare sind Komponenten zum Sammeln von Benutzereingaben. Verwenden Sie das Tag „<form>“, um das Formular zu erstellen, und das Tag „<input>“, um die Eingabefelder zu definieren. Zum Beispiel:
<form action="submit.php" method="post"> <label for="username">Benutzername:</label> <input type="text" name="username" id="username"> <label for="password">Passwort:</label> <input type="password" name="password" id="password"> <input type="submit" value="Submit"> </form>
Mit CSS kann das Erscheinungsbild und Layout von Webseiten gesteuert werden. CSS-Stile können mithilfe des Tags „<style>“ zu HTML-Dokumenten hinzugefügt werden. Zum Beispiel:
<Stil>
Körper {
Hintergrundfarbe: #f2f2f2;
}
h1 {
Farbe: blau;
Textausrichtung: Mitte;
}
</style>Der obige Codeausschnitt ist nur die Spitze des Eisbergs in der HTML-Sprache. Sie können Ihnen jedoch dabei helfen, die grundlegende Struktur und den Stil einer Webseite zu erstellen, und Ihnen Inspiration für weitere Lerninhalte geben. Versuchen Sie jetzt, mit diesen HTML-Codes Ihre eigene Website zu erstellen!
HTML5-Dokumentationserklärung
<!DOCTYPE html>
Der obige Codeblock ist eine HTML5-Dokumentdeklaration, die besagt, dass die aktuelle Webseite gemäß den HTML5-Standards geschrieben ist.
Achten Sie beim Schreiben einer Webseite darauf, die HTML5-Dokumentdeklaration oben auf der Webseite zu schreiben. Wenn Sie keine Dokumentdeklaration schreiben, wechseln einige Browser in einen seltsamen Modus. Nach dem Aufrufen des seltsamen Modus analysiert der Browser die Seite und die Seite wird nicht normal angezeigt. Um den Aufruf dieses Modus zu vermeiden, müssen Sie daher eine Dokumentanweisung schreiben.
Häufig verwendete Dokumentdeklarationen
HTML5
<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Hinweis: <!DOCTYPE> ist kein HTML-Tag. Es liefert dem Browser Informationen (eine Aussage) darüber, welche Version des HTML geschrieben wurde.
Um mit einigen alten Seiten kompatibel zu sein, hat der Browser zwei Parsing-Modi eingestellt:
Standardmodus Standardmodus
Macken-Modus, seltsamer Modus
Seltsame Modi führen beim Parsen von Webseiten zu unvorhersehbarem Verhalten, und wir sollten das Auftreten seltsamer Modi vermeiden.
Dateityp <HTML></HTML> (am Anfang und Ende der Datei platziert)
Dokumenttitel <TITLE></TITLE> (muss im Block „Header“ platziert werden)
Header <HEAD></HEAD> (beschreibende Informationen, z. B. „Thema“)
Stil <BODY></BODY> (Dokumentkörper)
Titel <H?></H?> (von 1 bis 6, es gibt sechs Auswahlebenen)
Ausrichtung des Titels <H?ALIGN=LEFT|CENTER|RIGHT></H?>
Unterscheiden Sie <DIV></DIV>
Differenzierte Ausrichtung <DIVALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV>
Zitierblock <BLOCKQUOTE></BLOCKQUOTE> (normalerweise eingerückt)
Hervorhebung <EM></EM> (normalerweise kursiv dargestellt)
Besondere Betonung auf <STRONG></STRONG> (normalerweise fett dargestellt)
Zitat <CITE></CITE> (normalerweise kursiv dargestellt)
Code <CODE></CODE> (zur Anzeige des Quellcodes)
Beispiel<SAMP></SAMP>
Tastatureingabe<KBD></KBD>
Variable<VAR></VAR>
Definieren Sie <DFN></DFN> (von einigen Browsern nicht bereitgestellt)
Adresse<ADDRESS></ADDRESS>
Große Zeichen<BIG></BIG>
Kleingedrucktes<SMALL></SMALL>
Fett<B></B>
kursiv<I></I>
Fazit <U></U> (einige Browser bieten es immer noch nicht)
Durchgestrichenes <S></S> (einige Browser bieten es immer noch nicht)
Tiefgestellt<SUB></SUB>
Hochgestelltes <SUP></SUP>
Schreibmaschine <TT></TT> (Anzeige in Einzelzeichenschrift)
Vorgegebenes Format <PRE></PRE> (behält die Größe der Leerzeichen in der Datei bei)
Die Breite des vorformatierten Formats <PRE WIDTH=?></PRE> (in Zeichen)
Richten Sie es an <CENTER></CENTER> aus (sowohl Text als auch Bilder sind akzeptabel)
Shine <BLINK></BLINK> (das am meisten verspottete Tag aller Zeiten)
Schriftgröße <FONTSIZE=?></FONT> (von 1 bis 7)
Schriftgröße ändern <FONTSIZE=+|-?></FONT>
Basisschriftgröße <BASEFONTSIZE=?> (von 1 bis 7; Standardeinstellung ist 3)
Schriftfarbe<FONTCOLOR="#$$"></FONT> ($$ ist der Farbcode)
1) Bild: <img src="image address">
2) Treten Sie dem Link bei: <a href="Verknüpfte Adresse">Schreiben Sie die Wörter ein, die Sie schreiben möchten</a>
3) Öffnen Sie den Link in einem neuen Fenster: <a href="Zugehörige Adresse" target="_blank">Schreiben Sie die Wörter ein, die Sie schreiben möchten</a>
4) Mobile Schriftart (Marquee): <marquee>Schreiben Sie die Wörter, die Sie schreiben möchten</marquee>
5) Fettschrift: <b>Schreiben Sie die Wörter, die Sie schreiben möchten</b>
6) Kursivschrift: <i>Schreiben Sie die Wörter, die Sie schreiben möchten</i>
7) Unterstreichung der Schriftart: <u>Schreiben Sie die Wörter ein, die Sie schreiben möchten</u>
8) Schriftart durchgestrichen: <s>Schreiben Sie die Wörter, die Sie schreiben möchten</s>
9) Erhöhen Sie die Schriftgröße: <big>Schreiben Sie die Wörter ein, die Sie schreiben möchten</big>
10) Steuerung der Schriftgröße: <h1>Schreiben Sie die Wörter, die Sie schreiben möchten</h1> (die Schriftgröße kann zwischen h1 und h5 liegen, h1 ist die größte, h5 die kleinste)
11) Ändern Sie die Schriftfarbe: <font color="#value">Schreiben Sie die Wörter, die Sie schreiben möchten</font> (der Wert liegt zwischen 000000 und ffffff (16-Bit-Hexadezimalzahl))
12) Entfernen Sie die Unterstreichung der Verbindung: <a href="Related address" style="text-decoration:none">Schreiben Sie die Wörter ein, die Sie schreiben möchten</a>
13) Musik posten: <embed src="Musikadresse" width="Width" height="Height" autostart=false>
14) Flash einfügen: <embed src="flash address" width="width" height="height">
15) Videodateien einfügen: <img dynsrc="file address" width="width" height="height" start=mouseover>
16) Zeilenumbruch:<br>
17) Absatz: <p>Absatz</p>
18) Ursprünglicher Textstil: <pre>Text</pre>
19) Beitragshintergrund ändern: <body background="background image address">
20) Problem behoben, bei dem der Hintergrund des Beitrags nicht mit der Bildlaufleiste scrollte: <body background="Hintergrundbildadresse" bodybgproperties=fixed>
21) Passen Sie die Hintergrundfarbe des Beitrags an: <body bgcolor="#value">(Wert siehe 10)
22) Hintergrundmusik posten: <bgsound="Hintergrundmusikadresse" loop=infinite>
23) Veröffentlichen Sie die Webseite: <iframe