一、html5的发展历史：2004年提出构想；2008年发布第一份草案；2012年前后位推广阶段；2020年最终测试；2022年正式发布。
二、html5新特性：
1、（1）html5 语义化更好：
新增的标签
多媒体功能：video\audio\canvas\svg
表单功能增强
（2）Javascript APIs
本地存储
获取拖拽内容信息
地理位置信息
（3）CSS3 布局排版：
字体、多列显示……
视觉效果：背景、圆角、阴影、渐变、透明……
动画支持：transform(变换)、transition(过渡)和animation(动画)
2、新增的结构元素
<article> 定义文章
<aside> 定义文章的侧边栏
<figure> 一组媒体对象以及文字
<figcaption> 定义 figure 的标题
<footer>定义页脚
<header>定义页眉
<hgroup>定义对网页标题的组合
<nav>定义导航
<section> 定义文档中的区段
<time>定义日期和时间
3、新增的其他元素
<video> 定义视频
<audio> 定义音频
<embed> 插入各种多媒体
<mark> 定义需要突出显示或高亮显示的文本
<progress>显示js中耗费的函数的进程
<time>表示时间或日期
<canvas>定义图形，提供画布
<command>表示命令按钮
<details> 表示用户要求得到并可以得到的详细信息
<wbr>表示软换行
4、新增的input元素的类型
<email> 表示必须输入E-mail地址的文本输入框
<url> 表示必须输入URL地址的文本输入框
<number> 表示必须输入数值的文本输入框
<range> 表示必须输入一定范围内的数字值的文本输入框
三、1Canvas 绘制图形、图画、动画
<canvas id="canvas" width="838" height="220"></canvas> <script> var canvasContext = document.getElementById("canvas").getContext("2d"); canvasContext.fillRect(250, 25, 150, 100); canvasContext.beginPath(); canvasContext.arc(450, 110, 100, Math.PI * 1/2, Math.PI * 3/2); canvasContext.lineWidth = 15; canvasContext.lineCap = ‘round‘; canvasContext.strokeStyle = ‘rgba(255, 127, 0, 0.5)‘; canvasContext.stroke(); </script>
2、Web Storage 本地存储
（1）、传统的HTML使用的是众所周知的cookie，各种浏览器都支持，直接用js就可以调用，很方便。但cookie也有它本身的缺陷与不足。比如存储空间小，每个站点大小限制在4 KB左右，又有时间期限…
（2）、HTML5的新标准可以很好地解决上面的一些问题。当然，本地存储还可以解决更多我暂时没提到的问题，本地存储可以存储5M大小的数据，甚至还可以更多。 它主要有四种：localstorage , sessionstorage, webSQL , indexedDB。
（3）、CSS3是CSS技术的一个升级版本，是由Adobe Systems、Apple、Google、HP、IBM、Microsoft、Mozilla、Opera、Sun Microsystems等许多Web界巨头联合组成的一个名为“CSS Working Group”的组织共同协商策划的。