Heim Web-Frontend HTML-Tutorial Grundlegende HTML-Grammatik- und semantische Schreibregeln und Beispiele

Grundlegende HTML-Grammatik- und semantische Schreibregeln und Beispiele

Jun 28, 2017 pm 02:03 PM
html

Dieser Artikel organisiert die grundlegende Syntax und Semantik von HTML und bietet Beispiele, die Freunde, die sie benötigen, auf

DOCTYPE

DOCTYPE (Dokumenttyp)

Diese Deklaration befindet sich ganz am Anfang des Dokuments, vor dem HTML-Tag. Dieses Tag teilt dem Browser mit, welche HTML- oder XHTML-Spezifikation das Dokument verwendet.

DTD (Document Type Definition)

Die Deklaration beginnt mit

, unterscheidet nicht zwischen Groß- und Kleinschreibung und hat keinen Inhalt davor (außer Leerzeichen) Dadurch wird der Browser im IE den Quirks-Modus aktivieren, um Webseiten darzustellen. Öffentlich <!DOCTYPE>, das Namensformat ist Registrierung // Organisation // Typ-Tag // Sprache, Registrierung bezieht sich darauf, ob die Organisation bei der Internationalen Organisation für Normung (ISO) registriert ist, + bedeutet Ja, - bedeutet Nein. Organisation ist der Name der Organisation, zum Beispiel: DTD. Der Typ ist normalerweise DTD. Ein Tag gibt eine Beschreibung des öffentlichen Texts an, d. h. einen eindeutigen beschreibenden Namen für den referenzierten öffentlichen Text, dem eine Versionsnummer folgen kann. Die letzte Sprache ist die W3C-Sprachkennung der DTD-Sprache, z. B.: EN bedeutet Englisch, ZH bedeutet Chinesisch. XHTML 1.0 kann drei DTD-Typen deklarieren. Bedeutet jeweils ISO 639. HTML 4.01 strict >严格版本,过渡版本,以及基于框架的HTML文档

HTML5-Dokumenttyp

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

meta

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

Deklariert die von verwendete Zeichenkodierung das Dokument

Vor HTML5

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

SEO-Optimierung

<!DOCTYPE html><!-- 使用 Html5 doctype,不区分大小写 -->Titel

Seite Beschreibung

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
html5
<meta charset="utf-8">
Nach dem Login kopieren
Schlüsselwörter

Webautor

<title>your title</title>

Web Suchmaschinen-Indexierungsmethode

<meta name="description" content="your description">

folgen Folgen Sie dem Link und analysieren Sie die Zielseite. Dies ist das Standardverhalten und kann ignoriert werden.

index Indizieren Sie die Webseite. Dies ist das Standardverhalten und kann ignoriert werden. <meta name="keywords" content="your keywords">

noodp verwendet nicht das Open Directory Project, um Inhaltsbeschreibungen zu erstellen.

noydir verwendet kein Yahoo-Verzeichnis, um Inhaltsbeschreibungen zu erstellen.

<meta name="author" content="your name"> noarchive erlaubt Suchmaschinen nicht, zwischengespeicherte Versionen von Inhalten anzuzeigen.

Cache ermöglicht Suchmaschinen die Anzeige zwischengespeicherter Versionen von Inhalten.

nocache erlaubt Suchmaschinen nicht, zwischengespeicherte Versionen von Inhalten anzuzeigen. Das <meta name="robots" content="index,follow">

-Tag

definiert die Struktur des Dokuments und macht das Markup des Dokuments semantischer.

Tipps

HTML5-Tags sind reichhaltiger und vollständiger. Das p-Tag scheint keinen Nutzen zu haben, aber wenn Sie nur einen Abschnitt mit Stil hinzufügen möchten zum Dokument, das ist, wenn das p-Tag nützlich ist. Die Standardstile der

-Tags unterscheiden sich in verschiedenen Browsern. Damit eine Webseite in verschiedenen Browsern den gleichen Effekt hat, ist es normalerweise notwendig, zuerst den Tag-Stil

zu formatieren Wenn Sie das HTML5-Tag in einem Browser verwenden möchten, der HTML5 nicht unterstützt, müssen Sie ein kleines Stück JavaScript-Code hinzufügen

html5 demo
<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>html5 demo</title>
 </head>
 <body>
 <header>
  <h1>html5 demo</h1>
  <nav>
  <ul>
   <li>nav1</li>
   <li>nav2</li>
  </ul>
  </nav>
 </header>
 <section>
  <h1>article aside</h1>
  <article>article</article>
  <aside>aside</aside>
 <section>
 <footer>footer</footer>
 </body>
</html>
Nach dem Login kopieren

Das Tag ist editierbares Attribut contenteditable

@charset "utf-8";
html{margin:0;padding:0;border:0}a,abbr,acronym,address,article,aside,blockquote,body,caption,code,dd,del,dfn,dialog,p,dl,dt,em,fieldset,figure,footer,form,h1,h2,
h3,h4,h5,h6,header,hgroup,iframe,img,label,legend,li,nav,object,ol,p,pre,q,section,span,table,tbody,td,tfoot,th,thead,tr,ul{margin:0;padding:0;border:0;
font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,dialog,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body
{line-height:1.5;background:#fff}table{border-collapse:separate;border-spacing:0}caption,td,th{text-align:left;font-weight:400;float:none!important}table,td,
th{vertical-align:middle}blockquote:after,blockquote:before,q:after,q:before{content:&#39;&#39;}blockquote,q{quotes:"" ""}a img{border:none}a{text-decoration:none}:
focus{outline:0}
Nach dem Login kopieren
Ich hoffe, dass der Inhalt des obigen Artikels allen meinen Freunden hilfreich sein wird

Das obige ist der detaillierte Inhalt vonGrundlegende HTML-Grammatik- und semantische Schreibregeln und Beispiele. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Tabellenrahmen in HTML Tabellenrahmen in HTML Sep 04, 2024 pm 04:49 PM

Anleitung zum Tabellenrahmen in HTML. Hier besprechen wir verschiedene Möglichkeiten zum Definieren von Tabellenrändern anhand von Beispielen für den Tabellenrand in HTML.

Verschachtelte Tabelle in HTML Verschachtelte Tabelle in HTML Sep 04, 2024 pm 04:49 PM

Dies ist eine Anleitung für verschachtelte Tabellen in HTML. Hier diskutieren wir anhand der entsprechenden Beispiele, wie man eine Tabelle innerhalb der Tabelle erstellt.

HTML-Rand links HTML-Rand links Sep 04, 2024 pm 04:48 PM

Anleitung zum HTML-Rand links. Hier besprechen wir einen kurzen Überblick über HTML margin-left und seine Beispiele sowie seine Code-Implementierung.

HTML-Tabellenlayout HTML-Tabellenlayout Sep 04, 2024 pm 04:54 PM

Leitfaden zum HTML-Tabellenlayout. Hier besprechen wir die Werte des HTML-Tabellenlayouts zusammen mit den Beispielen und Ausgaben im Detail.

HTML-Eingabeplatzhalter HTML-Eingabeplatzhalter Sep 04, 2024 pm 04:54 PM

Leitfaden für HTML-Eingabeplatzhalter. Hier besprechen wir die Beispiele für HTML-Eingabeplatzhalter zusammen mit den Codes und Ausgaben.

HTML-geordnete Liste HTML-geordnete Liste Sep 04, 2024 pm 04:43 PM

Leitfaden zur HTML-geordneten Liste. Hier besprechen wir auch die Einführung von HTML-geordneten Listen und Typen sowie deren Beispiele

Text in HTML verschieben Text in HTML verschieben Sep 04, 2024 pm 04:45 PM

Anleitung zum Verschieben von Text in HTML. Hier besprechen wir eine Einführung, wie Marquee-Tags funktionieren, mit Syntax und Beispielen für die Implementierung.

HTML-Onclick-Button HTML-Onclick-Button Sep 04, 2024 pm 04:49 PM

Anleitung zum HTML-OnClick-Button. Hier diskutieren wir deren Einführung, Funktionsweise, Beispiele und Onclick-Events in verschiedenen Veranstaltungen.

See all articles