简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

Heim  >  Artikel  >  Web-Frontend  >  Einfaches vorläufiges HTML5-Einführungs-Tutorial_HTML5-Tutorial-Fähigkeiten

Einfaches vorläufiges HTML5-Einführungs-Tutorial_HTML5-Tutorial-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 15:46:291239Durchsuche

HTML5 stellt die Zukunft dar; W3C (World Wide Web Consortium, World Wide Web Consortium) hat XHTML aufgegeben und HTML5 zu einem offiziellen und anerkannten Standard gemacht.

HTML5 ist die nächste Generation von HTML.
HTML5 wird zum neuen Standard für HTML, XHTML und HTML DOM, mit dem Ziel, die bestehenden Standards HTML4.01 und XHTML1.0 zu ersetzen. Ziel ist es, die Abhängigkeit von Rich Internet Applications (RIA) von Flash, Silverlight, JavaFX usw. zu verringern und mehr APIs bereitzustellen, die Netzwerkanwendungen effektiv verbessern können.
Die letzte Version von HTML wurde 1999 erstellt. Die Welt des Webs hat sich seitdem dramatisch verändert.
HTML5 ist noch in Arbeit. Allerdings verfügen die meisten modernen Browser bereits über eine gewisse HTML5-Unterstützung.
HTML5 ist das Ergebnis einer Zusammenarbeit zwischen dem W3C und der WHATWG.
WHATWG arbeitet an Webformularen und -anwendungen, während sich W3C auf XHTML 2.0 konzentriert. Im Jahr 2006 beschlossen die beiden Parteien, gemeinsam eine neue HTML-Version zu erstellen.
Einige Regeln für HTML5:
Neue Funktionen sollten auf HTML, CSS, DOM und JavaScript basieren.
Reduzieren Sie den Bedarf an externen Plug-Ins (wie Flash)
Bessere Fehlerbehandlung
Mehr Markup zum Ersetzen von Skripten
HTML5 sollte geräteunabhängig sein
Der Entwicklungsprozess sollte für die Öffentlichkeit transparent sein

Das einfachste HTML5-Dokument

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. >
  2. <Titel>Ein kleines HTML-DokumentTitel>
  3. <p>Lass uns den Browser rocken, im HTML5-Stil.< ;/p> 

Ein supereinfaches HTML5-Dokument, das nur eine Textzeile enthält. Im Browser sieht es so aus:


Die üblichere Struktur verwendet , um die Informationen der Seite vom eigentlichen Inhalt der Seite zu trennen, und verwendet gesamtes Dokument, das aktuelle Dokument sieht so aus:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. >
  2. <html>
  3. <Kopf>
  4. <Titel>Ein kleines HTML-DokumentTitel>
  5. Kopf>
  6. <Körper>
  7. <p>Lass uns den Browser rocken, im HTML5-Stil.< ;/p> 
  8. Körper>
  9. html>

, HTML5 erfordert diese Elemente nicht, aber dieser Schreibstil ist besser.

HTML5-Dokumenttyp

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. >


Die erste Zeile muss eine spezifische Dokumenttypdeklaration sein, die verwendet wird, um anzugeben, welchem ​​Standard das nachfolgende Dokument-Markup folgt. Die Dokumenttypdeklaration von HTML5 ist äußerst einfach.

Zeichenkodierung

Die meisten Websites verwenden mittlerweile die UTF-8-Kodierung, die prägnant und schnell zu konvertieren ist und alle gewünschten nicht-englischen Zeichen unterstützt.

Es ist sehr einfach, Zeichenkodierungsinformationen in HTML5 hinzuzufügen:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <Kopf>
  2. <meta charset="utf- 8"> 
  3. <Titel>Ein kleines HTML-DokumentTitel>
  4. Kopf>


Das Dreamweaver-Designtool fügt diese Metainformationen automatisch hinzu, wenn eine neue Webseite erstellt wird, und speichert die Datei außerdem in UTF-Kodierung. Wenn Sie den einfachsten Texteditor verwenden, denken Sie daran, beim Speichern die richtige Kodierung (UTF-8) auszuwählen.

Seitensprache

Es ist eine gute Praxis, die auf Webseiten verwendete natürliche Sprache anzugeben. Um eine Sprache für den Inhalt anzugeben, verwenden Sie das lang-Attribut für ein beliebiges Element.

Um der gesamten Seite eine Sprachbeschreibung hinzuzufügen, müssen Sie das lang-Attribut für das -Element angeben, wie im folgenden Code gezeigt:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <html lang="zh-CN"> 


Dieses Informationsdetail ist auch für Screenreader nützlich, wenn die Seite Text in mehreren Sprachen enthält.

Stylesheet hinzufügen

Solange es sich um eine professionell gestaltete Website handelt, werden auf jeden Fall Stylesheets verwendet. Wenn Sie das zu verwendende CSS-Stylesheet angeben, müssen Sie das -Element wie folgt in hinzufügen:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <Kopf>
  2. <meta charset="utf- 8"> 
  3. <Titel>Ein kleines HTML-DokumentTitel>
  4. <link rel="stylesheet" href="TinyHTML5.css">
  5. Kopf>


JavaScript hinzufügen

Das Hinzufügen von JavaScript in HTML5 ähnelt dem Hinzufügen zu einer herkömmlichen Seite, zum Beispiel:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <Kopf>
  2. <meta charset="utf- 8"> 
  3. <Titel>Ein kleines HTML-DokumentTitel>
  4. <link rel="stylesheet" href="TinyHTML5.css">
  5. <script src="TinyHTML5. js">script>
  6. Kopf>


Das Attribut language="JavaScript" muss nicht hinzugefügt werden. Der Browser geht davon aus, dass Sie JavaScript verwenden möchten.

Besonderer Hinweis:

Wenn Sie viel Zeit damit verbringen möchten, Seiten zu testen, die JavaScript im IE enthalten, sollten Sie auch einen speziellen Kommentar namens Web Mark hinzufügen (gespeichert von url=). Diese Kommentarzeile sollte nach dem angegebenen Zeichenkodierungselement platziert werden , wie folgt:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <Kopf>
  2. <meta charset="utf- 8"> 
  4. <Titel>Ein kleines HTML-DokumentTitel>


Dieser Kommentar weist den IE an, die Seite als von der Remote-Website heruntergeladen zu behandeln. Andernfalls wechselt der IE in einen speziellen Sperrmodus und zeigt eine Sicherheitswarnung an, nachdem Sie auf „Blockierte Inhalte zulassen“ geklickt haben. Der JavaScript-Code wird dies nicht tun ausgeführt werden, bis die Taste gedrückt wird.

(0014) bezieht sich auf die Länge der about:internet-Zeichenfolge.

Endergebnis

Ein vollständiger und schöner HTML5-Code sieht schließlich so aus:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. >
  2. <html lang="zh- CN"> 
  3. <Kopf>
  4. <meta charset="utf- 8"> 
  6. <Titel>Ein kleines HTML-DokumentTitel>
  7. <link rel="stylesheet" href="TinyHTML5.css">
  8. <script src="TinyHTML5. js">script>
  9. Kopf>
  11. <Körper>
  12. <p>Lass uns den Browser rocken, im HTML5-Stil.< ;/p> 
  13. Körper>
  14. html>
Stellungnahme：
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
Vorheriger Artikel：Eingehende Analyse der Verwendung von Blob-Objekten in HTML5_html5-Tutorial-FähigkeitenNächster Artikel：Eingehende Analyse der Verwendung von Blob-Objekten in HTML5_html5-Tutorial-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen