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

Lösung für den Fehler beim Aufruf von Yum im Docker-Container

Beim Ausführen von yum im Dockerfile oder im Cont...

So verwenden Sie Docker zum Bereitstellen eines Django-Technologie-Stack-Projekts

Mit der Popularität und Reife von Docker ist es a...

Implementierung der Nginx-Routing-Weiterleitung und der Reverse-Proxy-Standortkonfiguration

Drei Möglichkeiten zum Konfigurieren von Nginx Di...

Detaillierte Erklärung der Rolle des neuen Operators in Js

Vorwort Js ist heutzutage die am häufigsten verwe...

Centos7-Installation des FFmpeg-Audio-/Video-Tools – einfaches Dokument

ffmpeg ist ein sehr leistungsfähiges Tool zur Aud...

Sqoop-Exportkarte100 % reduzieren0 % steckt aus verschiedenen Gründen und Lösungen fest

Ich nenne diese Art von Fehler einen typischen „H...

Wie MLSQL Stack das Stream-Debugging vereinfacht

Vorwort Ein Klassenkamerad untersucht die Streami...

Informationen zur ROS2-Installation und zur Verwendung der Docker-Umgebung

Inhaltsverzeichnis Warum Docker verwenden? Docker...

Detaillierte Erläuterung des Beispiels zum Exportieren von Daten aus einer angegebenen Tabelle in MySQL

Detaillierte Erklärung zum MySQL-Export von Daten...

Zusammenfassung von 7 Gründen, warum Docker nicht für die Bereitstellung von Datenbanken geeignet ist

Docker erfreut sich seit zwei Jahren großer Belie...

5 MySQL-GUI-Tools, die Ihnen bei der Datenbankverwaltung empfohlen werden

Es gibt viele Datenbankverwaltungstools für MySQL...

Tutorial zu HTML-Tabellen-Tags (12): Rahmenstil-Attribut FRAME

Verwenden Sie die FRAME-Eigenschaft, um den Stilt...

Vue Shuttle-Box ermöglicht Auf- und Abbewegung

In diesem Artikelbeispiel wird der spezifische Co...

Ein Artikel, der Ihnen hilft, mehr über JavaScript-Arrays zu erfahren

Inhaltsverzeichnis 1. Die Rolle des Arrays: 2. De...

Lösung für den Konfigurationsfehler des Nginx-SSL-Zertifikats

1. Einleitung Wenn ein Webprojekt auf unserem Lin...