html5总的来说多了十个新特性，但其不支持ie8及ie8以下版本的浏览器。
- 语义化标签
- 增强型表单
- 视频和音频
- Canvas 绘图
- SVG 绘图
- 地理定位
- 拖放 API
- WebWorker
- WebStorage
- WebSocket
一、语义化标签
html5 语义化标签，可以使开发者更方便清晰构建页面的布局。
<!-- 定义页眉，通常包含LOGO，标题和导航 -->
<header></header>
<!-- 定义了页脚，通常包含版权或法律声明，有时还包含一些链接 -->
<footer></footer>
<!-- 定义了一个部分，其中包含经常出现在网站上的导航链接 -->
<nav></nav>
<!-- 定义了一个部分，例如侧边栏 -->
<aside></aside>
<!-- 定义了主体内容 -->
<main></main>
<!-- 定义了文档的一部分 -->
<section></section>
<!-- 定义了一条独立的内容。它不单指主要内容，而是可以用于注释和小部件 -->
<article></article>
<!-- 定义用户可以看到或者隐藏的额外细节 -->
<details>
<summary>内容标题</summary>
<p>这是隐藏的内容一</p>
<p>这是隐藏的内容二</p>
</details>
<!-- 定义对话框 -->
<dialog open>
<p>我是对话框</p>
</dialog>
<!-- 定义自包含内容，如图表，图片 -->
<figure>
<!-- 标题 -->
<figcaption>午后时光</figcaption>
<img src="https://pics7.baidu.com/feed/d62a6059252dd42a066ff9f994ac9bb3c8eab898.jpeg?token=d0816df1b671a48272fbf91c58eb2d72&s=8B9456806C7640921D842CD90300F090" alt="午后时光" />
</figure>
<!-- 定义部分文本高亮显示 -->
<mark>《CSS那些事儿》</mark>
<!-- 定义日期时间 -->
<time>2019/06/01</time>
1.png
二、增强型表单
html5修改一些新的input输入特性，改善更好的输入控制和验证。
<!-- 选取颜色 -->
<input type="color" />
<!-- 选取日期 -->
<input type="date" />
<!-- 选取日期(UTC时间) -->
<input type="datetime" />
<!-- 选取日期（无时区） -->
<input type="datetime-local" />
<!-- 选择一个月份 -->
<input type="month" />
<!-- 选择周和年 -->
<input type="week" />
<!-- 选择一个时间 -->
<input type="time" />
<!-- 包含e-mail地址的输入域 -->
<input type="email" />
<!-- 数值的输入域 -->
<input type="number" />
<!-- url地址输入域 -->
<input type="url" />
<!-- 定义输入电话号码和字段 -->
<input type="tel" />
<!-- 用于搜索域 -->
<input type="search" />
<!-- 一个范围内数字值的输入域 -->
<input type="range" />
html5新增了五个表单元素
<!-- 用户会在他们输入数据时看到域定义选项的下拉列表 -->
<input list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>
<!-- 进度条，展示连接/下载进度 -->
下载进度：<progress value="22" max="100"></progress>
<!-- 提供一种验证用户的可靠方法生成一个公钥和私钥 -->
<form action="/example/html5/demo_form.asp" method="get">
用户名：<input type="text" name="usr_name" />
加密：<keygen name="security" />
<input type="submit" />
</form>
<!-- 用于不同类型的输出比如尖酸或脚本输出 -->
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>
<!-- 刻度值，用于某些计量，例如温度、重量等 -->
<meter value="0.6">60%</meter>
html5新增表单属性
| 属性 | 描述 |
|---|---|
| placehoder | 输入框默认提示文字 |
| required | 要求输入的内容是否可为空 |
| pattern | 描述一个正则表达式验证输入的值 |
| min/max | 设置元素最小/最大值 |
| step | 为输入域规定合法的数字间隔 |
| height/wdith | 用于image类型<input>标签图像高度/宽度 |
| autofocus | 规定在页面加载时，域自动获得焦点 |
| multiple | 规定<input>元素中可选择多个值 |
三、音频和视频
html5提供了音频和视频文件的标准，既使用 <audio> 元素。
音频：<audio src=" "></audio>。
<!-- 属性提供添加播放、暂停和音量控件 -->
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
你就浏览器不支持 audio 元素
</audio>
视频：<video src=" "></video>
<!-- 属性提供添加播放、暂停和音量控件 -->
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
你的浏览器不支持 Video 标签
</video>
四、Canvas 绘图
https://www.runoob.com/w3cnote/html5-canvas-intro.html
五、SVG 绘图
-
什么是SVG?
- SVG指可伸缩矢量图形
- SVG用于定义用于网络的基于矢量的图形
- SVG使用XML格式定义图形
- SVG图像在放大或改变尺寸的情况下其图形质量不会有损失
- SVG是万维网联盟的标准
-
SVG的优势
- SVG图像可通过文本编译器来创建和修改
- SVG图像可被搜索、索引、脚本化或压缩
- SVG是可伸缩的
- SVG图像可在任何的分辨率下被高质量的打印
- SVG可在图像质量不下降的情况下被放大
-
SVG 与 Canvas 区别
- SVG适用于描述XML中的2D图形的语言。
- Canvas随时随地绘制2D图形（使用javaScript）。
- SVG是基于XML的，意味这可以操作DOM，渲染速度较慢。
- 在SVG中每个形状都被当做是一个对象，如果SVG发生改变，页面就会发生重绘。
- Canvas是一像素一像素地渲染，如果改变某一个位置，整个画布会重绘。
| Canvas | SVG |
|---|---|
| 依赖分辨率 | 不依赖分辨率 |
| 不支持事件处理器 | 支持事件处理器 |
| 能够以.png或.jpg格式保存结果图像 | 复杂度会减慢搞渲染速度 |
| 文字呈现功能比较简单 | 适合大型渲染区域的应用程序 |
| 最合适图像密集的游戏 | 不适合游戏应用 |
六、地理定位
使用 getCurrentPosition() 方法来获取用户的位置。以实现“LBS服务”
<body>
<div id="demo"></div>
<script>
var x = document.getElementById("demo");
getLocation();
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
}
else {
x.innerHTML = "该浏览器不支持获取地理位置";
}
}
function showPosition(position) {
x.innerHTML = `纬度：${position.coords.latitude}经度：${position.coords.longitude}`
};
</script>
</body>
七、拖放 API
拖放是一种常见的特性，即捉取对象以后拖到另一个位置。
在html5中，拖放是标准的一部分，任何元素都能够拖放。
<div draggable="true"></div>
当元素拖动时，我们可以检查其拖动的数据。
<div draggable="true" ondragstart="drag(event)"></div>
<script>
function drap(ev){
console.log(ev);
}
</script>
| 拖动生命周期 | 属性名 | 描述 |
|---|---|---|
| 拖动开始 | ondragstart | 在拖动操作开始时执行脚本 |
| 拖动过程中 | ondrag | 只要脚本在被拖动就运行脚本 |
| 拖动过程中 | ondragenter | 当元素被拖动到一个合法的防止目标时，执行脚本 |
| 拖动过程中 | ondragover | 只要元素正在合法的防止目标上拖动时，就执行脚本 |
| 拖动过程中 | ondragleave | 当元素离开合法的防止目标时 |
| 拖动结束 | ondrop | 将被拖动元素放在目标元素内时运行脚本 |
| 拖动结束 | ondragend | 在拖动操作结束时运行脚本 |
八、Web Worker
http://www.ruanyifeng.com/blog/2018/07/web-worker.html
JavaScript 语言采用的是单线程模型，也就是说，所有任务只能在一个线程上完成，一次只能做一件事。前面的任务没做完，后面的任务只能等着。随着电脑计算能力的增强，尤其是多核 CPU 的出现，单线程带来很大的不便，无法充分发挥计算机的计算能力。
Web Worker 可以通过加载一个脚本文件，进而创建一个独立工作的线程，在主线程之外运行。
-
基本使用：
-
Web Worker的基本原理就是在当前javascript的主线程中，使用Worker类加载一个javascript文件来开辟一个新的线程，
-
起到互不阻塞执行的效果，并且提供主线程和新县城之间数据交换的接口：postMessage、onmessage。
-
// worker.js
onmessage =function (evt){
var d = evt.data;//通过evt.data获得发送来的数据
postMessage( d );//将获取到的数据发送会主线程
}
<script>
// worker.html
// 创建一个Worker对象并向它传递将在新线程中执行的脚本的URL
var worker =new Worker("worker.js");
// 向worker发送数据
worker.postMessage("hello world");
// 接收worker传过来的数据函数
worker.onmessage =function(evt){
// 输出worker发送来的数据
console.log(evt.data);
}
</script>
九、Web Storage
WebStorage 是HTML新增的本地存储解决方案之一，但并不是取代cookie 而指定的标准，cookie 作为 HTTP 协议的一部分用来处理客户端和服务器的通信是不可或缺的，session 正式依赖与实现的客户端状态保持。WebSorage 的意图在于解决本来不应该 cookie 做，却不得不用 cookie 的本地存储。
websorage拥有5M的存储容量，而cookie却只有4K，这是完全不能比的。
客户端存储数据有两个对象，其用法基本是一致。
- localStorage：没有时间限制的数据存储
- sessionStorage:在浏览器关闭的时候就会清除。
<body>
<button class="set-data-btn">设置数据</button>
<button class="get-datakey-btn">获取某个索引的值</button>
<button class="remove-data-btn">删除一条数据</button>
<button class="clear-data-btn">删除所有数据</button>
<script>
let setBtn = document.querySelector('.set-data-btn');
let getKeyBtn = document.querySelector('.get-datakey-btn');
let removeBtn = document.querySelector('.remove-data-btn');
let clearBtn = document.querySelector('.clear-data-btn');
let data = {
id: 1,
username: '张三',
token: 'asjfixuz8o13512410uxucj12j4l124kl1h5'
};
// 设置数据
setBtn.onclick = () => localStorage.setItem('token', JSON.stringify(data));
// 获取某个索引的值
getKeyBtn.onclick = () => console.log(localStorage.key(data))
// 删除一条
removeBtn.onclick = () => localStorage.removeItem('token');
// 删除所有
clearBtn.onclick = () => localStorage.clear();
</script>
十、WebSocket
WebSocket 协议为 web 应用程序客户端和服务端之间提供了一种全双工通信机制。
特点：
- 握手阶段采用HTTP协议，默认端口是80和443
- 建立在TCP协议基础之上，和http协议同属于应用层
- 可以发送文本，也可以发送二进制数据。
- 没有同源限制，客户端可以与任意服务器通信。
- 协议标识符是ws（如果加密，为wss），如ws://localhost:8023
网友评论