Neue Funktionen in HTML5
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>
Nach dem Login kopieren
然后通过javas来绘制。Canvas元素本身没有绘图能力，所有的绘制工作必须在javascript内部完成渐变。
Nach dem Login kopieren
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
Nach dem Login kopieren
JavaScript verwendet die ID, um Canvas-Elemente zu finden:
var c=document.getElementById("myCanvas");Nach dem Login kopieren
Dann erstellen Sie das Kontextobjekt:
var cxt=c.getContext("2d"); Nach dem Login kopieren
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);
Nach dem Login kopieren
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" />
Nach dem Login kopieren
5、Date pickers (date, month, week, time, datetime, datetime-local)
HTML5 拥有多个可供选取日期和时间的新输入类型
Date: type="date" name="user_date" />
6、search
search 类型用于搜索域，比如站点搜索或 Google 搜索。search 域显示为常规的文本域。
7、color颜色的选择
Erklärung dieser Website
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
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Assassin's Creed Shadows: Seashell Riddle -Lösung
3 Wochen vor
By DDD
Was ist neu in Windows 11 KB5054979 und wie Sie Update -Probleme beheben
2 Wochen vor
By DDD
Wo kann man die Kransteuerungsschlüsselkarten in Atomfall finden
3 Wochen vor
By DDD
Ersparnis in R.E.P.O. Erklärt (und speichern Dateien)
1 Monate vor
By 尊渡假赌尊渡假赌尊渡假赌
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
CakePHP-Tutorial
1386
52
1386
52
Was ist der Zweck des & lt; Fortschritts & gt; Element?
Mar 21, 2025 pm 12:34 PM
Der Artikel erörtert den HTML & lt; Progress & gt; Element, Absicht, Styling und Unterschiede vom & lt; Meter & gt; Element. Das Hauptaugenmerk liegt auf der Verwendung & lt; Fortschritt & gt; Für Aufgabenabschluss und & lt; Meter & gt; für stati
Ist HTML für Anfänger leicht zu lernen?
Apr 07, 2025 am 12:11 AM
HTML ist für Anfänger geeignet, da es einfach und leicht zu lernen ist und schnell Ergebnisse sehen kann. 1) Die Lernkurve von HTML ist glatt und leicht zu beginnen. 2) Beherrschen Sie einfach die grundlegenden Tags, um Webseiten zu erstellen. 3) hohe Flexibilität und kann in Kombination mit CSS und JavaScript verwendet werden. 4) Reiche Lernressourcen und moderne Tools unterstützen den Lernprozess.
Was ist der Zweck des & lt; datalist & gt; Element?
Mar 21, 2025 pm 12:33 PM
Der Artikel erörtert den HTML & lt; Datalist & gt; Element, das die Formulare verbessert, indem automatische Vorschläge bereitgestellt, die Benutzererfahrung verbessert und Fehler reduziert werden.Character Count: 159
Was ist der Zweck des & lt; Meter & gt; Element?
Mar 21, 2025 pm 12:35 PM
Der Artikel erörtert das HTML & lt; Meter & gt; Element, verwendet zur Anzeige von Skalar- oder Bruchwerten innerhalb eines Bereichs und seine gemeinsamen Anwendungen in der Webentwicklung. Es differenziert & lt; Meter & gt; von & lt; Fortschritt & gt; und Ex
Was ist der Zweck des & lt; iframe & gt; Etikett? Was sind die Sicherheitsüberlegungen bei der Verwendung?
Mar 20, 2025 pm 06:05 PM
Der Artikel erörtert das & lt; iframe & gt; Der Zweck von Tag, externe Inhalte in Webseiten, seine gemeinsamen Verwendungen, Sicherheitsrisiken und Alternativen wie Objekt -Tags und APIs einzubetten.
Was ist das Ansichtsfenster -Meta -Tag? Warum ist es wichtig für reaktionsschnelles Design?
Mar 20, 2025 pm 05:56 PM
In dem Artikel wird das Ansichtsfenster -Meta -Tag erörtert, das für das reaktionsschnelle Webdesign auf mobilen Geräten unerlässlich ist. Es wird erläutert, wie die ordnungsgemäße Verwendung eine optimale Skalierung von Inhalten und Benutzerinteraktion gewährleistet, während Missbrauch zu Design- und Zugänglichkeitsproblemen führen kann.
Die Rollen von HTML, CSS und JavaScript: Kernverantwortung
Apr 08, 2025 pm 07:05 PM
HTML definiert die Webstruktur, CSS ist für Stil und Layout verantwortlich, und JavaScript ergibt eine dynamische Interaktion. Die drei erfüllen ihre Aufgaben in der Webentwicklung und erstellen gemeinsam eine farbenfrohe Website.
Was ist ein Beispiel für ein Start -Tag in HTML?
Apr 06, 2025 am 12:04 AM
AnexampleofaTartingTaginHtmlis, die, die starttagsaresesinginhtmlastheyinitiateElements, definetheirtypes, andarecrucialForstructuringwebpages und -konstruktionsthedoms.
