HTML5 有哪些新特性？
HTML5 有哪些新特性
HTML5 标准提供了哪些新的 API？
这个问题可以聊的东西特别多，下面是我搜集的以及一些扩展知识；
一、声明方式
本站就是基于HTML5规范书写的HTML代码；
核心
HTML4 规定了三种声明方式，分别是：严格模式、过渡模式 和 框架集模式；
而HTML5因为不是SGML的子集，只需要<!DOCTYPE>就可以了：
HTML4声明方式
HTML4 规定了三种不同的 <!DOCTYPE> 声明，分别是：Strict、Transitional 和 Frameset;
HTML4 Strict / 严格
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTML4 Transitional /过渡
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
HTML4 Frameset/框架集
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
HTML5声明方式
HTML5 现在已经不是 SGML 的子集，从最开始的声明方式就不一样了，改为了<!DOCTYPE>；
<!DOCTYPE html>
关于声明方式的更改，这个可以参考
HTML5 主要是关于图像，位置，存储，多任务等功能的增加，下面是具体的
二、语义化更好的内容标签
本站就是用了很多语义化标签，比钱header/footer/article等
核心
为了规范HTML页面，有利于搜索引擎；
对前端开发人员的好处：可以根据这些语义化标签，更好的进行模块化处理；我们可以在写React/Vue等项目的时候，根据这些来做模块区分；
对外的好处：我们可以和设计师沟通，按照这种模块进行页面设计，如果是PS设计的页面，还可以参考这个进行图层编组
三、音频、视频
音频、视频 API(audio,video)
可以在标签内查看用法
核心
通过 audio/video 实现音频和视频的操作；
使用时候需要注意几种数据源格式的支持；
还有一些辅助标签来精细的做多媒体，比如可以通过<track>做歌词和字幕。
四、表单控件
HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
具体参考：HTML5 新的 Input 类型
核心
更有利于移动端做表单时候，比如电话号码，email，输入类型的限制；
但是：我们真正做项目的时候，不能光靠这个来做校验，不仅我们前端要做校验，一个合格的后端不应该相信前端传入的任何数据；
五、5个API-本地存储
核心
长期存储数据的 localStorage，比较常用
临时存储的 sessionStorage，浏览器关闭后自动删除，实际工作中使用的场景不多
localStorage
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
只读的 localStorage 属性允许你访问一个 Document 源（origin）的对象 Storage；存储的数据将保存在浏览器会话中。
localStorage 类似 sessionStorage，但其区别在于：存储在 localStorage 的数据可以长期保留；而当页面会话结束——也就是说，当页面被关闭时，存储在 sessionStorage 的数据会被清除 。
具体参考：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage
阿西河前端教程的夜间模式，就是根据localStorage来实现的；
sessionStorage
sessionStorage 的数据在浏览器关闭后自动删除
sessionStorage 属性允许你访问一个 session Storage 对象。它与 localStorage 相似，不同之处在于 localStorage 里面存储的数据没有过期时间设置，而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。在新标签或窗口打开一个页面时会复制顶级浏览会话的上下文作为新会话的上下文，这点和 session cookies 的运行方式不同。
具体参考：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/sessionStorage
五、5个API-画布/Canvas
演示：https://wow.techbrood.com/fiddle/30964
五、5个API-地理/Geolocation
地理位置 API 允许用户向 Web 应用程序提供他们的位置。出于隐私考虑，报告地理位置前会先请求用户许可。
类似Google搜索页面，底部显示位置的样子,还有点餐的，我的位置相关的；
延伸：如果我们打算根据不同的地理位置加载不同的资源，可以借助第三方的IP库；参考 JavaScript 获取用户客户端的 ip 地址，邮编，城市名;
五、5个API-拖拽释放
HTML拖拽释放 (Drag and drop) 接口使应用程序能够在浏览器中使用拖放功能。
例如，通过这些功能，用户可以使用鼠标选择可拖动元素，将元素拖动到可放置元素，并通过释放鼠标按钮来放置这些元素。
可拖动元素的一个半透明表示在拖动操作期间跟随鼠标指针。
详情参考 HTML 拖放 API
在线浏览拖拽效果：https://mdn.github.io/dom-examples/drag-and-drop/copy-move-DataTransfer.html
核心
功能：可以把一个元素拖动放到目标区域，并且可以定义它的中间效果；
它的实现过程有：
- 1.确定什么是可拖动的源
- 2.定义拖动元源
- 定义拖动数据
- 定义拖动图像
- 定义拖动效果
- 3.定义一个放置区
- 4.处理放置效果
- 5.拖动结束
五、5个API-Web Workers
webworker, websocket, Geolocation
当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。
web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。
具体参考：HTML5 Web Workers
核心
Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。
在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。等到 Worker 线程完成计算任务，再把结果返回给主线程。
这样的好处是，一些计算密集型或高延迟的任务，被 Worker 线程负担了，主线程（通常负责 UI 交互）就会很流畅，不会被阻塞或拖慢。
其他
比如 ruby 可以定义带拼音的效果：https://www.axihe.com/books/web.html ，这个页面中『花一万块钱去培训, 不如用来读点书』,其中培训上面的拼音Sòng Qián就是 ruby 标签做的；
HTML5 迁移
本站有一个 HTML5 迁移 这个推荐一定要看看，讲的是HTML4的网页怎么转移到HTML5，里面介绍了我们常用的HTML5知识
更多的一些知识，可以参考下面几个知识点
更多面试题
如果你想了解更多的前端面试题，可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题，也有一些大公司的面试图，可以让你面试更加顺利。
| 面试题 | ||
|---|---|---|
| HTML | CSS | JavaScript |
| jQuery | Vue.js | React |
| 算法 | HTTP | Babel |
| BootStrap | Electron | Gulp |
| Node.js | 前端经验相关 | 前端综合 |
| Webpack | 微信小程序 | - |
这些题库还在更新中，如果你有不错的面试题库欢迎分享给我，我整理后放上来；人人为我，我为人人，互帮互助，共同提高，祝大家都拿到心仪的Offer！
