Speaking of HTML5, on the surface it means that it is the fifth updated version of HTML, but in fact, HTML5 has many inherent things. It is precisely because of the emergence of HTML5 that the development of web applications has become more convenient, faster, more standardized, and improved the performance of web applications. It can be said that HTML5 is now widely accepted by web applications.
First, let’s take a look at what new features HTML5 brings us.
1. Local cache
Local storageWeb storageThe function is to store useful information in the website on the local computer or mobile device, and then based on actual needs Read information from local. It provides two storage type API interfaces, namely sessionStorage and localhostStorage. The former is valid during the session, and the latter is stored locally, and the storage is permanent, but both The API usage is basically the same.
Using the local storage function of HTML5, we can save user information (similar to cookies in HTML4), store and read data, and many other functions. Note that Web Storage officially recommends that the local cache size of each website is 5MB, which is much larger and more powerful than the several kb of cookie in HTML4.
Next, use the code to specifically explain how Web Storage is used. Taking localStorage as an example, the js code is as follows:
window.onload = function(){localStorage.clear();//清除之前localStorage存储的全部数据localStorage.setItem(“userData”,”storage demo”）//setItem方法可以设定缓存数据的值，采用键值对的形式}Copy after login
Copy after login
In addition to basic operations, You can monitor the Storage event:
window.onload = function(){window.addEventListener(“storage”,function(e){console.log(e);
},true);
}Copy after login
Copy after login
2. Offline cache
Offline cache can still run the web application normally even if there is no network, which is very practical value. The offline caching function of HTML5 establishes good conditions for the development of web applications (especially mobile applications).
It is very simple to start using the offline cache function. Just add the mainfest attribute to the html tag and specify the mainfest file. The function of the mainfest file is to tell the browser which files need to be cached offline. Give an example of the application of the .mainfest file:
CACHE MAINFEST
index.html
test.js
NETWORK
/images/
Copy after login
Copy after login
These contents show that the two files index.html and test.js are Defined as a cache file, followed by CACHE MAINFEST. When the network is unavailable or offline, this part of the file will be read directly from the local cache. Files following NETWORK are defined as files that must be downloaded from the network regardless of whether they have been cached.
In addition, necessary configurations must be made to the .mainfest file. In web.xml
<mime-mapping>//.mainfest文件是MIME类型文件<extension>mainfest</extension><mime-type>text/cache-mainfest<mime-type></mime-mapping>
Copy after login
Copy after login
With HTML5 offline caching technology, websites or web-developed applications can be used without network It can also be accessed under any circumstances, which greatly reduces network consumption and greatly improves the performance of apps developed using the web.
3. New tags
① Layout semantic tags
HTML5 has added many new semantic layout tags to replace the previous layout tags. An unsemantic mess using p. New tags provided by HTML5 include <head>, <footer>, <aside>, <article>, etc. , basically each layout part of a page has a corresponding label.
The main functions of HTML5 semantic tags are mainly reflected in the following three aspects:
◎More friendly to mobile devices
◎Using semantic layout tags is more conducive to search engine crawling
◎Semantic tags are simple and convenient for software maintenance and secondary development
The use of semantic tags is more in line with current web standards.
②Other tags
HTML5 adds many new features, some of which correspond to tags.
Multimedia tags. For example, the tag can support the video playback function. Using the HTML5 video tag and some web video player production plug-ins can create a very effective web page player. Video.js is recommended here, it is more beautiful, has better performance, and has a lower learning cost.
Canvas, will be introduced in detail later.
The new tags related to the form will be introduced in detail later.
4. Geolocation
Currently, geolocation is basically a function supported by every mobile app. HTML5 has also begun to support geolocation functions, which provides great help for developing mobile apps using HTML5.
Geolocation is very simple to use. There are three main methods:
getCurrentPosition(): Get the current user’s geographical location information
watchPosition() :Poll the location of the device periodically
clearWatch():Used to stop polling of watchPosition()
Most browsers currently support the Geolocation API.
6. Enhanced forms
Forms have always been an indispensable part of the web. HTML5 provides a very rich set of form tags and attributes. First, let's learn about several new tags added by HTML5 for form controls.
<meter>/<progress>: is used to set the progress bar. With js, you can easily build a dynamic progress bar.
<details>+<summary>:You can create folding content with zero js, the structure is as follows:
<details><summary>This is the summary</summary>This contains detail things.<details>
Copy after login
Copy after login
除了新的标签，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”);
Copy after login
Copy after login
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方法可以设定缓存数据的值，采用键值对的形式}Copy after login
Copy after login
除了基本操作，还可以对Storage事件进行监听：
window.onload = function(){window.addEventListener(“storage”,function(e){console.log(e);
},true);
}Copy after login
Copy after login
2、离线缓存
离线缓存可以在即使没有网络的状态下web应用仍能正常运行，非常有实用价值。HTML5的离线缓存功能为web应用（尤其是移动应用）的开发建立了良好的条件。
开始使用离线缓存功能很简单，只要在html标签中加入mainfest属性，并指定mainfest文件即可。mainfest文件的作用是告诉浏览器哪些文件需要进行离线缓存操作。举例说明.mainfest文件的应用：
CACHE MAINFEST
index.html
test.js
NETWORK
/images/
Copy after login
Copy after login
这些内容就表明，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>
Copy after login
Copy after login
有了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>
Copy after login
Copy after login
除了新的标签，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”);
Copy after login
Copy after login
canvas可以创建丰富的图形，包括基本图形、函数曲线等。
综上，HTML5提供的新功能，使HTML5在移动应用开发、游戏开发、规范开发等方面，都有了质的飞跃。深入学习HTML5,十分必要。
以上就是HTML5能为我们带来什么? 面试必备！的内容，更多相关内容请关注PHP中文网（www.php.cn）！
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
