HTML5能为我们带来什么面试必备！_面经h5能干什么-优快云博客

本文链接：https://blog.youkuaiyun.com/2401_87029664/article/details/142070676

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

2、离线缓存

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

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

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

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

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

3、新型标签

①布局语义化标签
HTML5新增了许多语义化的布局标签，用以代替之前每个布局都要使用div的无语义性的混乱局面。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>

除了新的标签，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代码如下：