H5的一些新特性

2019-11-23

语义化标签

header、footer、section、nav、aside、article
作用（优势）
（1）去掉或丢失样式的时候能够让页面呈现出清晰的结构
（2）有利于 SEO 和搜索引擎建立良好沟通，有助于爬虫抓取更多的信息，爬虫依赖于标签来确定上下文和各个关键字的权重
（3）方便其它设备解析
（4）便于团队开发和维护，语义化根据可读性

新表单元素

progres： 进度条，展示连接或下载的进度
meter： 刻度尺与度量衡，描述数据所处的阶段（红色危险，黄色警告，绿色优秀）
output： 输出内容，与以上表示所处的数据是经过计算而输出得到的

新表单类型

number、email、tel、calendar、time、date、url、search…

属性值	说明
type = ‘email’	限制用户输入类型必须为 Email 类型
type = ‘url’	限制用户输入类型必须为 URL 类型
type = ‘date’	限制用户输入类型必须为日期类型
type = ‘time’	限制用户输入类型必须为时间类型
type = ‘month’	限制用户输入类型必须为月类型
type = ‘week’	限制用户输入类型必须为周类型
type = ‘number’	限制用户输入类型必须为数字类型
type = ‘tel’	限制用户输入类型必须为电话类型
type = ‘search’	搜索框
type = ‘color’	颜色选择表单

本地存储

localstorage、sessionStorage、indexedDB
区别
（1）cookies 是为了标识用户身份而存储在用户本地终端上的数据，始终在同源 http 请求中携带，即 cookies 在浏览器和服务器间来回传递，而 sessionstorage 和 localstorage 不会自动把数据发给服务器，仅在本地保存
（2）存储大小的限制不同。cookie 保存的数据很小，不能超过 4k，而 sessionstorage 和 localstorage 保存的数据大，可达到 5M
（3）数据的有效期不同。cookie 在设置的 cookie 过期时间之前一直有效，即使窗口或者浏览器关闭。sessionstorage 仅在浏览器窗口关闭之前有效。localstorage 始终有效，窗口和浏览器关闭也一直保存，用作长久数据保存
（4）作用域不同。cookie 在所有的同源窗口都是共享；sessionstorage 不在不同的浏览器共享，即使同一页面；localstorage 在所有同源窗口都是共享
cookies，sessionStorage 和 localStorage 都是保存在浏览器端，且是同源的。

离线 Web 应用

页面缓存指在有网络的状态下，离线 web 应用指的是在没有网络的情况下可以运行的应用。

1
2
3

if(window.applicationCache){
       //支持离线应用
}

在线情况下，浏览器发现 HTML 头部有 manifest 属性，它会请求 manifest 文件，如果是第一次访问，那么浏览器就会根据 manifest 文件的内容下载相应的资源，并进行离线存储。如果已经访问过并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面。然后浏览器会对比新的 manifest 文件与旧的 manifest 文件，如果文件没有发生改变，就不会做任何操作，如果文件改变了，那么就会重新下载文件中的资源，并且进行离线存储。manifest 文件是核心，记录着哪些文件需要离线缓存，如果使用 manifest，在 html 标签内添加属性。例如：

1	<html manifest="cache.manifest">

manifest 文件格式如下

CACHE MANIFEST
    #缓存的文件
    index.html
    test.js
    #不做缓存
    NETWORK
    /images/
    FALLBACK
    offline.html index.html

地理定位

提供 api 访问地理位置，通过 navigator.geolocation 来实现访问。
三个方法：

1
2
3

getCurrentPosition()
watchPosition()
clearWatch

canvas

在页面上放置一个 canvas 元素，就相当于在页面上放置了一块画布，可以在其中进行图形的描绘。
canvas 元素只是一块无色透明的区域，需要利用 JS 编写在其中进行绘画的脚本。
在页画中放置 canvas 元素，首先，应该要指定的是·id、width、height 三个属性。例如：

1	<canvas id="canvas" width="400" height="300" />

svg 绘图

（1）SVG 是一种使用 XML 技术描述二维图形的语言,svg 是一种矢量图
（2）并不属于 HTML5 专有内容，在 HTML5 出现之前，就有 SVG 内容，HTML5 只不过提供了 SVG 原生的内容
（3） svg 文件的扩展名为.svg

SVG 的优势
（1）可通过文本编辑器来创建和修改
（2）可被搜索引擎搜索到
（3）SVG 可在任何的分辨率下被高质量的打印
（4）可在图片质量不下降的情况下被放大
（5）支持事件绑定

与 canvas 的区别
实际开发中，多用 SVG
不依赖分辨率
支持事件处理器
不适合游戏
大型渲染区域的程序(例如，百度地图)

不管是 SVG 还是 Canvas，在一个页面中都可以同时定义多个。

video、audio 新媒体视频/音频

audio 常见属性

属性	值	描述
autoplay	autoplay	视频就绪自动播放（谷歌浏览器需要添加 muted 来解决自动播放问题）
controls	controls	显示播放控件
width	pixels（像素）	设置播放器宽度
height	pixels（像素）	设置播放器高度
loop	loop	是否循环播放
preload	auto（预先加载）none（不预先加载）	设置是否预加载视频，如果设置了 autoplay 属性，会忽略该属性
src	url	视频地址
poster	imgUrl	加载等待时画面的显示的图片
muted	muted	是否静音播放

WebSocket SharedWorker

实现浏览器内多个标签页之间的通信。也可以调用 localstorge、cookies 等本地存储方式。 localstorge 在另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，我们通过监听事件，控制它的值来进行页面信息通信。
注意：Safari 在无痕模式下设置 localstorge 值时会抛出 QuotaExceededError 的异常。
Adobe Flash Socket ActiveX HTMLFile (IE) 基于 multipart 编码发送 XHR 基于长轮询的 XHR，可以引用 WebSocket.js 这个文件来兼容低版本浏览器。

一个正在成长的前端小白~