H5新特性

梦里梦外; 2024-04-17 19:15 60阅读 0赞

1.  绘画canvas
2.  媒介回放video和audio
3.  本地存储 localStoreage ,sessionStorage

> 请描述一下 cookies，sessionStorage 和 localStorage 的区别？  
> 第一：功能不一；cookie 是网站为了标示用户身份而储存在 Client Side （用户本地终端）上的数据，通常经过加密；cookie 数据始终在同源的 http 请求中携带（即使不需要），也会在浏览器和服务器间来回传递；每次 ajax 请求都会吧 cookie 传送到后台，cookie 一半用做用户登陆，一半后台可以根据 cookie 信息判断用户是否登陆状态；sessionStorage 和 localStorage 不会自动把数据发给服务器，仅在本地保存；  
> 第三：存储大小不一；cookie 数据大小不能超过 4k；sessionStorage 和localStorage 虽然也有存储大小的限制，但比 cookie 大得多，可以达到5M或更大。  
> 第四：有期时间不一；localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据； sessionStorage 数据在当前浏览器窗口关闭后自动删除；cookie 设置的 cookie 过期时间之前一直有效，即使窗口或浏览器关闭

1.  语义化元素 article , nav , header , section , footer

> 简述一下你对 HTML 语义化的理解？  
> 一句话概述：用正确的标签做正确的事情  
> 第一：html语义化让页面的内容结构化，结构更清晰，便于对浏览器，搜索引擎解析；  
> 第二：在没有 css 样式情况下也以一种文档格式显示，容易阅读；  
> 第三：搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重，利于 SEO;  
> 第四：使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解；

1.  表单控件 calendar , date , time , email , url , search
2.  新的技术 webworker , wwebsocket , geolocation
3.  地理定位
4.  媒体查询
5.  离线缓存

> 什么是离线缓存？在用户没有连网时，可以正常访问站点或应用，在用户与网络连接时更新用户机器上的缓存文件。  
> 工作原理能不能解释一下？  
> 原理：HTML5的离线存储是基于一个新建的 .appcache 文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。  
> 如何使用？  
> 第一：页面头部加入一个 mainfest 的属性；  
> 第二：在 cache.mainfest 文件编写离线缓存的资源
> 
>     CACHE MAINFEST
>     #v0.11
>     CACHE:
>     js/app.js
>     css/style.css
>     NETWORK:
>     resourse/logo.png
>     FALLBACK:
>     offline.html
> 
> 在离线状态时，操作 window.applicationCache 进行需求实现。

1.  拖拽
2.  data属性

> h5新增的属性：可以通过 ele.dataset 获取到标签上的 data-\* 属性，返回一个对象