Die neuen Funktionen von HTML5 sind: 1. Semantische Tags (Hrader, Fußzeile usw.), die den Inhalt der Seite strukturiert und sichtbar machen; 2. Erweiterte Formulare mit mehreren neuen Formulareingabetypen können bereitgestellt werden. Bessere Eingaben Steuerung und Validierung; 3. Video- und Audioelemente, Bereitstellung von Standardmethoden zum Abspielen von Video- und Audiodateien; 5. SVG-Zeichnung; 8. Web-Worker; Lagerung usw. Die Betriebsumgebung dieses Tutorials: Windows 7-System, HTML5-Version, Dell G3-Computer. Die zehn wichtigsten neuen Funktionen von HTML5 Ziehen und Ablegen von Elementen, Positionieren, einschließlich Zwischenspeicherung von Webanwendungen, Speicher, Netzwerkarbeitern usw Tag Beschreibung definiert den Kopfbereich des Dokuments <. ;/footer> definiert den Endbereich des Dokumentsdefiniert die Navigation des Dokuments definiert den Dokumentabschnitt (Abschnitt, Abschnitt) definiert den unabhängigen Inhaltsbereich der Seite definiert den Inhalt der Seitenleiste die Seite Dialogfelder definieren, z. B. Eingabeaufforderungsfelder (2) Erweitertes Formular HTML5 verfügt über mehrere neue Formulareingabe-Eingabetypen. Diese neuen Funktionen sorgen für eine bessere Eingabekontrolle und -validierung. Eingabetyp Beschreibung Farbe Wird hauptsächlich zur Auswahl einer Farbe verwendet Datum Wählen Sie ein Datum aus von einem Datumsauswahldatum datetime Wählen Sie ein Datum (UTC-Zeit) DateTime-Local Wählen Sie ein Datum und eine Uhrzeit (Stundenplan) E-Mail-Adresse Monat Wählen Sie einen Monat aus Zahl Eingabefeld für numerische Werte Bereich Eingabefeld für numerische Werte innerhalb eines bestimmten Bereichs Suche nach Suchfeld Tel Definieren Sie das Eingabefeld für die Telefonnummer. Zeit Wählen Sie eine Zeit aus. URL Eingabefeld für URL-Adresse Woche und Jahr auswählen HTML5 fügt außerdem die folgenden Formularelemente hinzu Formularelement Beschreibung elementspezifische Eingabe Liste der zu verwendenden Optionen für Domänen Das Listenattribut des < Das ;input>-Element ist an die ID des -Elements gebunden. Bietet eine zuverlässige Möglichkeit, den Benutzer zu authentifizieren das Generatorfeld. wird für verschiedene Arten der Ausgabe wie Berechnungen oder Skriptausgaben verwendet HTML5s neues Formularattribut placehoder-Attribut, eine kurze Eingabeaufforderung wird im Eingabefeld angezeigt, bevor der Benutzer den Wert eingibt. Das heißt, unsere übliche Standardaufforderung des Eingabefelds verschwindet, nachdem der Benutzer Eingaben gemacht hat. erforderliches Attribut ist ein boolesches Attribut. Das auszufüllende Eingabefeld darf nicht leer sein. Das Musterattribut beschreibt einen regulären Ausdruck, der zur Überprüfung des Werts des min- und max-Attribute legen den minimalen und maximalen Wert des Elements fest. Das Attribut „step“ gibt das zulässige Zahlenintervall für das Eingabefeld an. height- und width-Attribute, die für die Bildhöhe und -breite von -Tags verwendet werden. Autofokus-Attribut ist ein boolesches Attribut. Gibt an, dass das Feld automatisch den Fokus erhält, wenn die Seite geladen wird. Multiple-Attribut ist ein boolesches Attribut. Gibt an, dass innerhalb des -Elements mehrere Werte ausgewählt werden können. (3) Video und Audio HTML5 bietet einen Standard zum Abspielen von Audiodateien, d und Lautstärkeregler. Zwischen müssen Sie den Eingabeaufforderungstext des einfügen. Das -Element ermöglicht die Verwendung mehrerer -Elemente, und der Browser verwendet die erste unterstützte Audiodatei. Das Element unterstützt drei Audioformatdateien: MP3, WAV und Ogg. HTML5 gibt eine Standardmethode zum Einbinden von Videos über das Videoelement an. 您的浏览器不支持 audio 元素。 Nach dem Login kopierencontrol bietet Wiedergabe-, Pause- und Lautstärkeregler zur Steuerung des Videos. Sie können auch DOM-Operationen verwenden, um die Wiedergabe und Pause des Videos zu steuern, beispielsweise die Methoden play() und pause(). Gleichzeitig stellt das Videoelement auch Breiten- und Höhenattribute bereit, um die Größe des Videos zu steuern. Wenn Höhe und Breite festgelegt sind, wird beim Laden der Seite der erforderliche Videoplatz reserviert. Wenn diese Eigenschaften nicht festgelegt sind und der Browser die Größe des Videos nicht kennt, kann der Browser beim Laden keinen bestimmten Platz reservieren und die Seite ändert sich basierend auf der Größe des Originalvideos. Der zwischen den Tags und eingefügte Inhalt wird für die Anzeige in Browsern bereitgestellt, die das Videoelement nicht unterstützen. Das Videoelement unterstützt mehrere Quellelemente. Elemente können verschiedene Videodateien verknüpfen. Der Browser verwendet das erste erkannte Format (MP4, WebM und Ogg) (4) Leinwandzeichnung Tags sind lediglich Grafikcontainer und zum Zeichnen von Grafiken müssen Skripte verwendet werden. Canvas – Grafiken 1. Eine Leinwand ist ein rechteckiges Feld auf einer Webseite, das durch das Element gezeichnet wird. Standardmäßig haben Elemente keine Rahmen und keinen Inhalt. 您的浏览器不支持Video标签。 Nach dem Login kopieren Tags müssen normalerweise ein ID-Attribut angeben (oft in Skripten referenziert), Breiten- und Höhenattribute definieren die Größe der Leinwand und verwenden das Stilattribut, um einen Rahmen hinzuzufügen. Sie können mehrere -Elemente in einer HTML-Seite verwenden. 2 Verwenden Sie Javascript, um Bilder zu zeichnen. Alle Zeichenarbeiten müssen in JavaScript durchgeführt werdenNach 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. Das Festlegen der fillStyle-Eigenschaft kann eine CSS-Farbe, ein Farbverlauf oder ein Muster sein. Die Standardeinstellung für fillStyle ist #000000 (schwarz). Die Methode fillRect(x,y,width,height) definiert die aktuelle Füllmethode des Rechtecks. Bedeutung: Zeichnen Sie ein 150x75 großes Rechteck auf die Leinwand, beginnend in der oberen linken Ecke (0,0). Canvas – Pfad Um eine Linie auf Canvas zu zeichnen, verwenden wir die folgenden zwei Methoden: moveTo(x,y), um die Startkoordinaten der Linie zu definieren lineTo(x,y ), um das Ende der Linie zu definieren. Um Linien mit Koordinaten zu zeichnen müssen wir die Methode „ink“ verwenden, genau wie Stroke(). var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75); Nach dem Login kopieren 定义开始坐标(0,0), 和结束坐标 (200,100). 然后使用 stroke() 方法来绘制线条Canvas - 文本使用 canvas 绘制文本，重要的属性和方法如下： font - 定义字体 fillText(text,x,y) - 在 canvas 上绘制实心的文本 strokeText(text,x,y) - 在 canvas 上绘制空心的文本使用 fillText():var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="30px Arial"; ctx.fillText("Hello World",10,50);Nach dem Login kopieren 使用 "Arial" 字体在画布上绘制一个高 30px 的文字（实心）Canvas - 渐变渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。以下有两种不同的方式来设置Canvas渐变： createLinearGradient(x,y,x1,y1) - 创建线条渐变 createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变当我们使用渐变对象，必须使用两种或两种以上的停止颜色。addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.使用渐变，设置fillStyle或strokeStyle的值为渐变，然后绘制形状，如矩形，文本，或一条线。var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); // Create gradient var grd=ctx.createLinearGradient(0,0,200,0); grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); // Fill with gradient ctx.fillStyle=grd; ctx.fillRect(10,10,150,80);Nach dem Login kopieren 创建了一个线性渐变，使用渐变填充矩形Canvas - 图像 把一幅图像放置到画布上, 使用 drawImage(image,x,y) 方法var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var img=document.getElementById("scream"); ctx.drawImage(img,10,10);Nach dem Login kopieren 把一幅图像放置到了画布上(5)SVG绘图 SVG是指可伸缩的矢量图形SVG 与 Canvas两者间的区别 SVG 是一种使用 XML 描述 2D 图形的语言。 Canvas 通过 JavaScript 来绘制 2D 图形。 SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。 在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。 Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。(6)地理定位 HTML5 Geolocation（地理定位）用于定位用户的位置。window.navigator.geolocation { getCurrentPosition: fn 用于获取当前的位置数据 watchPosition: fn 监视用户位置的改变 clearWatch: fn 清除定位监视 } Nach dem Login kopieren 获取用户定位信息：navigator.geolocation.getCurrentPosition( function(pos){Nach dem Login kopieren console.log('用户定位数据获取成功') //console.log(arguments); console.log('定位时间：',pos.timestamp) console.log('经度：',pos.coords.longitude) console.log('纬度：',pos.coords.latitude) console.log('海拔：',pos.coords.altitude) console.log('速度：',pos.coords.speed)}, //定位成功的回调function(err){Nach dem Login kopieren console.log('用户定位数据获取失败') //console.log(arguments);} //定位失败的回调)Nach dem Login kopieren(7)拖放API 拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。 拖放的过程分为源对象和目标对象。源对象是指你即将拖动元素，而目标对象则是指拖动之后要放置的目标位置。拖放的源对象(可能发生移动的)可以触发的事件——3个：dragstart：拖动开始drag：拖动中dragend：拖动结束整个拖动过程的组成： dragstart*1 + drag*n + dragend*1拖放的目标对象(不会发生移动)可以触发的事件——4个：dragenter：拖动着进入dragover：拖动着悬停dragleave：拖动着离开drop：释放整个拖动过程的组成1： dragenter*1 + dragover*n + dragleave*1整个拖动过程的组成2： dragenter*1 + dragover*n + drop*1dataTransfer：用于数据传递的“拖拉机”对象； 在拖动源对象事件中使用e.dataTransfer属性保存数据：e.dataTransfer.setData( k, v ) 在拖动目标对象事件中使用e.dataTransfer属性读取数据：var value = e.dataTransfer.getData( k )(8)Web Worker 当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。 web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。 首先检测浏览器是否支持 Web Worker if(typeof(Worker)!=="undefined"){ // 是的! Web worker 支持! // 一些代码..... }else{ // //抱歉! Web Worker 不支持 }Nach dem Login kopieren 下面的代码检测是否存在 worker，如果不存在，- 它会创建一个新的 web worker 对象，然后运行 "demo_workers.js" 中的代码 if(typeof(w)=="undefined") { w=new Worker("demo_workers.js"); }Nach dem Login kopieren 然后我们就可以从 web worker 发送和接收消息了。向 web worker 添加一个 "onmessage" 事件监听器： w.onmessage=function(event){ document.getElementById("result").innerHTML=event.data; };Nach dem Login kopieren 当 web worker 传递消息时，会执行事件监听器中的代码。event.data 中存有来自 event.data 的数据。当我们创建 web worker 对象后，它会继续监听消息（即使在外部脚本完成之后）直到其被终止为止。如需终止 web worker，并释放浏览器/计算机资源，使用 terminate() 方法。完整的 Web Worker 实例代码 Count numbers: Start Worker Stop Worker var w;function startWorker() {if(typeof(Worker)!=="undefined") { if(typeof(w)=="undefined") { w=new Worker("demo_workers.js"); } w.onmessage = function (event) { document.getElementById("result").innerHTML=event.data; }; }else{ document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers..."; } }function stopWorker() { w.terminate(); } Nach dem Login kopieren 创建的计数脚本，该脚本存储于 "demo_workers.js" 文件中var i=0; function timedCount() { i=i+1; postMessage(i); setTimeout("timedCount()",500); } timedCount();Nach dem Login kopieren(9)Web Storage 使用HTML5可以在本地存储用户的浏览数据。早些时候,本地存储使用的是cookies。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能。数据以 键/值 对存在, web网页的数据只允许该网页访问使用。客户端存储数据的两个对象为：localStorage - 没有时间限制的数据存储sessionStorage - 针对一个 session 的数据存储, 当用户关闭浏览器窗口后，数据会被删除。 在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorageif(typeof(Storage)!=="undefined") { // 是的! 支持 localStorage sessionStorage 对象! // 一些代码..... } else { // 抱歉! 不支持 web 存储。 }Nach dem Login kopieren 不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：保存数据：localStorage.setItem(key,value);读取数据：localStorage.getItem(key);删除单个数据：localStorage.removeItem(key);删除所有数据：localStorage.clear();得到某个索引的key：localStorage.key(index);(10)WebSocket WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。 W3Cschool教程(w3cschool.cn) function WebSocketTest() { if ("WebSocket" in window) { alert("您的浏览器支持 WebSocket!"); // 打开一个 web socket var ws = new WebSocket("ws://localhost:9998/echo"); ws.onopen = function() { // Web Socket 已连接上，使用 send() 方法发送数据 ws.send("发送数据"); alert("数据发送中..."); }; ws.onmessage = function (evt) { var received_msg = evt.data; alert("数据已接收..."); }; ws.onclose = function() { // 关闭 websocket alert("连接已关闭..."); }; } else { // 浏览器不支持 WebSocket alert("您的浏览器不支持 WebSocket!"); } } 运行 WebSocket Nach dem Login kopieren更多编程相关知识，请访问：编程学习！！
Was sind die Produktionsmethoden der HTML5-Animationsproduktion?
Der Unterschied zwischen HTML und HTML5
Was bedeutet es, alle Cookies zu blockieren?
Was ist ^quxjg$c
Gründe, warum die Homepage nicht geändert werden kann
So implementieren Sie die CSS-Karussellfunktion
So lösen Sie das Problem, dass die IE-Verknüpfung nicht gelöscht werden kann
Verwendung von Booleschen Werten in Java
![Der Frontend-Kurs, der Sie am besten versteht: HTML5/CSS3/ES6/NPM/Vue/...[Original]](https://img.php.cn/upload/course/000/000/068/632ae26b9b376240.png)
![HTML5 + CSS-Übungsprojekt [Offizielle Website von Hand Knock Onmyoji]](https://img.php.cn/upload/course/000/000/068/639c32efbb754401.png)
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
