标签
Img标签
属性 crossorigin
值：
anonymoususe-credentials
应用场景
crossorigin： 这个枚举属性表明是否必须使用 CORS 完成相关图像的抓取，HTML 规范中图片有一个 crossorigin 属性，结合合适的 CORS 响应头，就可以实现在画布中使用跨域元素的图像。
兼容性
属性 srcset
描述
定义了我们允许浏览器选择的图像集，以及每个图像的大小。在每个逗号之前
代码案例
应用场景（响应式图片）
- 查看设备宽度
- 检查sizes列表中哪个媒体条件是第一个为真
- 查看给予该媒体查询的槽大小
- 加载srcset列表中引用的最接近所选的槽大小的图像
兼容性
meta标签
属性 http-equiv
值
1、Expires(期限)：可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。2、Pragma(cache模式)：是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出3、Refresh(刷新)：自动刷新并指向新页面。 ＜meta http-equiv="Refresh" content="2；URL=http://www.net.cn/"＞（表示停2秒之后刷新到新的URL） 4、Set-Cookie(cookie设定): 如果网页过期，那么存盘的cookie将被删除。5、Window-target(显示窗口的设定): 制页面在当前窗口以独立页面显示。6、content-security-policy： 内容安全策略 [http://www.ruanyifeng.com/blog/2016/09/csp.html]
描述
相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
web API
Page Lifecycle API
但是，它没有解决一个问题。Android、iOS 和最新的 Windows 系统可以随时自主地停止后台进程，及时释放系统资源。也就是说，网页可能随时被系统丢弃掉。Page Visibility API 只在网页对用户不可见时触发，至于网页会不会被系统丢弃掉，它就无能为力了。为了解决这个问题，W3C 新制定了一个 Page Lifecycle API，统一了网页从诞生到卸载的行为模式，并且定义了新的事件，允许开发者响应网页状态的各种转换。
兼容性 借助
Pointer Lock API
使用场景
这对于一些需要鼠标控制的应用非常有用。举个例子：3D场景的旋转
值
目前，Pointer Lock API共支持3个属性，2个方法和2个事件，分别如下：// 3个属性Document.pointerLockElement // 需要进行鼠标控制的元素Document.onpointerlockchange // 状态更改监听函数Document.onpointerlockerror // 报错回调// 2个方法Element.requestPointerLock() // 进入无限状态Document.exitPointerLock() // 退出状态// 2个事件pointerlockchangepointerlockerror
Async Clipboard API (复制板)
描述
以前实现复制粘贴，借助这两个API来进行选中，粘贴能力HTMLInputElement.select()document.execCommand()// 但是只信任用户通过应用、文档或脚本触发的复制操作。而且，复制到剪贴板的内容来源还必须是已有的DOM元素。
值
// chrome66 过后支持navigator.clipboard navigator.clipboard.read() // navigator.clipboard.readText()write(data)writeText(data)
// 不阻塞
兼容性
navigator.clipboard只能在“安全上下文”中使用。什么是“安全上下文”？简单说，就是locahost和HTTPS环境下。（可以通过 window.isSecureContext属性取得。）桌面浏览器中目前只有Chrome、Firefox和Opera支持，Safari和IE/Edge还不支持；而且，Chrome也只支持readText()和writeText()。