Heim >Web-Frontend >HTML-Tutorial >Neue Funktionen in HTML5
Neue Funktionen in HTML5
- WBOYOriginal
- 2016-09-06 08:43:441182Durchsuche
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颜色的选择
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：CSS-EigenschaftensammlungNächster Artikel：CSS-Eigenschaftensammlung