Umfassendes Verständnis der HTML-Grundstruktur

Umfassendes Verständnis der HTML-Grundstruktur

Einführung in HTML

HyperText-Auszeichnungssprache: Hypertext-Auszeichnungssprache

HyperText: Hypertext (Text + Bilder + Video + Audio + Links)

Auszeichnungssprache:

Drei Elemente einer Website

Bild, Hyperlink, Text

Grundstruktur von HTML

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. < html >   
  2.      <Kopf>   
  3.          < Titel > Dokument </ Titel >   
  4.      </ Kopf >   
  5.      < Textkörper >   
  6. Ich bin Mossbaoo!
  7.      </ Körper >   
  8. </ html >   

Standard-HTML-Tags für Webseiten

1. HTML-Dokumentdeklaration: <!DOCTYPE HTML>

2. Seitentitel: <title>~</title>

3. Seitenkodierung: <meta charset="utf-8" />

UTF-8 ist eine mehrsprachige Kodierung (empfohlen)

gb2312 ist die vereinfachte chinesische Kodierung


4. Seiten-Keywords: <meta name="keywords" content="Keyword 1,Keyword 2,…" />

Hauptinhalt der Seite: <meta name="description" content="Inhaltseinführung" />

Hinweis: Das Meta-Tag ist ein Hilfstag der HTML-Sprache, der normalerweise zur Optimierung für Suchmaschinen verwendet wird. Es befindet sich im Kopf des HTML-Dokuments.

Generieren Sie die anfängliche Struktur des HTML-Dokuments

1. HTML5-Standardstruktur: html:5+Tabulatortaste oder !+Tabulatortaste

Die generierten Ergebnisse sind wie folgt

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <!DOCTYPE html >   
  2. < html   lang = "en" >   
  3. <Kopf>   
  4.      < Meta   Zeichensatz = "UTF-8" >   
  5.      <Titel> Dokument </Titel>   
  6. </ Kopf >   
  7. < Textkörper >   
  8.        
  9. </ Körper >   
  10. </ html >   

2. HTML4-Übergangsstruktur: html:xt+Tabulatortaste

Die generierten Ergebnisse sind wie folgt

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >   
  2. < html   xmlns = "http://www.w3.org/1999/xhtml"   xml:lang = "de" >   
  3. <Kopf>   
  4.      < Meta   http-equiv = "Inhaltstyp"   Inhalt = "Text/HTML; Zeichensatz=UTF-8" >   
  5.      <Titel> Dokument </Titel>   
  6. </ Kopf >   
  7. < Textkörper >   
  8.        
  9. </ Körper >   
  10. </ html >   

Hinweis zu HTML-Tags:

• HTML-Elemente bestehen aus Start-Tags und End-Tags.

• Der zwischen den Start- und End-Tags eingeschlossene Text ist der Inhalt des Elements.

• HTML-Tags müssen einen Anfang und ein Ende haben. Handelt es sich um einen Tag ohne Inhalt (leeres Tag), beenden Sie ihn mit />.

• Tag-Namen unterscheiden nicht zwischen Groß- und Kleinschreibung, in XHTML müssen Tag-Namen jedoch klein geschrieben sein.

• Tags haben Attribute, die verwendet werden, um die Eigenschaften und Merkmale der Tags darzustellen. Attribute werden im öffnenden Tag angegeben.

Das oben beschriebene umfassende Verständnis der Grundstruktur von HTML ist der gesamte Inhalt, den der Editor mit Ihnen teilt. Ich hoffe, es kann Ihnen als Referenz dienen. Ich hoffe auch, dass Sie 123WORDPRESS.COM unterstützen.

Original-URL: http://www.cnblogs.com/mossbaoo/archive/2016/07/31/5724065.html

<<:  So entfernen Sie die Unterstreichung eines Hyperlinks anhand von drei einfachen Beispielen

>>:  Implementierung eines einfachen Weihnachtsspiels mit JavaScript

Artikel empfehlen

RHEL7.5 MySQL 8.0.11 Installations-Tutorial

Dieser Artikel zeichnet das Installationstutorial...

Centos erstellt ein Prozessdiagramm für den Chrony-Zeitsynchronisationsserver

Meine Umgebung: 3 centos7.5 1804 Meister 192.168....

Zusammenfassung der 7 Fallstricke bei der Verwendung von React

Inhaltsverzeichnis 1. Komponentenaufblähung 2. Än...

Detaillierte Erläuterung der Implementierung der Nginx-Prozesssperre

Inhaltsverzeichnis 1. Die Rolle der Nginx-Prozess...

Verwendung des Linux Dig-Befehls

Dig-Einführung: Dig ist ein Tool, das DNS einschl...

URL-Rewrite-Modul 2.1 URL-Rewrite-Modul – Regeln schreiben

Inhaltsverzeichnis Voraussetzungen Einrichten ein...

Anwendungsszenarien für React useMemo und useCallback

Inhaltsverzeichnis verwendenMemo useCallback verw...

Natives JS zum Erstellen einer Drag-Fotowand

Dieser Artikel zeigt Ihnen eine verschiebbare Fot...

Tipps, wie Sie aus Pixeln umfassende Markenerlebnisse machen

Herausgeber: In diesem Artikel wird die Rolle erö...

Detaillierte Erläuterung der Konfiguration der Alibaba Cloud-Sicherheitsregeln

Vor zwei Tagen habe ich das Double 11-Shopping-Fe...

Detaillierte Erläuterung der einfachen Verwendung des MySQL-Abfragecaches

Inhaltsverzeichnis 1. Implementierungsprozess des...