HTML5 Grund教程

HTML5 API

HTML5 Media

HTML5 Graphics

HTML(5) Code Writing Conventions

The following lists common and frequently used HTML code conventions. Good writing habits are conducive to code maintenance and upgrades, improving work efficiency, and hope it is helpful to everyone.

HTML Code Conventions

Many web developers have little knowledge of HTML code specifications.

In2000 to2010In the year, many web developers switched from HTML to XHTML.

Developers using XHTML have gradually developed good HTML writing specifications.

Regarding HTML5 , we should form a good code specification, and the following provides several suggestions for specifications.

Use the correct document type

The document type declaration is located in the first line of the HTML document:

!DOCTYPE html>

If you want to use lowercase like other tags, you can use the following code:

<!doctype html>

Use lowercase element names

HTML5 Element names can use uppercase and lowercase letters.

Recommended to use lowercase letters:

Mixed case style is very bad.
Entwickler verwenden normalerweise Kleinbuchstaben (ähnlich wie XHTML).
Kleinbuchstabenstil sieht frischer aus.
Kleinbuchstaben sind leichter zu schreiben.

Not recommended:

<SECTION>　
　　<p>Ein Absatz.</p>
</SECTION>

Very bad:

<Section>　
　　<p>Ein Absatz.</p>
</SECTION>

Empfehlung:

<section>　
　　<p>Ein Absatz.</p>
</section>

Close all HTML elements

in HTML5 In HTML, you do not necessarily have to close all elements (for example, <p> elements), but we recommend adding a closing tag to each element.

Not recommended:

<section>
　　<p>This is a paragraph.</p>
　　<p>This is a paragraph.</p>
</section>

Empfehlung:

<section>
　　<p>Ein Absatz.</p>
　　<p>Ein Absatz.</p>
</section>

Closing empty HTML elements

in HTML5 In HTML, even empty HTML elements do not necessarily need to be closed:

Wir können es so schreiben:

<meta　charset="utf-8">

kann auch so geschrieben werden:

<meta　charset="utf-8"　/>

In XHTML und XML wird das Schrägstrich (/) ist obligatorisch.

Wenn du deine Seite von XML-Software verwenden möchtest, ist dieser Stil sehr gut.

Verwende Kleinbuchstaben für Attributnamen

HTML5 Attributnamen erlauben den Gebrauch von Gross- und Kleinbuchstaben.

Wir empfehlen, Kleinbuchstaben für Attributnamen zu verwenden:

Die gleiche Zeit的使用 von Gross- und Kleinbuchstaben ist eine sehr schlechte Gewohnheit.
Entwickler verwenden normalerweise Kleinbuchstaben (ähnlich wie XHTML).
Kleinbuchstabenstil sieht frischer aus.
Kleinbuchstaben sind leichter zu schreiben.

Nicht empfohlen:

<div　CLASS="Style">

Empfehlung:

<div　class="style">

Attributwerte

HTML5 Attributwerte können auch ohne Anführungszeichen verwendet werden.

Wir empfehlen, Anführungszeichen für Attributwerte zu verwenden:

Falls Attributwerte Leerzeichen enthalten, müssen Anführungszeichen verwendet werden.
Mischstil wird nicht empfohlen, es wird eine einheitliche Stil empfohlen.
Anführungszeichen für Attributwerte erleichtern die Lesbarkeit.

Hier sind Beispiel-Werte mit Leerzeichen enthalten, ohne Anführungszeichen, daher können sie nicht wirksam sein:

<table　class=table　striped>

Hier wurde doppelte Anführungszeichen verwendet, das ist korrekt:

<table　class="table　striped">

Bildeigenschaften

Bilder werden normalerweise die alt-Attribut verwendet. Es ersetzt das Bild, wenn es nicht angezeigt werden kann.

!DOCTYPE html>
<html>
<head>　
<meta　charset="utf-8">　
<title>Grundlagen-Tutorial-Website(oldtoolbag.com)>/title>　
</head>
<body>
<img　src="logo.png"　alt="HTML5Grundlagen-Tutorial">
</body>
</html>

Definiere die Größe des Bildes, um beim Laden eine bestimmte Fläche zu reservieren und Blinken zu reduzieren.

<img　src="logo.png"　alt="HTML5Grundlagen-Tutorial"　style="Breite:128px;Höhe:40px">

Leerzeichen und Gleichheitszeichen

Leerzeichen können vor und nach dem Gleichheitszeichen verwendet werden.

<link　　rel　=　"stylesheet"　href　=　"styles.css">

Aber wir empfehlen, weniger Leerzeichen zu verwenden:

<link rel="stylesheet" href="styles.css">

Vermeide zu lange Zeilen in einem Codeabschnitt

Verwende einen HTML-Editor, das Scrollen von links nach rechts durch den Code ist unbequem.

Versuche, weniger als 80 Zeichen.

Leerzeilen und Einrückungen

Füge nicht grundlos Leerzeilen hinzu.

Füge eine Leerzeile für jeden logischen Funktionsblock hinzu, damit er besser lesbar ist.

Verwende zwei Leerzeichen für Einrückungen, Tabs nicht empfohlen.

Vermeide unnötige Leerzeilen und Einrückungen zwischen kurzen Codeabschnitten.

Unnötidige Leerzeilen und Einrückungen:

　　　　　　　　<body>
　　<h1>Grundlagen-Tutorial-Website(oldtoolbag.com)>/h1>
　　<h2>HTML</h2>
　　<p>
　　　　Grundlagen-Tutorial-Website, lerne die Grundlagen, um weiterzukommen.
　　　　Grundlagen-Tutorial-Website, lerne die Grundlagen, um weiterzukommen.
　　　Grundlagen-Tutorial-Website, lerne die Grundlagen, um weiterzukommen,
　　Grundlagen-Tutorial-Website, lerne die Grundlagen, um weiterzukommen.
　　</p>
</body>

　　Empfehlung:

<body>
<h1>Grundlagen-Tutorial-Website(oldtoolbag.com)>/h1>
<h2>HTML</h2>
<p>Grundlagen-Tutorial-Website, lerne die Grundlagen, um weiterzukommen.</p>
Grundlagen-Tutorial-Website, lerne die Grundlagen, um weiterzukommen.
Grundlagen-Tutorial-Website, lerne die Grundlagen, um weiterzukommen.
Grundlagen-Tutorial-Website, lerne die Grundlagen, um weiterzukommen.</p>
</body>

　　Tabellenbeispiel:

<table>
　　<tr>
　　　　<th>Name</th>
　　　　<th>Beschreibung</th>
　　　　</tr>
　　<tr>
　　　　<td>A</td>
　　　　<td>Beschreibung von A</td>
　　　　</tr>
　　<tr>
　　　　<td>B</td>
　　　　<td>Beschreibung von B</td>
　　</tr>
</table>

　　Liste Beispiel:

<ol>
　　<li>PHP</li>
　　<li>JAVA</li>
　　<li>C++</li>
</ol>

Kann der <html> und <body> weggelassen werden?

In Standard-HTML5 können die <html> und <body>-Tags weggelassen werden.

In folgendem HTML5 Das Dokument ist korrekt:

Beispiel:

!DOCTYPE html>
<head>
　 <title>Seitenüberschrift</title>
</head>
<h1>Ein Titel</h1>
<p>Ein Absatz.</p>

Es wird nicht empfohlen, die <html> und <body>-Tags wegzulassen.

Der <html>-Element ist der Wurzelelement des Dokuments und wird verwendet, um die Sprache der Seite zu beschreiben:

!DOCTYPE html>
<html lang="zh-CN">

Die Angabe der Sprache dient der Erleichterung für Screenreader und Suchmaschinen.

Das Weglassen von <html> oder <body> in DOM- und XML-Software führt zum Absturz.

Der <body> kann in alten Browsern (IE9) führt zu Fehlern.

Kann der <head>-Tag weggelassen werden?

In Standard-HTML5 der <head>-Tag kann weggelassen werden.

Standardmäßig fügen Browser den Inhalt vor dem <body> zu einem Standard-<head> hinzu, Elementen.

Beispiel

!DOCTYPE html>
<html>
<title>Seitenüberschrift</title>
<body>
　　<h1>Ein Titel</h1>
　　<p>Ein Absatz.</p>
</body>
</html>

　 Es wird nicht empfohlen, den <head>-Tag wegzulassen.

Metadaten

HTML5 Innerhalb des <title>-Elements ist ein Muss, der Titelname beschreibt das Thema der Seite:

<title>Grundlegende Anleitung Website</title>

Titel und Sprache ermöglichen es Suchmaschinen, schnell das Thema Ihrer Seite zu verstehen:

!DOCTYPE html>
<html lang="zh-cn">
<head>
　　<meta charset="UTF-8">
　　<title>Grundlegende Anleitung Website</title>
</head>

HTML-Kommentare

Kommentare können in <!-- und --geschrieben werden:

<!--　Dies ist ein Kommentar　-->

Lange Kommentare können in <!-- und --Zwischen Zeilen in:

<!--　
　　Dies ist ein langer Kommentar. Dies ist
　　Ein langer Kommentar. Dies ist ein langer Kommentar.
　　Dies ist
　　Ein langer Kommentar Dies ist ein langer Kommentar. Dies ist
　　Ein langer Kommentar.
-->

Der erste Zeichen einer langen Kommentarzeile ist um zwei Leerzeichen eingerückt, was das Lesen erleichtert.

Stylesheet

Die Stylesheet verwendet eine einfache Syntax (das Attribut "type" ist nicht erforderlich):

<link rel="stylesheet" href="styles.css">

Kurze Regeln können in einer Zeile geschrieben werden:

p.into {font-family: Verdana; font-size:　14px;}

Lange Regeln können in Zeilen geschrieben werden:

body {
　　background-color: yellow;
　　font-family: "Arial Black", Helvetica, sans-serif;
　　font-size:　14px;
　　color: red;
}

Platzieren Sie die schließende Klammer und den Selector auf derselben Zeile.
Ein Leerzeichen wird zwischen der schließenden Klammer und dem Selector hinzugefügt.
Verwenden Sie zwei Leerzeichen für die Einrückung.
Ein Leerzeichen wird zwischen dem Doppelpunkt und dem Attributwert hinzugefügt.
Nach Kommas und Symbolen wird ein Leerzeichen verwendet.
Jedes Attribut und jeder Wert müssen mit einem Semikolon enden.
Verwenden Sie Anführungszeichen nur, wenn der Attributwert Leerzeichen enthält.
Schließende Klammer auf einer neuen Zeile platzieren.
Maximal pro Zeile 80 Zeichen.

Es ist eine gängige Regel, nach Kommas und Doppelpunkten einen Leerzeichen hinzuzufügen.

JavaScript in HTML laden

Verwenden Sie eine einfache Syntax, um externe Skriptdateien zu laden (das type-Attribut ist nicht erforderlich):

<script src="myscript.js">

Verwenden Sie JavaScript, um HTML-Elemente zu erreichen

Eine schlechte HTML-Formatierung kann zu Fehlern in der JavaScript-Ausführung führen.

Die folgenden zwei JavaScript-Anweisungen geben unterschiedliche Ergebnisse aus:

Beispiel

var obj = getElementById("w3codebox")
var obj = getElementById("w3codebox")

Verwenden Sie im HTML JavaScript so gut wie möglich die gleichen Namensregeln.

Verwenden Sie Kleinbuchstaben für Dateinamen

Die meisten Webserver (CentOS, *Unix) ist auf Groß- und Kleinschreibung angewiesen: loading.jpg kann nicht über Loading.jpg erreicht werden.

Andere Webserver (Windows, IIS) sind nicht auf Groß- und Kleinschreibung angewiesen: loading.jpg kann über Loading.jpg oder loading.jpg erreicht werden.

Sie müssen eine einheitliche Stil beibehalten, wir empfehlen, Dateinamen in Kleinbuchstaben zu verwenden.

Dateiendungen

Die Dateiendung für HTML-Dateien kann .html sein (oder .htm).

Die Dateiendung für CSS-Dateien ist .css.

Die Dateiendung für JavaScript-Dateien ist .js.

Unterschied zwischen .htm und .html

Die Dateiendungen .htm und .html unterscheiden sich in der Regel nicht. Browser und Webserver behandeln sie beide als HTML-Dateien.

Der Unterschied liegt darin:

.htm wird in frühen DOS-Systemen angewendet, das System kann jetzt oder nur drei Zeichen haben.

In Unix-Systemen gibt es keine besonderen Beschränkungen für Suffixe, normalerweise wird .html verwendet.

Technische Unterschiede

Wenn eine URL keinen Dateinamen spezifiziert (z.B. https://de.oldtoolbag.com/html/, Der Server gibt den Standardnamen der Datei zurück. Der Standardname der Datei ist in der Regel index.html, index.htm, default.html und default.htm.

Wenn der Server nur "index.html" als Standarddatei konfiguriert hat, müssen Sie den Dateinamen "index.html" verwenden, nicht "index.htm".

Allerdings kann der Server in der Regel mehrere Standarddateien festlegen, und Sie können den Namen der Standarddatei nach Bedarf einstellen.

Unabhängig davon ist das vollständige Suffix von HTML ".html".

HTML5 Historik-API HTML5 WebSocket