Zusammenfassung gängiger HTML-Elemente, einschließlich Grundstruktur, Dokumenttyp, Kopfzeile, Textkörper usw.

Zusammenfassung gängiger HTML-Elemente, einschließlich Grundstruktur, Dokumenttyp, Kopfzeile, Textkörper usw.
1. Grundstruktur:

Code kopieren
Der Code lautet wie folgt:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=UTF-8">
<Titel></Titel>
</Kopf>
<Text>
</body>
</html>

2. Dokumenttyp:

(1) HTML 4.01

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

(2) HTML5

<!DOCTYPE html>

(3) XHTML 1.0

Code kopieren
Der Code lautet wie folgt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

3. Kopf:
(1) Zeichensatz

Code kopieren
Der Code lautet wie folgt:

<meta http-equiv="Inhaltstyp" content="text/html; charset=UTF-8">

(2) Einführung in JS

Code kopieren
Der Code lautet wie folgt:

<script language="javascript"></script>
<script language="javascript" src=""></script>
<script language="javascript">var u="__URL__";var a="__APP__";</script>
<script language="javascript" src="__PUBLIC__/js/jquery-1.8.1.min.js"></script>

(3) Einführung in CSS

Code kopieren
Der Code lautet wie folgt:

<style type="text/css"></style>
<link rel="stylesheet" href="" type="text/css">

(4) Legen Sie den Standardsprung fest

Code kopieren
Der Code lautet wie folgt:

<base href="" />
<base target="_blank" />

(5) Suchmaschinenbezogene Informationen festlegen

Code kopieren
Der Code lautet wie folgt:

<meta name="Beschreibung" Inhalt=",," />
<meta name="Schlüsselwörter" content=",," />

4. Betreff:

(1) Grundlegende Inhalte

Code kopieren
Der Code lautet wie folgt:

<body onload="">
<div id="" Klasse=""></div>
<div Stil="clear:both;">

(2) Formular
GET-Übermittlung: <form id="" action="" method="post"></form>
POST-Übermittlung: <form id="" action="" method="get"></form>

Mit Datei senden: <form id="" action="" method="post" enctype="multipart/form-data"></form>

Häufig auf der Homepage verwendet:

Code kopieren
Der Code lautet wie folgt:

<input id="Benutzername" name="Benutzername" class="" type="text" placeholder="Benutzername"></input>
<input id="Passwort" name="Passwort" class="" type="Passwort" placeholder="Passwort"></input>
<input id="login_button" class="button" type="button" value="Anmelden" onclick=""></input>
<input id="register_button" class="button" type="button" value="Registrieren" onclick="location.href=''">


Textfeld: <input id="" name="" class="" type="text"></input>

Passwortfeld: <input id="" name="" class="" type="password"></input>
Normale Schaltfläche: <input id="" name="" class="" type="button"></input>
Optionsfeld: <input id="" name="" class="" type="radio"></input>
Multiple-Choice-Schaltfläche: <input id="" name="" class="" type="checkbox"></input>

So zeigen Sie den hochgeladenen Dateinamen an:

<input id="" name="" class="" type="text" onchange="document.getElementById('').value=this.value"></input>
Dateiupload: <input id="" name="" class="" type="file"></input>
Verstecktes Feld: <input id="" name="" class="" type="hidden"></input>
Senden-Schaltfläche: <input id="" name="" class="" type="submit"></input>
Schaltfläche zum Senden des Bildes: <input id="" name="" class="" type="image"></input>
Reset-Taste: <input id="" name="" class="" type="reset"></input>

Mehrzeiliger Textbereich: <textarea cols="" rows="" id="" name=""></textarea>

Dropdown-Menü:

Code kopieren
Der Code lautet wie folgt:

<Name auswählen="" Größe="" mehrere>
<Optionswert="" ausgewählt></Option>
<Optionswert=""></Option>
</Auswählen>

(3) Klicken Sie auf den Hyperlink, um zu JS zu springen: <a class="" href="#" id="" onclick="location.href=''"></a>
Leerer Hyperlink (klicken, um zum Seitenanfang zu springen): <a href="#"></a>
Leerer Hyperlink (kein Klick): <a href="javascript:void(0);"></a>

Bild-Hyperlink: <a href=""><img width="" height="" src=""></a>

(4) Bild Normales Bild: <img src="" >

Breite und Höhe des Bildes festlegen (proportional verkleinert, die Dateigröße bleibt unverändert): <img width="" height="" src="">

(5) Tabelle

Code kopieren
Der Code lautet wie folgt:

<table border="1" cellpadding="10" cellspacing="0">
<tr>
<th width="100px">A</th>
<th width="200px">B</th>
</tr>
<tr>
<td>EIN</td>
<td>B</td>
</tr>
</Tabelle>

(6) Liste

Ungeordnete Liste:

Code kopieren
Der Code lautet wie folgt:

<ul Typ="Scheibe">
<li>Erster Punkt</li>
<li>Zweiter Punkt</li>
</ul>
<ul Typ="Quadrat">
<li>Erster Punkt</li>
<li>Zweiter Punkt</li>
</ul>
<ul Typ="Kreis">
<li>Erster Punkt</li>
<li>Zweiter Punkt</li>
</ul>

Sortierte Liste:

Code kopieren
Der Code lautet wie folgt:

<ol Typ="1">
<li>Erster Punkt</li>
<li>Zweiter Punkt</li>
</ol>
<ol Typ="a">
<li>Erster Punkt</li>
<li>Zweiter Punkt</li>
</ol>
<ol Typ="A">
<li>Erster Punkt</li>
<li>Zweiter Punkt</li>
</ol>
<ol Typ="i">
<li>Erster Punkt</li>
<li>Zweiter Punkt</li>
</ol>
<ol Typ="Ich">
<li>Erster Punkt</li>
<li>Zweiter Punkt</li>
</ol>

(7) Multimedia

Laufende Untertitel: <marquee></marquee>

Hintergrundmusik: <bgsound></bgsound>

Audio, Video, Flash, MPEG usw.: <embed></embed>

(8) Zeilenkontrolle

Titel: <hn></hn>

Absatz: <p></p>

Zeilenumbrüche: <br>

Horizontale Linie: <hr>

5. Rahmen

Code kopieren
Der Code lautet wie folgt:

<frameset rows="50% 50%">
<farme src="">
<farme src="">
</frameset>

<<:  Verschiedene Möglichkeiten, den Aushöhlungseffekt der CSS3-Maskenebene zu erzielen

>>:  Apropos „Weniger und mehr“ im Webdesign (Bild)

Artikel empfehlen

Beispiele für die Verwendung von MySQL-Abdeckungsindizes

Was ist ein Deckungsindex? Das Erstellen eines In...

Zusammenfassung häufig verwendeter Escape-Zeichen in HTML

Die in HTML häufig verwendeten Escape-Zeichen wer...

Beispielcode für HTML-Formularkomponente

HTML-Formulare werden verwendet, um verschiedene ...

Detailliertes Tutorial zur Installation und Deinstallation von MySql

In diesem Artikel finden Sie das Tutorial zur Ins...

js behandelt die Kontoabmeldung beim Schließen des Browsers

Inhaltsverzeichnis Klassischer Ansatz Frage Weite...

Nginx-Stream-Konfigurationsproxy (Nginx TCP/UDP-Lastausgleich)

Auftakt Wir alle wissen, dass nginx ein hervorrag...

JS implementiert Anforderungsdispatcher

Inhaltsverzeichnis Abstraktion und Wiederverwendu...

25 Tipps und Tricks zur Div+CSS-Programmierung

1. Das ul-Tag hat in Mozilla standardmäßig einen ...

Praxis der Verwendung von SuperMap in Vue

Inhaltsverzeichnis Vorwort Ressourcen zum Thema V...

Tutorial zur Installation und Konfiguration von VMware Tools für Ubuntu 18.04

Dieser Artikel beschreibt die Installation und Ko...

Webdesign-Tipps für Formular-Eingabefelder

Dieser Artikel listet einige Tipps und Codes zu F...