suchen

Heim  >  Artikel  >  Web-Frontend  >  Kurzfassung der HTML5-Studiennotizen (1): Einführung und Syntax von HTML5

Kurzfassung der HTML5-Studiennotizen (1): Einführung und Syntax von HTML5

黄舟
黄舟Original
2017-01-21 16:28:421389Durchsuche

Einführung in HTML5

HTML5 ist die nächste Generation der HTML-Standardspezifikation nach HTML4. Sie bietet einige neue Elemente und Attribute (z. B. c787b9a589a3ece771e842a6176cf8e9 Website-Navigationsblock und c37f8231a37e88427e62669260f0074d). Die neuen Tags sind für Suchmaschinen und die semantische Analyse von Vorteil und helfen Menschen mit kleinem Bildschirm, sie besser zu nutzen. Darüber hinaus werden einige neue Funktionen bereitgestellt, z. B. e26e9bceaa3cecafde05584c3fef9fba ; hat zusammenfassend die folgenden Hauptfunktionen:

Entfernen Sie einige veraltete Elemente und Attribut-Tags in HTML4

Einschließlich Tags für reine Anzeigeeffekte, wie 240cb830ca84ebaabbd07850110b414d , sie wurden durch CSS ersetzt. HTML5 hat einige Vorschläge von XHTML2 übernommen, darunter einige Funktionen zur Verbesserung der Dokumentstruktur. Beispielsweise wird die Verwendung neuer HTML-Tags „Kopfzeile“, „Fußzeile“, „Dialog“, „Seite“, „Abbildung“ usw. es den Erstellern von Inhalten ermöglichen, Dokumente semantischer zu erstellen Verwenden Sie im Allgemeinen Divs, wenn Sie diese Funktionen implementieren.

Trennung von Inhalt und Anzeige

Die b- und i-Tags bleiben weiterhin erhalten, aber ihre Bedeutung ist eine andere als zuvor. Die Bedeutung dieser Tags besteht nur darin, einen Text zu identifizieren, nicht darin Identifizieren Sie sie. Legen Sie den Stil fett oder kursiv fest. Die Tags „u“, „font“, „center“ und „strike“ wurden vollständig entfernt.

Einige neue Formulareingabeobjekte hinzugefügt

Einschließlich Datum, URL, E-Mail-Adresse und andere Objekte haben Unterstützung für nicht-lateinische Zeichen hinzugefügt. HTML5 führt außerdem Mikrodaten ein, eine Methode zum Kommentieren von Inhalten mit maschinenlesbaren Tags, was die Verarbeitung des Semantic Web erleichtert. Insgesamt ermöglichen diese strukturbezogenen Verbesserungen den Erstellern von Inhalten, übersichtlichere, besser verwaltbare Webseiten zu erstellen, die für Suchmaschinen, Bildschirmlesesoftware usw. benutzerfreundlicher sind.

Neue, sinnvollere Tags

Multimedia-Objekte werden nicht mehr alle in Objekt- oder Einbettungs-Tags gebunden sein, aber Videos haben Video-Tags und Audio hat Audio-Tags.

Lokaler Speicher

Diese Funktion bettet eine lokale SQL-Datenbank ein, um interaktive Such-, Caching- und Indizierungsfunktionen zu beschleunigen. Gleichzeitig werden auch diese Offline-Webprogramme stark davon profitieren. Umfangreiche Animationen, für die keine Plugins erforderlich sind. Das

Canvas-Objekt

gibt dem Browser die Möglichkeit, Vektorgrafiken direkt darauf zu zeichnen, was bedeutet, dass Benutzer Grafiken oder Animationen ohne Flash und Silverlight direkt im Browser anzeigen können.

Neue API-Erweiterungen

Für die Schnittstellen HTMLDocument und HTMLElement werden neue API-Erweiterungen bereitgestellt.

HTML5 ersetzt Flash und Silverlight

Syntax

1 Dokumentmedientyp

Der größte Teil der von HTML5 definierten HTML-Syntax ist mit HTML4 und XHTML1 kompatibel, aber einige sind nicht kompatibel. Die meisten HTML-Dokumente werden als Text/HTML-Medientyp gespeichert.

HTML5 definiert detaillierte Parsing-Regeln (einschließlich Fehlerbehandlung) für die HTML-Syntax, und Benutzer müssen diese Regeln befolgen, um sie als Text/HTML-Medientyp zu speichern. Das Folgende ist ein Beispiel, das der HTML-Syntaxspezifikation entspricht: 

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Example document</title>
  </head>
  <body>
    <p>Example paragraph</p>
  </body>
</html>

HTML5 definiert außerdem einen text/html-sandboxed Medientyp für die HTML-Syntax, damit nicht vertrauenswürdige Inhalte gehostet werden können.

Eine andere Syntax, die in HTML5 verwendet werden kann, ist XML, das mit XHTML1 kompatibel ist. Wenn Sie XML-Syntax verwenden, müssen Sie das Dokument als XML-Medientyp speichern und den Namespace gemäß der XML-Spezifikation auf http://www.w3.org/1999/xhtml festlegen.

Das folgende Beispieldokument entspricht der XML-Syntaxspezifikation in HTML5. Es ist zu beachten, dass das XML-Dokument als XML-Medientyp gespeichert werden muss, z. B. application/xhtml+xml oder application/xml. 

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Example document</title>
  </head>
  <body>
    <p>Example paragraph</p>
  </body>
</html>

2-Zeichen-Kodierung

HTML5的HTML语法里，有三种形式可以声明字符串的encoding类型：

在传输级别（transport level）上，在HTTP实例的header里设置Content-Type。

在文件的开头设置一个Unicode的Byte Order Mark(BOM)，该字符为文件的encoding方式提供了一个签名。

在文档的前1024个byte之前的内容里，使用带有charset属性的meta元素来声明encoding方式。例如：0d94b2dad07259293dd606022eaa23d8表明该文档是UTF-8格式的。它是替换原有的8d29369bdb665a142cf8029391b2aae6语法声明，尽管原有的语法依然可用，但在HTML5里不推荐使用。

对于HTML5里的XML语法，依然和以前的XML语法声明式一样的。

3 DOCTYPE

HTML5的HTML语法要求文档必须声明DOCTYPE以确保浏览器可以在标准模式下展示页面。这个DOCTYPE没有其它的目的，并且在XML里是可选项，因为XML媒体格式的文档一直就是在标准模式下处理的。

DOCTYPE的声明方式是8b05045a5be5764f313ed5b9168a17e6，不区分大小写。HTML的早期版本声明的DOCTYPE需要很长是因为HTML语言是建立在SGML的基础上，所以需要关联引用一个相对应的DTD。HTML5和之前的版本不一样了，仅仅需要声明DOCTYPE就可以告诉文档启用的是HTML5语法标准了，浏览器会为8b05045a5be5764f313ed5b9168a17e6做剩余的工作的。

4 MathML和SVG

HTML5的HTML语法允许在文档里使用MathML（数学标记语言）和SVG（可伸缩矢量图）元素。例如，一个非常简单的HTML页面包含一个svg元素画出的圆：

<!doctype html>
<title>SVG in text/html</title>
<p>
 A green circle:
 <svg> <circle r="50" cx="50" cy="50" fill="green"/> </svg>
</p>

更多复杂的组合标记也是支持的，比如使用svg的foreignObject元素你可以嵌套MathML, HTML，或者自身嵌套。

5 其它

HTML5已经原生支持IRI了，尽管这些IRI只能在UTF-8和UTF-16的文档里使用。

lang属性如果设置的不合法，将会更新为空字符串，以告诉浏览器是一个未知的语言，作用和XML里的xml:lang一样。

以上就是HTML5学习笔记简明版（1）：HTML5介绍与语法 的内容，更多相关内容请关注PHP中文网（www.php.cn）！


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：Interaktives 3D-Tag-Cloud-jQuery-Plug-in basierend auf HTML5 SVGNächster Artikel：Interaktives 3D-Tag-Cloud-jQuery-Plug-in basierend auf HTML5 SVG

In Verbindung stehende Artikel

Mehr sehen