HTML5新特性

placeholder 提供对输入域的提示值

required 规定表单提交前输入域是否必填

pattern 规定用于验证input域的正则表达式

min 规定输入域允许的最小值

max 规定输入域允许的最大值

multiple 输入域可以选择多个值，适用于email和file类型

HTML5标准的表单中添加了很多功能，虽然这些功能都是之前常用的功能，但对于开发者来说，这确实是一件很不错的事情。

HTML5增加的getElementByClassName()方法是最受人欢迎的一个方法，可以通过document对象及所有HTML元素调用该方法。

//取得类中包含"username"和"current"的元素
var allCurrentUsernames = document.getElementByClassName("username current")

//取得id为"myDiv"的元素中带有类名"selected"的所有元素
var selected = document.getElementById("myDiv").getElementsByClassName("selected")

使用这个方法可以更方便地为带有某些类的元素添加事件处理程序，而不必再局限于使用ID或标签名(getElementsByTagName)。

HTML5规定可以为元素添加非标准的属性，但要加前缀data-，为元素提供与渲染无关的信息。

可以通过元素的dataset属性访问自定义属性的值。

var div = document.getElementById("div")
//取得自定义属性的值
var age = div.dataset.age;
var name = div.dataset.name;

HTML5还为DOM作了其他扩展，包括classList属性、焦点管理、HTMLDocument变化、字符集属性、插入标记等。

最早在网页中引入JavaScript拖放功能的是IE4，HTML5以IE的实例为基础制定了拖放规范。拖放事件可以控制拖放相关的各个方面，拖动某元素时，将依次触发下列事件：

dragstart

drag

dragend

拖放通常伴随着数据变化，为了在拖放操作时实现数据变换，IE5引入了dataTransfer对象，它是事件对象的一个属性，用于从被拖动元素向放置目标传递字符串格式的数据。dataTransfer对象有两个主要方法：getData()和setData()，getData()可以获取由setData()保存的值。

//设置和接收文本数据
event.dataTransfer.serData("name", "James")
var name = event.dataTransfer.getData("name")

同时，还能通过dataTransfer来确定被拖动的元素及作为放置目标的元素能够接收什么操作。

默认情况下，图像、链接和文本是可以拖动的，HTML5为所有HTML元素规定了一个draggable属性，表示元素是否可以拖动。

James

HTML5新增了两个与媒体相关的标签，让开发人员不必依赖任何插件就能在网页中嵌入跨浏览器的音频和视频内容，这两个标签就是和。

使用这两个元素时，至少要在标签中包含src属性，指向要加载的媒体文件。并非所有的浏览器都支持所有媒体格式，所以可以指定多个不同的媒体来源，此时使用元素而不用指定src属性。

和包含很多属性，包括autuplay、controls、src等，还可以触发很多事件，让开发人员在使用少量HTML和JavaScript的情况下编写出自定义的音频/视频播放器。

Web Storage的目的是克服由cookie带来的一些限制，当数据需要被严格控制在客户端上时，无须持续地将数据发回服务器。Web Storage的两个主要目标是：

提供一种在cookie之外存储会话数据的途径

提供一种存储大量可以跨会话存在的数据的机制

Web Storage常用的两个对象分别是localStorage和sessionStorage。

sessionStorage对象存储某个特定会话的数据，该数据只保持到浏览器关闭。因为sessionStorage绑定于某个服务器会话，所以文件在本地运行时是不可用的。下面展示了怎么使用sessionStorage:

sessionStorage.setItem("name", "James");
var name = sessionStorage.getItem("name")

localStorage对象在HTML5规范中作为持久保存客户端数据的方案，目的是跨越会话存储对象，但有特定的访问限制。要访问同一个localStorage对象，页面必须来自同一个域名(子域名无效)，使用同一种协议，在同一个端口上。

localStorage.setItem("name", "James");
var name = localStorage.getItem("name")

与其他客户端数据存储方案类似，Web Storage同样也有限制，这些限制因浏览器而异。对于localStorage和sessionStorage，有的浏览器会设置每个来源5MB的限制，有的浏览器会设置2.5M的限制。

Web Sockets的目标是在一个多带带的持久连接上提供全双工、双向通信。使用标准的HTTP服务器无法实现Web Sockets，只有支持这种协议的专门服务器才能正常工作。

未加密的连接不再是http://而是ws://，加密的连接也不再是https://而是wss://。使用自定义协议而不是HTTP协议的好处是，能够在客户端和服务器之间发送非常少量的数据，而不必担心HTTP那样字节级的开销。

要创建Web Socket，先实现一个WebSocket对象并传入要连接的URL:

var socket = new WebSocket("ws://www.example.com/")

Web Socket打开之后，就可以通过连接发送和接收数据。要向服务器发送数据，使用send()方法并传入任意字符串，例如：

socket.send("Hello World");

对于复杂的数据结构，在通过连接发送前，必须进行序列化:

//将数据序列化为一个JSON字符串，再发送到服务器
const message = {
  name: "James",
  age: "2019",
  date: "2019-01-01"
}
socket.send(JSON.stringify(message));

接下来，服务器要读取其中的数据，就要解析接收的JSON字符串。当服务器向客户端发来消息时，WebSocket对象就会触发message事件。

socket.onmessage = function(event) {
 const data = event.data;
 
 //处理数据
}

要关闭Web Socket连接，可以在任何时候调用close()方法。

socket.close();

通过地理定位(geolocation)API，JavaScript代码能够访问到用户的当前位置信息。当然，访问之前用户必须同意共享其地理位置信息。

Geolocation API在浏览器中的实现是navigator.geolocation对象，这个对象包含3个方法。第一个方法是getCurrentPosition()，调用这个方法就会触发请求用户共享地理定位信息的对话框。成功会接收到一个Position对象参数，该对象有两个属性：coords和timestamp。coords对象中将包含下列与位置相关的信息：

latitude：纬度

longitude：经度

accuracy：经、纬度坐标的精度，以米为单位

navigator.geolocation.getCurrentPosition(position => {
  drawMapAt(position.coords.latitude, position.coords.longitude);
}, error => {
  console.log("Error Code:" + error.code);
  console.log("Error Message:" + error.message);
});

如果希望跟踪用户的位置，可以使用watchPosition()方法。这个方法与getCurrentPosition()方法基本相同，第一次调用，执行成功回调或者错误回调，然后，watchPosition()就地等待系统发出位置已改变的信号（它不会自己轮询位置）。

HTML5添加的最受欢迎的功能就是元素。这个元素负责在页面中设定一个区域，然后就可以通过JavaScript动态地在这个区域中绘制图形。

元素最早是苹果公司推出的，当时主要用在其Dsahboard文件中（最新的Mac已经弃用了这个软件）。

要使用元素，必须先设置其width和height属性，指定可以绘图的区域大小。出现在开始标签和结束标签中的内容是后备信息，如果浏览器不支持元素，就会显示这些信息。

A drawing of something.

上面只是简单地介绍了下HTML5所带来的一些新特性，浅尝则止并不深入，这些新特性在平时的开发中也给我们带来了很大的便利性。

如果想深入地了解这些特性，建议去Mozilla官方网站阅读相关文档。