html5的新特性：1、语义标签；2、增强型表单；3、视频和音频；4、Canvas绘图；5、SVG绘图；6、拖放API；7、WebWorker；8、WebStorage；9、WebSocket；10、地理定位。其中，语义化标签使标签有自己的含义。
1、语义标签
语义化标签就是使标签有自己的含义，语义化标签的优势：
- 使界面的代码结构清晰，方便代码的阅读和团队的合作开发
- 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式来渲染网页。
- 有利于搜索引擎优化（SEO）。
语义化标签：
| 标签 | 描述 |
| <hrader></header> | 定义了文档的头部区域 |
| <footer></footer> | 定义了文档的尾部区域 |
| <nav></nav> | 定义文档的导航 |
| <section></section> | 定义文档中的节（section、区段） |
| <article></article> | 定义页面独立的内容区域 |
| <aside></aside> | 定义页面的侧边栏内容 |
| <detailes></detailes> | 用于描述文档或文档某个部分的细节 |
| <summary></summary> | 标签包含 details 元素的标题 |
| <dialog></dialog> | 定义对话框，比如提示框 |
2、增强型表单
HTML5 拥有多个新的表单 Input 输入类型。这些新特性提供了更好的输入控制和验证。
| 输入类型 | 描述 |
| color | 主要用于选取颜色 |
| date | 从一个日期选择器选择一个日期 |
| datetime | 选择一个日期（UTC 时间） |
| datetime-local | 选择一个日期和时间 (无时区) |
| 包含 e-mail 地址的输入域 | |
| month | 选择一个月份 |
| number | 数值的输入域 |
| range | 一定范围内数字值的输入域 |
| search | 用于搜索域 |
| tel | 定义输入电话号码字段 |
| time | 选择一个时间 |
| url | URL 地址的输入域 |
| week | 选择周和年 |
新增的表单属性：
- placehoder 属性，简短的提示在用户输入值前会显示在输入域上。即我们常见的输入框默认提示，在用户输入后消失。
- required 属性，是一个 boolean 属性。要求填写的输入域不能为空
- pattern 属性，描述了一个正则表达式用于验证 元素的值。
- min 和 max 属性，设置元素最小值与最大值。
- step 属性，为输入域规定合法的数字间隔。
- height 和 width 属性，用于 image 类型的 标签的图像高度和宽度。
- autofocus 属性，是一个 boolean 属性。规定在页面加载时，域自动地获得焦点。
- multiple 属性 ，是一个 boolean 属性。规定 元素中可选择多个值。
3、视频和音频
html5提供了音频和视频文件的标准，即使用<audio>和<video>元素。
音频：
<audio controls>
<source src="" type="audio">
</audio>视频：
<video controls>
<source src="" type="video">
</video>4、Canvas绘图
<canvas>元素负责在页面中设定一个区域，然后就可以通过 JavaScript 动态地在这个区域中绘制图形。
//基本语法
<canvas id="drawing" width=" 200" height="200">A drawing of something.</canvas>
// 在使用canvas时需要设定一个高度跟宽度将画布定下
// 文中的信息为浏览器不支持canvas标签时显示的文字
// 当画布定下后开始用JS进行画图
<script>
var drawing = document.getElementById("drawing");
//确定浏览器支持<canvas>元素
if (drawing.getContext){
// 通过getContext("2d");获取到2d的上下文对象
var context = drawing.getContext("2d");
// 通过fillRect()方法 在画布上绘制的矩形填充指定的fillstyle颜色
//绘制红色矩形
context.fillStyle = "#ff0000"; // 它们的默认值都是”#000000”。如果为它们指定表示颜色的字符串值，可以使用 CSS 中指定颜色值的任何格式，包括颜色名、十六进制码、rgb、 rgba、 hsl 或 hsla。
context.fillRect(10, 10, 50, 50);
//绘制半透明的蓝色矩形
context.fillStyle = "rgba(0,0,255,0.5)";
context.fillRect(30, 30, 50, 50);
// 传四个参数分别是矩形的 x 坐标、矩形的 y 坐标、矩形宽度和矩形高度。这些参数的单位都是像素。
}
</script>5、SVG绘图
SVG 是一种使用 XML 描述 2D 图形的语言。SVG图像在放大或改变尺寸的情况下其图形质量不会有损失。当svg对象的属性发生变换时，浏览器会重新渲染该图形
6、拖放API
draggable 属性为 true 时元素开启拖放。
拖放事件的源对象：
- dragstart：源对象开始拖放。
- drag：源对象拖放过程中。
- dragend：源对象拖放结束。
拖放事件的过程对象：
- dragenter：源对象开始进入过程对象范围内。
- dragover：源对象在过程对象范围内移动。
- dragleave：源对象离开过程对象的范围。
7、WebWorker
当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。
8、WebStorage
使用HTML5可以在本地存储用户的浏览数据。早些时候,本地存储使用的是cookies。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能。数据以 键/值 对存在, web网页的数据只允许该网页访问使用。客户端存储数据的两个对象为：
- localStorage – 没有时间限制的数据存储
- sessionStorage – 针对一个 session 的数据存储, 当用户关闭浏览器窗口后，数据会被删除。
不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：
- 保存数据：localStorage.setItem(key,value);
- 读取数据：localStorage.getItem(key);
- 删除单个数据：localStorage.removeItem(key);
- 删除所有数据：localStorage.clear();
- 得到某个索引的key：localStorage.key(index);
9、WebSocket
WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。
10、地理定位
HTML5 Geolocation（地理定位）用于定位用户的位置，使用getCurrentPosition()方法来获取用户的位置，可以基于此实现计算位置距离。
延伸阅读
在 HTML5 中被删除的元素
- <acronym>
- <applet>
- <basefont>
- <big>
- <center>
- <dir>
- <font>
- <frame>
- <frameset>
- <noframes>
- <strike>
- <tt>
文章标题：html5有哪些新特性，发布者：Z, ZLW，转载请注明出处：https://worktile.com/kb/p/34169
微信扫一扫 
支付宝扫一扫 
