Grundlegende Struktur von HTML-Dokumenten (Grundkenntnisse zur Erstellung von Webseiten)
|
HTML-Funktionsprinzip: 1. Lokaler Vorgang: Öffnen Sie die HTML-Datei mit einem Browser 2. Fernzugriffsvorgang: Lokaler Browser greift auf Remote-Server (Tomcal) zu. Der Dateiname der Webseite sollte möglichst keine chinesischen Zeichen enthalten, da die Webseitendateien in Zukunft auf dem Server gespeichert werden. Es wird empfohlen, HTML-Dateien in Englisch zu speichern. Sie können entweder die Dateierweiterung .htm oder .html verwenden. 2. Grundstruktur eines HTML-Dokuments 1. Dokumentskelett: Alle Webseitendateien bestehen normalerweise aus den folgenden vier Tag-Paaren, die das Dokumentskelett bilden Code kopieren Der Code lautet wie folgt:<html> <Kopf> <title>Titel der Webseite</title> </Kopf></p> <p><Körper> Hier platzieren Sie den Inhalt, der auf der Webseite angezeigt werden soll </body> </html> <html>....</html>: markiert den Anfang und das Ende einer Webseite. Alle HTML-Elemente müssen zwischen diesen Tags platziert werden. <head>...</head>: identifiziert die Header-Informationen der Webseitendatei, wie z. B. Titel, Suchmaschinen-Schlüsselwörter usw. Der darin enthaltene Inhalt wird zuerst geladen <title>....</title>: Identifiziert den Titel der Webseitendatei <body>....</body>: bezeichnet den Hauptteil der Webseitendatei, also den sichtbaren Inhalt der Seite 2. Meta-Tags Das Meta-Tag wird verwendet, um Dateiinformationen zu definieren und die Webseite zu beschreiben, um die Suche in Suchmaschinen zu erleichtern. Es sollte zwischen <head> <head/> platziert werden. Schlüsselwörter festlegen: (kurz, für Suchmaschinen) Beschreibt die Version der Webseite: Beschreibt, mit welcher Software die Webseite erstellt wurde: Code kopieren Der Code lautet wie folgt:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"> <html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>"> <Kopf> <meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" /> <meta name="keywords" content="Webdesign, Webseiten lernen" /> <meta name="description" content="Wie man Webdesign lernt, Methoden zum Erlernen von Webdesign, HTML-Handbuch Chinesisch" /> <meta name="author" content="123WORDPRESS.COM" /> <meta http-equiv="aktualisieren" content="2;url=http://www.baidu.com" /> <meta name="überarbeitet" content="html4.01"> <title>Grundstruktur des HTML-Dokuments_Meta-Tag</title> </Kopf> <Text> Das Meta-Tag wird verwendet, um Dateiinformationen zu definieren und die Webseite zu beschreiben, um die Suche in Suchmaschinen zu erleichtern. </body> </html> 3. Kopfbereich Code kopieren Der Code lautet wie folgt:<Kopf> <title>Titel der Webseite</title>Deklaration des Dateititels<mate>Einige Dokumentinformationen, wie etwa Dokumentschlüsselwörter, Beschreibung, Zeichensatzeinstellungen usw. <base> Hyperlink-URL-Basisreferenzpunkt JavaScript- und VBScript-Programme Stylesheet kann verwendet werden, um die Layout-Deklaration festzulegen <link> kann auf externe Dateien verweisen, wie etwa CSS-Layoutbeispiele </Kopf> 3. Syntax der HTML-Tags Die grundlegendste Syntax von HTML ist <tag>content</tag>. Tags werden normalerweise paarweise verwendet: ein öffnender und ein schließender Tag. Es gibt auch einen einzelnen Tag ohne schließenden Tag, wie beispielsweise <hr/> HTML-Tag-Typen: Einzel-Tag und Doppel-TagDoppel-Tag: Einzelne Markierung: Code kopieren Der Code lautet wie folgt:<!-- Mit Attributen: <tag name attribute="attribute value">...</tag name> Zum Beispiel: <font size="3">.....</font>--> <font size="4" color="#33FF00">2. Der Sportlehrer sagte: Wer es wagt, in meinem Unterricht einen Rock zu tragen, wird bestraft, indem er kopfüber steht! </font> </p> <p><!--Ohne Attribute: <tag name>...</tag name> Beispiel: <title>.....</title>--></p> <p><!--Mit Attributen: <tag name attribute="attribute value"> Beispiel: <hr width="200"/> (die Standardeinstellung ist zentriert)--> <hr width="200"/></p> <p><!--Kein Attribut: <Tag-Name> Wie zum Beispiel: Zeigt einen Zeilenumbruch, aber keinen Absatzumbruch an--></p> <p>3. Lebe in meinem Herzen, hast du die Miete bezahlt? 4. Durch dich habe ich mein Gesicht verloren und deshalb gebe ich dir nicht einmal eine Chance, wieder auf die Bühne zu kommen. |
<<: Detaillierte Erklärung zum einfachen Wechseln von CSS-Themen
>>: Implementierung einer Login-Seite basierend auf layui
Artikel empfehlen
Schritte zum Erstellen eines WEBSERVERS mit NODE.JS
Inhaltsverzeichnis Was ist nodejs Installieren Si...
Lösung für Primärschlüsselkonflikte, wenn innodb_index_stats beim Importieren von Sicherungsdaten einen Fehler meldet
Fehlerbeschreibung percona5.6, mysqldump vollstän...
Vue implementiert die Drag & Drop-Funktion für Bilder
In diesem Artikelbeispiel wird der spezifische Co...
Reine CSS-Implementierung (kein Skript) Tooltip-Textaufforderungseffekt im HTML-Befehlsstil
Analysieren Sie den Ausführungsprozess. Bewegen S...
Beispielerklärung der Alarmfunktion in Linux
Einführung in die Linux-Alarmfunktion Oben genann...
Häufige Linux-Fehler bei der chinesischen Übersetzung (Neulinge müssen das wissen)
1.Befehl nicht gefunden Befehl nicht gefunden 2. ...
MySQL 8.0.19 Win10 - Schnellinstallations-Tutorial
Dieses Tutorial enthält das Installationstutorial...
Nodejs konvertiert JSON-String in JSON-Objekt-Fehlerlösung
Wie konvertiere ich eine JSON-Zeichenfolge in ein...
Zusammenfassung häufig verwendeter Leistungstestskripte für VPS-Server
Hier ist ein allgemeines Ein-Klick-Leistungstests...
Detaillierte Erklärung der jQuery-Kettenaufrufe
Inhaltsverzeichnis Kettenanrufe Ein kleiner Koffe...
MySQL-Beispiel zum Abrufen des heutigen und gestrigen Zeitstempels 0:00
Wie unten dargestellt: Gestern: UNIX_TIMESTAMP(CA...
Zusammenfassung der häufig verwendeten Datenbank- und Tabellen-Sharding-Lösungen von MySQL
Inhaltsverzeichnis 1. Datenbank-Engpass 2. Unterb...
Layim in Javascript, um Freunde und Gruppen zu finden
Derzeit haben die Verantwortlichen von Layui die ...
Beispiel für CSS3 zum Erzielen eines Div-Ein- und Ausschiebens von unten nach oben
1. Zuerst müssen Sie den Zielselektor von CSS3 ve...
Vollständige Schritte zum Bereitstellen von Confluence mit Docker
Confluence ist kostenpflichtig, kann aber für die...