Que peut nous apporter le HTML5 ? Un incontournable des interviews !-Tutoriel H5-php.cn

En parlant de HTML5, en apparence, cela signifie qu'il s'agit de la cinquième version mise à jour de HTML, mais en fait, HTML5 a de nombreuses choses inhérentes. C'est précisément grâce à l'émergence du HTML5 que le développement d'applications Web est devenu plus pratique, plus rapide, plus standardisé et a amélioré les performances des applications Web. On peut dire que HTML5 est désormais largement accepté par les applications web.
Tout d’abord, jetons un coup d’œil aux nouvelles fonctionnalités que HTML5 nous apporte.

1. Le cache local

Le stockage local Web storage est utilisé pour stocker des informations utiles sur le site Web sur un ordinateur local ou un appareil mobile, puis lire les informations localement en fonction des besoins réels. Il fournit deux interfaces API de type de stockage, à savoir sessionStorage et localhostStorage La première est valide pendant la session, et la seconde est stockée localement, et le stockage est permanent, mais l'utilisation de l'API des deux est fondamentalement la même. de.
En utilisant la fonction de stockage local de HTML5, nous pouvons enregistrer les informations utilisateur (similaires aux cookies en HTML4), stocker et lire des données et bien d'autres fonctions. Notez que Web Storage recommande officiellement que la taille du cache local de chaque site Web soit de 5 Mo, ce qui est beaucoup plus grand et plus puissant que les plusieurs Ko de cookie en HTML4.
Ensuite, utilisons le code pour expliquer spécifiquement comment utiliser Web Storage En prenant localStorage comme exemple, le code js est le suivant :

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

Copier après la connexion

En plus des opérations de base, vous peut également surveiller les événements de stockage :

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

Copier après la connexion

2. Mise en cache hors ligne

La mise en cache hors ligne peut toujours exécuter l'application Web normalement même en l'absence de réseau, ce qui est très pratique. La fonction de mise en cache hors ligne de HTML5 établit de bonnes conditions pour le développement d'applications Web (en particulier d'applications mobiles).

Il est facile de commencer à utiliser la fonction de cache hors ligne, il suffit d'ajouter l'attribut html à la balise mainfest et de spécifier le fichier mainfest. La fonction du fichier mainfest est d'indiquer au navigateur quels fichiers doivent être mis en cache hors ligne. Exemples d'application des fichiers .mainfest :

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

Copier après la connexion

Ce contenu montre que les deux fichiers index.html et test.js sont définis comme fichiers cache, à la suite de CACHE MAINFEST. Lorsque le réseau est indisponible ou hors ligne, cette partie du fichier sera lue directement depuis le cache local. Les fichiers suivant NETWORK sont définis comme des fichiers qui doivent être téléchargés à partir du réseau, qu'ils aient ou non été mis en cache.
De plus, les configurations nécessaires doivent être apportées au fichier .mainfest dans web.xml

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

Copier après la connexion

Avec la technologie de mise en cache hors ligne HTML5, les sites Web ou les applications développées sur le Web peuvent également être consultés sans un réseau, qui réduit considérablement la consommation du réseau et améliore considérablement les performances des applications développées à partir du Web.

3. Nouvelles balises

① Balises sémantiques de mise en page
HTML5 a ajouté de nombreuses nouvelles balises de mise en page sémantiques pour remplacer les balises de mise en page précédentes. Les nouvelles balises fournies par HTML5 incluent <head>, <footer>, <aside>, <article>, etc. Fondamentalement, chaque partie de mise en page d'une page a une balise correspondante.
Les principales fonctions des balises sémantiques HTML5 se reflètent principalement dans les trois aspects suivants :
◎Plus conviviales pour les appareils mobiles
◎L'utilisation de balises de mise en page sémantique est plus propice à l'exploration des moteurs de recherche
◎Les balises sémantiques sont simple et pratique pour la maintenance logicielle et le développement secondaire
L'utilisation de balises sémantiques est plus conforme aux standards du web actuels.

②Autres balises
HTML5 a ajouté de nombreuses nouvelles fonctionnalités, dont certaines ont des balises correspondantes.
Balises multimédia. Par exemple, la balise peut prendre en charge la fonction de lecture vidéo. L'utilisation de la balise vidéo HTML5 et de certains plug-ins de production de lecteurs vidéo Web peut créer un lecteur Web très efficace. Video.js est recommandé ici, il est plus beau, a de meilleures performances et a un coût d'apprentissage inférieur.
Canvas, sera présenté en détail plus tard.
De nouvelles balises liées aux formulaires seront présentées en détail ultérieurement.

4. Géolocalisation

Actuellement, la géolocalisation est essentiellement une fonction prise en charge par toutes les applications mobiles. HTML5 a également commencé à prendre en charge les fonctions de géolocalisation, ce qui constitue une aide précieuse pour le développement d'applications mobiles utilisant HTML5.
Geolocation est très simple à utiliser. Il existe trois méthodes principales :
getCurrentPosition() : Obtenir les informations de localisation géographique de l'utilisateur actuel
watchPosition(): Interroger régulièrement l'emplacement de l'appareil
clearWatch(): Utilisez Arrêtez l'interrogation de watchPosition()
Actuellement, la plupart des navigateurs prennent en charge l'API de géolocalisation.

6. Formulaires améliorés

Les formulaires ont toujours été un élément indispensable du Web. HTML5 fournit un ensemble très riche de balises et d'attributs de formulaire. Tout d'abord, découvrons plusieurs nouvelles balises ajoutées par HTML5 pour les contrôles de formulaire.
<meter>/<progress>: est utilisé pour définir la barre de progression. Avec js, vous pouvez facilement créer une barre de progression dynamique.
<details> <summary>:Vous pouvez créer du contenu pliable avec zéro js, la structure est la suivante :

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

Copier après la connexion

除了新的标签，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”);

Copier après la connexion

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方法可以设定缓存数据的值，采用键值对的形式}

Copier après la connexion

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

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

Copier après la connexion

2、离线缓存

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

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

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

Copier après la connexion

这些内容就表明，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>

Copier après la connexion

有了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>

Copier après la connexion

7、强大的canvas

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

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

Copier après la connexion

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

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