html5 到底新增了什么

html5 到底新增了什么

新增标签

• <template> 通过javascript在运行时实例化内容的容器
• <section> 定义文档中的一个章节
• <nav> 定义只包含导航连接的章节
• <article> 定义可以独立余内容其余部分的完整独立内容块
• <aside> 定义和页面内容关联较低的内容——如果被删除，剩下的内容仍然很合理
• <header> 定义页面或章节的头部。它经常包含logo、页面标题和导航性的目录
• <footer> 定义页面或章节尾部。它经常包含版权信息、法律信息链接和反馈建议用的地址。
• <main> 定义文档中主要或重要的内容

• <figure> 代表一个和文档有关的图例
• <figcaption> 代表一个图例的说明

• <time> 代表日期和时间值；机器可读的等价形式通过datetime属性指定
• <mark> 代表一段需要被高亮引用文字

• <ruby> 代表被ruby注释标记的文本，如中文汉子和它的拼音
• <rt> 代表ruby注释，如中文拼音
• <rp> 代表ruby注释两边的额外插入文本，用于不支持ruby注释显示的浏览器中提供友好的注释显示
• <bdi> 代表需要脱离父元素文本方向的一段文本。它允许嵌入一段不同或未知文本方向格式的文本
• <wbr> 代表（建议）换行，当文本太长需要换行时将会在此处添加换行符号

• <embed> 代表一个嵌入的外部资源，如应用程序或交互内容
• <video> 代表一段视频及其视频文件和字幕，并提供了播放视频的用户界面
• <audio> 代表一段声音，或音频流
• <source> 为 video 或 audio 这类媒体元素指定媒体源
• <track> 为 video 或 audio 这类媒体元素指定文本轨道（字幕）
• <canvas> 代表位图区域，可以通过脚本在它上面呈现图形，如图表，游戏绘图等
• <svg> 定义一个嵌入式矢量图
• <math> 定义一段数学公式

• <datalist> 代表提供给其他控件的一组预定义选项
• <keygen> 代表一个密钥对生成器控件
• <output> 代表计算值
• <progress> 代表进度条
• <meter> 代表滑动条

• <details> 代表一个用户可以（点击）获取额外信息或控件的小部件
• <summary> 代表 details 元素的综述 或标题
• <menuitem> 代表一个用户可以点击的菜单项
• <menu> 代表菜单

通讯

• web sockets 允许在页面和服务器之间建立持久连接并通过这种方法来交换非html数据（全双工通道，可以双向通讯）

• server-sent events 简称sse，允许服务器向客户端推送事件，而不是仅在响应客户端请求时服务器才能发送数据的传统范式（单向通道，只能服务器向浏览器发送）
  1. sse 使用http协议，现有的服务器软件都支持。webSocket是一个独立协议
  2. sse属于轻量级，使用简单，webSocket 协议相对复杂
  3. sse默认支持断线重连，webSocket需要自己实现
  4. sse一般只用来传送文本，二进制数据需要编码后传送，webSocket默认支持传送二进制数据
  5. 支持自定义发送的消息类型

• webRTC 这项技术，其中的RTC代表的是即时通信，允许连接到其他人，直接在浏览器中控制视频会议，而不需要一个插件或是外部的应用程序

离线 & 存储

• 离线资源：应用程序缓存 （火狐）全面支持html5离线资源规范。其他大多数针对离线资源仅提供了某种程度上的支持
• 在线和离线事件 firefox3 支持WHATWG在线和离线事件，这可以让应用程序和扩展检测到是否存在可用的网络连接，以及在连接建立和断开时能感知到
• WHATWG 客户端会话和持久化存储（又名DOM存储） 客户端会话和持久化存储让web应用程序能够在客户端存储结构化数据
• indexedDB 是一个为了能够在浏览器中存储大量结构化数据，并且能够在这些数据上使用索引进行高性能检索的web标准
• web应用程序中使用文件 对新的html5文件Api的支持已经被添加到Gecko中，从而使web应用程序可以访问用户选择的本地文件。这包括 type file 的input元素的新的multiple 属性针对多文件的选择支持。还有fileReader

多媒体

• 使用html5 音视频 audio 和video 元素嵌入并支持新的多媒体操作
• 使用camera API 允许使用，操作计算机摄像头，并从中存储图像
• Track 和 WebVTT track 元素支持字幕和章节。webVTT一个文本轨迹格式

3D，图像 & 效果

• canvas
• WebGL WebGL通过引入了一套非常符合OpenGL ES2.0并且可以用在HTML5<canvas>元素中的api给Web带来了3D图像功能
• svg 一个基于XML的可以直接嵌入到html中的矢量图格式

性能 & 集成

• Web Workers 能够把javaScript计算委托给后台线程，通过允许这些活动以防止使用交互型事件变得缓慢
• XMLHttpRequest Level2 允许异步读取页面的某些部分，允许其显示动态内容，根据时间和用户行为而有所不同。这就是在Ajax背后的技术
• 即时编译javaScript引擎 新一代的javaScript 引擎功能更强大，性能更杰出
• History API 允许对浏览器历史记录进行操作。这对那些交互的加载新信息的页面尤其有用
• contentEditable属性：把你的网站变成wiki（多人协作的写作系统） html5 已经把contentEditable属性标准化了。
• 拖放 html5的拖放API能够支持网站内部和网站之间的拖放项目。同时也提供了一个更简单的供扩展和基于Mozilla （制作火狐的基金会）的应用程序使用的API
• html中的焦点管理 支持新的html5 activeElement和hasFocus属性。
• 基于Web的协议处理程序 你现在可以使用navigator.registerProtocolHandler() 方法把web应用程序注册成一个协议处理程序
• requestAnimationFrame 允许控制动画渲染以获得更优性能
• 全屏API 为一个网页或者应用程序控制使用整个屏幕，而不是显示浏览器界面
• 指针锁定API 允许锁定到内容的指针，这样游戏或者类似应用程序在指针到达窗口限制时也不会失去焦点
• 在线和离线事件 为了构建一个良好的具有离线功能的web应用程序，你需要知道什么时候你的应用程序确实离线了。顺便提一句，在你的应用程序又再回到在线状态时你也需要知道。

设备访问

• 使用Camera API 允许使用和操作计算机的摄像头，并从中存取照片
• 触控事件 对用户按下触控屏幕的事件做出反应的处理程序
• 使用地理位置定位 让浏览器使用地理位置服务定位用户的位置
• 检测设备方向 让用户在运行浏览器的设备变更方向时能够得到信息。这可以被用作一种输入设备（例如制作能够对设备位置做出反应的游戏）或者使用页面的布局跟屏幕的方向相适应（横向或纵向）

  样式

• 新的背景样式特性 现在可以使用 box-shadow给逻辑框设置一个阴影，而且还可以设置 多背景。
• 更精美的边框 现在不仅可以使用图像来格式化边框，使用border-image和它关联的普通属性，而且可以通过border-radius属性来支持援交边框
• 为你的样式设置动画 使用css Transitions 以在不同状态间设置动画，或者使用css Animations在页面的某些部分设置动画而不需要一个触发事件，你现在可以在页面中控制移动元素来。
• 排版方面的改进 作者们如今又更强大的能力使自己的页面文字达到更佳的排版。他们不但可以控制text-overflow和hyphenation，还可以给它设置一个阴影或者更精细的控制它的decorations。感谢新的@font-face规则，现在我们可以下载并应用自定义的字体了
• 新的展示性布局 为了提高设计的灵活性，已经有两种新的布局被添加进来： css多栏布局，以及css 灵活方框布局

抄录-MDN