Wenn XHTML begonnen hat, HTML zu ersetzen, dann besteht der praktische Nutzen von HTML5 darin, dass es die beiden Syntaxen integriert und dieselbe effektive Methode verwendet, um die abstrakte DOM-Darstellung von HTML auszudrücken. Die HTML5-Spezifikation kombiniert HTML4, XHTML1 und DOM Level 2HTML und wird entsprechend aktualisiert.
HTML5 ersetzt XHTML 1 als XML-Serialisierungsformat der HTML-Spezifikation. Entwickler können HTML5-Dokumente entweder mit einer entspannten HTML-Syntax oder einer strengen XML-Syntax formatieren.
HTML5 enthält die folgenden neuen und aktualisierten Funktionen:
1. Ein neuer HTML-Dokumenttyp hinzugefügt:
2. Einige neue strukturelle Markup-Elemente hinzugefügt (
1. Leinwandelement malen
Erstellen Sie zunächst das Canvas-Element und geben Sie die ID, Breite und Höhe des Elements an:
<canvas id="myCanvas" width="200" height="100"></canvas>
然后通过javas来绘制。Canvas元素本身没有绘图能力，所有的绘制工作必须在javascript内部完成渐变。
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
JavaScript verwendet die ID, um Canvas-Elemente zu finden:
var c=document.getElementById("myCanvas");Dann erstellen Sie das Kontextobjekt:
var cxt=c.getContext("2d"); Das getContext("2d")-Objekt ist ein integriertes HTML5-Objekt mit mehreren Methoden zum Zeichnen von Pfaden, Rechtecken, Kreisen, Zeichen und zum Hinzufügen von Bildern.
Die folgenden zwei Codezeilen zeichnen ein rotes Rechteck:
cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75);
Die fillStyle-Methode färbt es rot und die fillRect-Methode gibt Form, Position und Größe an.
Die folgenden zwei Codezeilen zeichnen eine gerade Linie:
cxt.moveTo(100,100);
cxt.lineTo(200,200);
Die folgende Codezeile zeichnet einen Kreis:
cxt.arc(70,18,15,0,Math.PI*2,false);
Womit entsprechen diese Attributwerte? 70 und 18 sind die X-Achse bzw. die Y-Achse, 15 ist der Radius des Kreises, 0 ist der Winkel, Math.PI*2 ist Pi, falsch bedeutet im Uhrzeigersinn und wahr bedeutet Stundenzeiger gegen den Uhrzeigersinn.
Auch Farbverlaufseffekte können erzielt werden:
Es gibt auch einige andere Effekte:
Kurve quadraticCurreTo
Schriftart fillText
2. Audio-Audio und Video-Video
Video unterstützt auch mehrere Quellelemente zum Verknüpfen mit verschiedenen Videodateien.
Attributwert:
autoplay=“autoplay“ wird abgespielt, sobald es bereit ist
loop=“loop“ wird nach dem Abspielen von
preload="preload"
stummgeschaltet="stumm"
Volumen-=0,1 Volumenreduzierung
Volumen =0,1 Volumen plus
CurrentTime =10 Schneller Vorlauf 10 Sekunden
CurrentTime-=10 Gehe 10 Sekunden zurück
playbackRate=1 beschleunigt die Wiedergabe (Standard-Wiedergabegeschwindigkeit)
Der Attributwert von Audio ist der gleiche wie der von Video
3. Lagerung
HTML5 bietet zwei neue Möglichkeiten zum Speichern von Daten auf der Clientseite:
LocalStorage – Datenspeicherung ohne zeitliche Begrenzung
Es gibt keine zeitliche Begrenzung für die von der localStorage-Methode gespeicherten Daten. Die Daten sind auch nach dem nächsten Tag, der nächsten Woche oder dem nächsten Jahr noch verfügbar.
sessionStorage – Datenspeicherung für eine Sitzung
Die sessionStorage-Methode speichert Daten für eine Sitzung. Die Daten werden gelöscht, wenn der Nutzer das Browserfenster schließt.
4. Semantische Tags
5. Neuer Formulartyp
1. E-Mail
email 类型用于应该包含 e-mail 地址的输入域。在提交表单时，会自动验证 email 域的值。
E-mail: type="email" name="user_email" />
2、url
url 类型用于应该包含 URL 地址的输入域。在提交表单时，会自动验证 url 域的值。
Homepage: type="url" name="user_url" />
3、number
number 类型用于应该包含数值的输入域。还能够设定对所接受的数字的限定：
Points: type="number" name="points" min="1" max="10" />
4、range
range 类型用于应该包含一定范围内数字值的输入域。
range 类型显示为滑动条。还能够设定对所接受的数字的限定：
<input <code>type="range"</code> name="points" min="1" max="10" />
5、Date pickers (date, month, week, time, datetime, datetime-local)
HTML5 拥有多个可供选取日期和时间的新输入类型
Date: type="date" name="user_date" />
6、search
search 类型用于搜索域，比如站点搜索或 Google 搜索。search 域显示为常规的文本域。
7、color颜色的选择
localhost8080 kann nicht auf die Lösung zugreifen
So entfernen Sie die Firefox-Sicherheitssperre
Was bedeutet Titel?
Was bedeutet „Netzwerkzugriff verweigert' WLAN?
was Python kann
Wie zeichnet man ein Pert-Diagramm?
So übertragen Sie den Bildschirm vom Huawei-Mobiltelefon auf den Fernseher
Warum druckt der Drucker nicht?
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
