Was kann uns HTML5 bringen? Ein Muss für Interviews!-H5-Tutorial-php.cn

Apropos HTML5: Oberflächlich betrachtet bedeutet es, dass es sich um die fünfte aktualisierte Version von HTML handelt, aber tatsächlich hat HTML5 viele inhärente Eigenschaften. Gerade durch das Aufkommen von HTML5 ist die Entwicklung von Webanwendungen komfortabler, schneller, standardisierter geworden und die Leistung von Webanwendungen wurde verbessert. Man kann sagen, dass HTML5 mittlerweile von Webanwendungen weitgehend akzeptiert wird.
Lassen Sie uns zunächst einen Blick darauf werfen, welche neuen Funktionen uns HTML5 bietet.

1. Lokaler Cache

Lokaler SpeicherWeb storage wird verwendet, um nützliche Informationen auf der Website auf einem lokalen Computer oder Mobilgerät zu speichern und die Informationen dann je nach tatsächlichem Bedarf lokal zu lesen. Es bietet zwei API-Schnittstellen vom Speichertyp, nämlich sessionStorage und localhostStorage. Ersteres ist während der Sitzung gültig, letzteres wird lokal gespeichert und der Speicher ist dauerhaft, aber die API-Nutzung der beiden ist grundsätzlich gleich. von.
Mit der lokalen Speicherfunktion von HTML5 können wir Benutzerinformationen speichern (ähnlich wie Cookies in HTML4), Daten speichern und lesen und viele andere Funktionen nutzen. Beachten Sie, dass Web Storage offiziell empfiehlt, dass die lokale Cache-Größe jeder Website 5 MB beträgt, was viel größer und leistungsfähiger ist als die mehreren KB von cookie in HTML4.
Als nächstes erklären wir anhand des Codes konkret, wie Web Storage verwendet wird. Am Beispiel von localStorage lautet der js-Code wie folgt:

window.onload = function(){localStorage.clear();//清除之前localStorage存储的全部数据localStorage.setItem(“userData”,”storage demo”）//setItem方法可以设定缓存数据的值，采用键值对的形式}

Nach dem Login kopieren

Zusätzlich zu den Grundoperationen kann auch Speicherereignisse überwachen:

window.onload = function(){window.addEventListener(“storage”,function(e){console.log(e);
},true);
}

Nach dem Login kopieren

2. Offline-Caching

Offline-Caching kann die Webanwendung auch dann normal ausführen, wenn kein Netzwerk vorhanden ist, was sehr praktisch ist. Die Offline-Caching-Funktion von HTML5 schafft gute Voraussetzungen für die Entwicklung von Webanwendungen (insbesondere mobilen Anwendungen).

Der Einstieg in die Offline-Cache-Funktion ist einfach. Fügen Sie einfach das Attribut html zum Tag mainfest hinzu und geben Sie die Datei mainfest an. Die Funktion der Mainfest-Datei besteht darin, dem Browser mitzuteilen, welche Dateien offline zwischengespeichert werden müssen. Beispiele für die Anwendung von .mainfest-Dateien:

CACHE MAINFEST
index.html
test.js
NETWORK
/images/

Nach dem Login kopieren

Diese Inhalte zeigen, dass die beiden Dateien index.html und test.js als Cache-Dateien definiert sind, gefolgt von CACHE MAINFEST. Wenn das Netzwerk nicht verfügbar oder offline ist, wird dieser Teil der Datei direkt aus dem lokalen Cache gelesen. Dateien, die auf NETWORK folgen, sind als Dateien definiert, die aus dem Netzwerk heruntergeladen werden müssen, unabhängig davon, ob sie zwischengespeichert wurden.
Darüber hinaus müssen notwendige Konfigurationen an der .mainfest-Datei vorgenommen werden

<mime-mapping>//.mainfest文件是MIME类型文件<extension>mainfest</extension><mime-type>text/cache-mainfest<mime-type></mime-mapping>

Nach dem Login kopieren

Mit der HTML5-Offline-Caching-Technologie können Websites oder im Web entwickelte Anwendungen auch ohne darauf zugegriffen werden ein Netzwerk, das den Netzwerkverbrauch erheblich reduziert und die Leistung von über das Web entwickelten Apps erheblich verbessert.

3. Neue Tags

① Layout-Semantik-Tags
HTML5 hat viele neue semantische Layout-Tags hinzugefügt, um die vorherigen Layout-Tags zu ersetzen. Zu den neuen Tags, die HTML5 bereitstellt, gehören <head>, <footer>, <aside>, <article> usw. Grundsätzlich verfügt jeder Layoutteil einer Seite über einen entsprechenden Tag.
Die Hauptfunktionen der semantischen HTML5-Tags spiegeln sich hauptsächlich in den folgenden drei Aspekten wider:
◎Benutzerfreundlicher für mobile Geräte
◎Die Verwendung semantischer Layout-Tags erleichtert das Crawlen durch Suchmaschinen
◎Semantische Tags sind einfach und bequem für Softwarewartung und sekundäre Entwicklung
Die Verwendung semantischer Tags entspricht eher den aktuellen Webstandards.

②Andere Tags
HTML5 hat viele neue Funktionen hinzugefügt, von denen einige entsprechende Tags haben.
Multimedia-Tags. Beispielsweise kann das Tag die Videowiedergabefunktion unterstützen. Mithilfe des HTML5-Video-Tags und einiger Web-Video-Player-Produktions-Plug-Ins kann ein sehr effektiver Web-Player erstellt werden. Hier wird Video.js empfohlen, es ist schöner, hat eine bessere Leistung und ist mit geringeren Lernkosten verbunden.
Canvas wird später ausführlich vorgestellt.
Neue Tags im Zusammenhang mit Formularen werden später ausführlich vorgestellt.

4. Geolokalisierung

Derzeit ist Geolokalisierung grundsätzlich eine Funktion, die von jeder mobilen App unterstützt wird. HTML5 hat auch damit begonnen, Geolokalisierungsfunktionen zu unterstützen, was eine große Hilfe bei der Entwicklung mobiler Apps mit HTML5 darstellt.
Geolocation ist sehr einfach zu verwenden. Es gibt drei Hauptmethoden:
getCurrentPosition(): Abrufen der geografischen Standortinformationen des aktuellen Benutzers
watchPosition(): Abfragen des Standorts des Geräts
clearWatch(): Verwenden Sie diese Option, um die Abfrage von watchPosition() zu stoppen
Derzeit unterstützen die meisten Browser die Geolocation-API.

6. Erweiterte Formulare

Formulare waren schon immer ein unverzichtbarer Bestandteil des Webs. HTML5 bietet einen sehr umfangreichen Satz an Formular-Tags und -Attributen. Lassen Sie uns zunächst etwas über einige neue Tags erfahren, die HTML5 für Formularsteuerelemente hinzugefügt hat.
<meter>/<progress>: wird zum Festlegen des Fortschrittsbalkens verwendet. Mit js können Sie ganz einfach einen dynamischen Fortschrittsbalken erstellen.
<details>+<summary>:Sie können Faltinhalte ohne js erstellen, die Struktur ist wie folgt:

<details><summary>This is the summary</summary>This contains detail things.<details>

Nach dem Login kopieren

除了新的标签，input标签还增加了许多类型(type)，包括search/email/number/type/range/url等。
表单标签的新增属性有placeholder/autofocus/list/autocomplete等。
HTML5极大地丰富了表单内容，让编写代码变得更加简单，实现功能更加快捷。

7、强大的canvas

个人认为canvas是HTML5中最强大的功能，有了canvas，HTML5在图像这方面变得无所不能（有关canvas的具体实例请见其他博客）。

canvas可以进行切图、画图、图像的像素级操作等一系列功能，十分强大。说起canvas，应用最多的应该是基于HTML5的游戏。利用HTML5的canvas功能，配合js，可以开发出各种各样的游戏。同时，像素级的操作也让HTML5 canvas可以处理许多细致的图像问题。
创建一个canvas画布很容易，在html中使用<canvas>标签，js代码如下：

var canvas = document.getElementById(canvas1);var context = canvas.getContext(“2d”);

Nach dem Login kopieren

canvas可以创建丰富的图形，包括基本图形、函数曲线等。

综上，HTML5提供的新功能，使HTML5在移动应用开发、游戏开发、规范开发等方面，都有了质的飞跃。深入学习HTML5,十分必要。

说起HTML5，表面上是说它是HTML更新的第五个版本，而实际上，HTML5有很多内在的东西。正是因为HTML5的出现，使得web应用的开发变得更加方便快捷，更加标准化，提高了web应用的性能。可以说HTML5是web应用现在能够被广泛接受。
首先我们来看一下HTML5给我们带来了哪些新功能。

1、本地缓存

本地存储Web storage的作用是在网站中把有用的信息存储到本地的计算机或移动设备上，然后根据实际需要从本地读取信息。它提供两种存储类型API接口，分别是sessionStorage和localhostStorage，其中前者在会话期间内有效，后者就存储在本地，并且存储是永久的，但是两个的API使用基本上是相同的。
利用HTML5的本地存储功能，我们可以进行用户信息的保存（类似于HTML4中的cookie）、数据存储与读取等诸多功能。注意Web Storage官方建议每个网站的本地缓存大小为5MB，这相比于HTML4中cookie的几kb要大得多，功能也更强大。
接下来利用代码来具体解释一下Web Storage的使用方式，以localStorage为例，js代码如下：

window.onload = function(){localStorage.clear();//清除之前localStorage存储的全部数据localStorage.setItem(“userData”,”storage demo”）//setItem方法可以设定缓存数据的值，采用键值对的形式}

Nach dem Login kopieren

除了基本操作，还可以对Storage事件进行监听：

window.onload = function(){window.addEventListener(“storage”,function(e){console.log(e);
},true);
}

Nach dem Login kopieren

2、离线缓存

离线缓存可以在即使没有网络的状态下web应用仍能正常运行，非常有实用价值。HTML5的离线缓存功能为web应用（尤其是移动应用）的开发建立了良好的条件。

开始使用离线缓存功能很简单，只要在html标签中加入mainfest属性，并指定mainfest文件即可。mainfest文件的作用是告诉浏览器哪些文件需要进行离线缓存操作。举例说明.mainfest文件的应用：

CACHE MAINFEST
index.html
test.js
NETWORK
/images/

Nach dem Login kopieren

这些内容就表明，index.html和test.js这两个文件被定义为缓存文件，跟在CACHE MAINFEST后面。当网络不可用或不在线时，此部分文件会通过本地缓存直接读取。NETWORK后面的文件定义为无论这些文件是否已经被缓存，都必须从网络中下载。
除此之外，还要对.mainfest文件进行必要的配置，在web.xml中

<mime-mapping>//.mainfest文件是MIME类型文件<extension>mainfest</extension><mime-type>text/cache-mainfest<mime-type></mime-mapping>

Nach dem Login kopieren

有了HTML5离线缓存技术，就可以使网站或者web开发的应用在无网络的情况下也可以进行访问，大大减少了网络消耗，也让利用web开发出来的app性能大幅提升了。

3、新型标签

①布局语义化标签
HTML5新增了许多语义化的布局标签，用以代替之前每个布局都要使用p的无语义性的混乱局面。HTML5提供的新标签包括<head>、<footer>、<aside>、<article>等，基本一个页面的每个布局部分，都有一个对应的标签。
HTML5语义化标签的主要作用主要体现在以下三个方面：
◎对移动端设备更加友好
◎使用语义化的布局标签更有利于搜索引擎的的抓取
◎语义化标签简洁，便于软件的维护和二次开发
使用语义化标签，更加符合现在的web标准。

②其他标签
HTML5增加了许多新功能，这些功能有的对应标签。
多媒体标签。比如标签可以支持视频播放功能，使用HTML5的video标签配合一些web视频播放器制作插件可以制作出效果很好的网页播放器。这里推荐video.js，比较美观，性能较好，且学习成本比较低。
画布，将在后面进行详细介绍。
表单相关的新标签，将在后面进行详细介绍。

4、 Geolocation地理定位

目前，地理定位基本上是每个移动app都支持的功能。而HTML5也开始支持地理定位功能，这给利用HTML5开发移动app提供了极大帮助。
Geolocation的使用方法很简单，主要有三个方法：
getCurrentPosition():获取当前用户的地理位置信息
watchPosition():定期轮询设备的位置
clearWatch():用于停止watchPosition()的轮询
目前大部分浏览器都支持Geolocation API。

6、增强的表单

表单一直都是一个web不可缺少的部分。HTML5中提供了非常丰富的表单标签和属性。首先我们来了解几个HTML5为表单控件新添加的标签。
<meter>/<progress>:用于设置进度条，配合js即可方便的搭建出一个动态进度条。
<details>+<summary>:零js即可创建折叠内容，结构如下：

<details><summary>This is the summary</summary>This contains detail things.<details>

Nach dem Login kopieren

7、强大的canvas

个人认为canvas是HTML5中最强大的功能，有了canvas，HTML5在图像这方面变得无所不能（有关canvas的具体实例请见其他博客）。

var canvas = document.getElementById(canvas1);var context = canvas.getContext(“2d”);

Nach dem Login kopieren

canvas可以创建丰富的图形，包括基本图形、函数曲线等。

综上，HTML5提供的新功能，使HTML5在移动应用开发、游戏开发、规范开发等方面，都有了质的飞跃。深入学习HTML5,十分必要。