Latest web development tutorials

HTML (5) Code-Spezifikation

HTML-Code-Konventionen

Viele Web-Entwickler HTML-Code-Spezifikation schlecht verstanden.

In 2000-2010, zu viele Web-Entwickler von HTML zu XHTML zu konvertieren.

Entwickler verwenden XHTML nach und nach eine gute HTML Erstellung von Spezifikationen zu entwickeln.

Und in HTML5, sollten wir einen relativ guten Code Normen bilden, werden mehrere Empfehlungen unterhalb der Spezifikation zur Verfügung gestellt.

Verwenden Sie die richtige Art von Dokument

Die Dokumenttyp-Deklaration in der ersten Zeile des HTML-Dokuments:

<! DOCTYPE html>

Wenn Sie andere Etiketten verwenden möchten, wie Kleinbuchstaben, können Sie den folgenden Code verwenden:

<! DOCTYPE html>

Kleinelementnamen

HTML5 Elementname kann Groß- und Kleinbuchstaben verwenden.

Empfohlene Verwendung Kleinbuchstaben:

  • Mixed Fall Stil ist sehr schlecht.
  • Entwickler verwenden in der Regel Klein (ähnlich XHTML).
  • Klein Stil sieht mehr erfrischend.
  • Kleinbuchstaben einfach zu schreiben.

Nicht empfohlen:

<Section>
<P> Das ist ein Absatz. </ P>
</ Section>

Sehr schlecht:

<Section>
<P> Das ist ein Absatz. </ P>
</ Section>

Empfehlung:

<Section>
<P> Das ist ein Absatz. </ P>
</ Section>

Schalten Sie alle HTML-Elemente

In HTML5, wollen Sie nicht alle Elemente (zum Beispiel <p> Element) zu schließen, aber wir empfehlen, dass jedes Element einen Schluss-Tag hinzufügen.

Nicht empfohlen:

<Section>
<P> Das ist ein Absatz.
<P> Das ist ein Absatz.
</ Section>

Empfehlung:

<Section>
<P> Das ist ein Absatz. </ P>
<P> Das ist ein Absatz. </ P>
</ Section>

Schließen leere HTML-Elemente

In HTML5, leere HTML-Element muss nicht heruntergefahren:

Wir können schreiben:

<Meta charset = "UTF-8 ">

Sie können auch schreiben:

<Meta charset = "UTF-8 " />

XML, XHTML und Slash (/) ist ein Muss.

Wenn Sie erwarten, dass Ihre Software XML-Seite nutzen zu können, ist dieser Stil sehr gut.

Kleinattributnamen

HTML5 ermöglicht die Verwendung des Eigenschaftsnamen Groß- und Kleinbuchstaben.

Wir empfehlen die Verwendung von Kleinattributnamen:

  • Use Case ist eine sehr schlechte Gewohnheit.
  • Entwickler verwenden in der Regel Klein (ähnlich XHTML).
  • Klein Stil sieht mehr erfrischend.
  • Kleinbuchstaben einfach zu schreiben.

Nicht empfohlen:

<Div class = "Menü">

Empfehlung:

<Div class = "Menü">

Eigenschaft Wert

HTML5-Attribut-Werte können nicht zu zitieren.

Wir empfehlen, die Attributwert Anführungszeichen:

  • Wenn der Wert der Eigenschaft enthält müssen Räume Anführungszeichen zu verwenden.
  • Mischartaufträge wird nicht empfohlen, den vorgeschlagenen einheitlichen Stil.
  • Eigenschaftswerte Anführungszeichen sind leicht zu lesen.

Die folgenden Beispiele Attributwert Leerzeichen enthält, keine Anführungszeichen verwenden, kann es nicht funktionieren:

<Table class = Tabelle gestreift>

Im Folgenden verwendet doppelte Anführungszeichen, es ist richtig:

<Table class = "Tabelle gestreift" >

Bildeigenschaften

Bild alt - Attribute häufig verwendet. Wenn das Bild nicht angezeigt werden kann, kann er Bildanzeige ersetzen.

<Img src = "html5.gif" alt = "HTML5" style = "width: 128px; Höhe : 128px">

Definiert die Bildgröße kann zum Zeitpunkt der Belastung angegeben Raum reserviert werden, Flimmern zu reduzieren.

<Img src = "html5.gif" alt = "HTML5" style = "width: 128px; height: 128px">

Spaces und Gleichheitszeichen

Sie können Leerzeichen vor und nach dem Gleichheitszeichen.

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

Allerdings empfehlen wir die Verwendung weniger Platz:

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

Vermeiden Sie lange Codezeile

einem HTML-Editor, links und rechts Code Scrollen ist unbequem.

Jede Zeile des Codes, so viel wie möglich, weniger als 80 Zeichen.

Leerzeilen und Einrückungen

Verwenden Sie keine Leerzeile ohne Grund hinzuzufügen.

Für jeden Block Logikfunktion eine leere Zeile hinzufügen, die es leichter zu lesen macht.

Einrücken zwei Räume, nicht TAB empfohlen.

Verwenden Sie keine unnötige Leerzeilen zwischen kurzen Code eingerückt.

Unnötige Leerzeilen und Einrückungen:

<Body>

<H1> Dieses Tutorial </ h1>

<H2> HTML </ h2>

<P>
Dieses Tutorial, Lernen ist nicht nur Technik, sondern auch ein Traum.
Dieses Tutorial, Lernen ist nicht nur Technik, sondern auch ein Traum.
Dieses Tutorial, Lernen nicht nur Technologie, sondern auch träumen,
Dieses Tutorial, Lernen ist nicht nur Technik, sondern auch ein Traum.
</ P>

</ Body>

Empfehlung:

<Body>

<H1> Dieses Tutorial </ h1>

<H2> </ h2>
<P> Dieses Tutorial, das Lernen ist nicht nur Technik, sondern auch ein Traum.
Dieses Tutorial, Lernen ist nicht nur Technik, sondern auch ein Traum.
Dieses Tutorial, Lernen ist nicht nur Technik, sondern auch ein Traum.
Dieses Tutorial, Lernen ist nicht nur Technik, sondern auch ein Traum. </ P>

</ Body>

Formular Beispiel:

<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> London </ li>
<Li> Paris </ li>
<Li> Tokyo </ li>
</ Ol>

Lassen Sie die <html> und <body>?

Im HTML5-Standard, <html> und <body> -Tag kann entfallen.

Die folgenden Dokumente sind richtig HTML5:

Beispiel:

<! DOCTYPE html>
<Head>
<Titel> Seite Titel </ title>
</ Head>

<H1> Dies ist eine Überschrift </ h1>
<P> Das ist ein Absatz. </ P>

Versuchen »

Nicht empfohlen weggelassen <html> und <body> -Tag.

<Html> Element ist das Wurzelelement des Dokuments, die Sprache verwendet, um die Seite zu beschreiben:

<! DOCTYPE html>
<Html lang = "zh">

Sprache Aussage Bildschirm Leser und Suchmaschinen zu erleichtern.

Lassen Sie die <html> oder <body> in der DOM und XML-Software abstürzt.

Lassen Sie die <body> Fehler tritt bei älteren Browsern (IE9).

Lassen Sie die <head>?

Im HTML5-Standard, <head> -Tag kann entfallen.

Standardmäßig wird Inhalt der Browser <body> bevor sie zu einem Standard hinzugefügt <head> -Element.

Beispiele

<! DOCTYPE html>
<Html>
<Titel> Seite Titel </ title>

<Body>
<H1> Dies ist eine Überschrift </ h1>
<P> Das ist ein Absatz. </ P>
</ Body>

</ Html>

Versuchen »
Note Nun lassen Sie den Kopf-Tags sind nicht zu empfehlen.

Metadaten

HTML5 im <title> Element benötigt wird, beschreibt der Name des Titels, das Thema der Seite:

<Titel> Dieses Tutorial </ title>

Titel und Sprache, die die Suchmaschine das Thema Ihrer Seite verstehen wird bald erlaubt:

<! DOCTYPE html>
<Html lang = "zh">
<Head>
<Meta charset = "UTF-8 ">
<Titel> Dieses Tutorial </ title>
</ Head>

HTML-Kommentare

Kommentare können in die geschrieben werden <- und -> In:

<! - Dies ist ein Kommentar ->

Längere Kommentare in der <! - Und -> schrieb in den Filialen:

<! -
Dies ist ein längerer Kommentar. Dies ist ein längerer Kommentar. Dies ist ein längerer Kommentar.
Dies ist ein längerer Kommentar Dies ist ein längerer Kommentar. Dies ist ein längerer Kommentar.
->

Die Kommentare der ersten Zeichen Spiegelstrich zwei Räume, leichter zu lesen.

Stylesheet

Sheet terse Syntax (type-Attribut ist nicht erforderlich):

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

Regeln können als eine kurze Zeile geschrieben werden:

p.into {font-family: Verdana; font-size: 16em;}

Lange Multi-line-Regeln können geschrieben werden:

body {
background-color: hellgrau;
font-family: "Arial Black" , Helvetica, sans-serif;
font-size: 16em;
Farbe: schwarz;
}
  • Die Klammer auf der gleichen Linie mit den Wählern.
  • Wählen Sie zwischen der linken Klammer und ein Leerzeichen.
  • Ich benutze zwei Räume einrücken.
  • Hat Raum zwischen dem Doppelpunkt und den Eigenschaftswerten hinzugefügt.
  • Verwenden Sie ein Leerzeichen nach dem Komma und Symbolen.
  • Die Immobilienwerte haben das Ende jedes Symbol zu verwenden.
  • Nur wenn der Wert der Eigenschaft enthält verwenden Sie Leerzeichen, Anführungszeichen.
  • Rechte geschweifte Klammer auf einer neuen Zeile.
  • Bis zu 80 Zeichen pro Zeile.
Note Nach dem Komma und Semikolon Leerzeichen ist eine gemeinsame Regel.

Laden Sie JavaScript in HTML

Verwenden Sie einfache Syntax externes Skript-Datei zu laden (Attributtyp ist nicht erforderlich):

<Script src = "MyScript.js">

Verwenden Sie JavaScript, um HTML-Elemente zugreifen

Eine schlechte HTML-Format kann die Ausführung von JavaScript-Fehler verursachen.

Die folgenden zwei JavaScript-Anweisungen zur Ausgabe von unterschiedlichen Ergebnissen:

Beispiele

var obj = getElementById ( "Demo" )

var obj = getElementById ( "Demo" )

Versuchen »

HTML, JavaScript Probieren Sie das gleiche Namenskonvention zu verwenden.

Zugang JavaScript - Code Spezifikationen .

Kleindateinamen

Die meisten Webserver (Apache, Unix) Groß- und Kleinschreibung: London.jpg London.jpg nicht zugreifen können.

Andere Web-Server (Microsoft, IIS) wird nicht zwischen Groß- und Klein: London.jpg kann über London.jpg oder London.jpg zugegriffen werden.

Sie müssen einen einheitlichen Stil pflegen, empfehlen wir Dateinamen konsistente Verwendung Kleinbuchstaben.

Dateinamenerweiterung

HTML - Datei Suffix kann .html (oder r .htm) sein.

CSS - Datei - Erweiterung ist .css.

JavaScript - Datei Suffix Js.

Der Unterschied zwischen .htm und .html

Die Dateierweiterung .htm und .html auf der Natur gibt es keinen Unterschied. Browser und dem Web-Server wird sie als HTML-Dateien zu behandeln, zu beschäftigen.

Der Unterschied ist, dass:

HTM-Anwendung in frühen DOS-Systeme oder Systeme sind jetzt nur noch drei Zeichen.

Suffix ist nicht besonders beschränkt auf Unix-Systemen, in der Regel mit .html.

Technisch Unterschied

Wenn eine URL keinen Dateinamen (wie http://www.w3big.com/css/) angeben, wird vom Server auf den Standarddateinamen. Der Standarddateiname ist in der Regel index.html, index.htm, default.html und default.htm.

Wenn der Server mit nur "index.html" als Standard-Datei konfiguriert ist, müssen Sie die Datei "index.html" nennen, und nicht als "index.htm".

Im Allgemeinen jedoch kann der Server mehrere Standarddatei einrichten, können Sie die Standard-Datei, um sie nach Bedarf einstellen.

Wie auch immer, ist HTML voll Endung ".html".