HTML5 十大新特性总结
一、语义标签
二、增强型表单
三、视频和音频
四、Canvas绘图
五、SVG绘图
六、拖拉API
七、WebWorker
八、WebStorage
九、WebSocket
十、地理定位
一、语义化标签
1.1 什么是语义化标签?
- 语义化标签既是使标签有自己的含义
1.2 语义化标签的优势
- 使界面的代码结构清晰，方便代码的阅读和团队的合作开发
- 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式来渲染网页。
- 有利于搜索引擎优化（SEO）。
| <header> | 定义了文档的头部区域 |
|---|---|
| 定义了文档的尾部区域 | |
| 定义文档的导航 | |
| 定义文章 | |
| 定义页面以外的内容 |
二、增强型表单
1、新增5个表单元素
| 用户会在他们输入数据时看到域定义选项的下拉列表 | |
|---|---|
| 进度条，展示连接/下载进度 | |
| 刻度值，用于某些计量，例如温度、重量等 | |
| 提供一种验证用户的可靠方法生成一个公钥和私钥 | |
| 用于不同类型的输出比如尖酸或脚本输出 |
1.1 detalist的用法
改代码输出结果：
1.2 progress的用法
- progress 表示定义一个进度条，用途很广泛，可以用在文件上传的进度显示，文件下载的进度显示，也可以作为一种loading的加载状态条使用。
- value 从0-max max没设置时默认为1
// 正常情况下value 为0 时的progress // 当设置了value 值后progress的样式 
// progress的动画模拟效果
1.3 output的用法
- 它可以计算用户输入内容的值
for，其它影响计算结果的标签的 ID，可以多个。form，与当前标签有关联的 form（从属的表单）。如果未指明该属性，output 标签必须是一个 form 的后代标签。
2、新增的表单属性
| 属性 | 描述 |
|---|---|
| placehoder | 输入框默认提示文字 |
| required | 要求输入的内容是否可为空 |
| pattern | 描述一个正则表达式验证输入的值 |
| min/max | 设置元素最小/最大值 |
| step | 为输入域规定合法的数字间隔 |
| height/wdith | 用于image类型标签图像高度/宽度 |
| autofocus | 规定在页面加载时，域自动获得焦点 |
| multiple | 规定元素中可选择多个值 |
2.1 pattern 属性
- 描述一个正则表达式验证输入的值
// 在一个form表单中可以达到一个简单的用户校验规则
# 2.2 type data 属性
- 输入日期的控件
# 2.3 type datetime-loca 属性
- 输入日期和时间的控件
2.4 type month 属性
- 输入年和月的属性
2.5 time 属性
- 用于输入时间的控件
三、音频和视频
- html5提供了音频和视频文件的标准，既使用
四、Canvas绘图
- <canvas>元素负责在页面中设定一个区域，然后就可以通过 JavaScript 动态地在这个区域中绘制图形。
//基本语法
// 在使用canvas时需要设定一个高度跟宽度将画布定下 // 文中的信息为浏览器不支持canvas标签时显示的文字 // 当画布定下后开始用JS进行画图 五、SVG绘图
5.1 了解什么是SVG
- SVG 是一种使用 XML 描述 2D 图形的语言。
- SVG图像在放大或改变尺寸的情况下其图形质量不会有损失
- 当svg对象的属性发生变换时，浏览器会重新渲染该图形
5.2 svg跟canvas的区别
1、canvas可以随时绘制2D图形（用JavaScript）
2、svg是基于XML的，意味着可以操作DOM，渲染速度较慢
3、在SVG中每个形状都被当做是一个对象，如果SVG发生改变，页面就会发生重绘
4、Canvas是一像素一像素地渲染，如果改变某一个位置，整个画布会重绘。
5.3 SVG元素的用法
5.3.1 text
创建一个text元素
//text元素添加文本，x和y定义文本的起始终点
5.3.2 circle
// cx 和 cy 分别代表中新坐标 r 是半径 fill 代表图形的颜色
5.3.3 rect
// x, y 是起始坐标，width 和 height 是图形的宽高
5.5.4 path
d 包含方向命令。这些命令以命令名和一组坐标开始：
M 表示移动，它接受一组 x，y 坐标 L 表示直线将绘制到它接受一组 x，y H 是一条水平线，它只接受 x 坐标 V 是一条垂直线，它只接受 y 坐标 Z 表示关闭路径，并将其放回起始位置
六、地理定位
- 使用getCurrentPosition()方法来获取用户的位置
- 可以基于此实现计算位置距离
七、拖放API
- draggable 属性为 true 时元素开启拖放
7.1 拖放事件
源对象：
- dragstart：源对象开始拖放。
- drag：源对象拖放过程中。
- dragend：源对象拖放结束。
过程对象：
- dragenter：源对象开始进入过程对象范围内。
- dragover：源对象在过程对象范围内移动。
- dragleave：源对象离开过程对象的范围。
八、Web Worker
- Web Worker 是在主线程之外运行的
- 用于解决JS单线程中，持续较长的计算，而影响用户的交互
8.1 主要用法
- 提供主线程和新线程之间数据交换的接口：postMessage、onmessage。
work。js中
// 第二步 //worker.js onmessage =function (evt){ var data = evt.data;//通过evt.data获得发送来的数据 postMessage( data );//将获取到的数据发送会主线程 }html 主线程
//WEB页主线程 // 第一步 var workder = new Worker("./worker.js") // 创建指向工具js的实例对象 workder.postMessage("我是主线程发送的信息")// 通过postMessage发送主线程的信息 // 第三步 worker.onmessage =function(evt){ //接收worker传过来的数据函数 console.log(evt.data); //输出worker发送来的数据 }输出结果：
九、Web Storage
- Web Storage 是H5 引入的一个帮助解决cookie存储本地缓存的重要功能
- webstorage 中有5M容量，cookie只有4k
9.1 sessionStorage
session正式依赖与实现的客户端状态保持。
sessionStorage将数据保存在session中，浏览器关闭数据就消失。
9.2 localStorage
localStorage则一直将数据保存在客户端本地，除非手动删除，否则一直保存。
不管是sessionStorage，还是localStorage，可使用的API相同，常用的有如下几个（以localStorage为例）：
- 保存数据：localStorage.setItem(key,value);
- 读取数据：localStorage.getItem(key);
- 删除单个数据：localStorage.removeItem(key);
- 删除所有数据：localStorage.clear();
- 得到某个索引的key：localStorage.key(index);
十、WebSocket
- WebSocket协议为web应用程序客户端和服务端之间提供了一种全双工通信机制。
- 握手阶段采用HTTP协议，在服务端与客户端初次握手时，将HTTP协议升级成WebSocket协议当链接成功时就可以在双工模式下来回传递信息
- 没有同源限制，客户端可以与任意服务器通信
- 协议标识符为wx（如果加密为wxs）
- 除了协议定义外还有JS定义，只需要链接远程主机，并建立一个WebSocket实例链接到对端的URL即可
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/218656.html原文链接：https://javaforall.net
