摘要：年月日，万维网联盟宣布，标准规范制定完成。作为一种超文本标记语言，已经成为了上使用的通用标记语言，而在这次的规范中，为开发者带来了一些令人兴奋的新特性。
2014年10月29日，W3C(万维网联盟)宣布，HTML5标准规范制定完成。作为一种超文本标记语言，HTML已经成为了Web上使用的通用标记语言，而在这次HTML5的规范中，为开发者带来了一些令人兴奋的新特性。
下面简单地介绍下这些新特性，包括但不限于：
语义化标签
增强型表单
DOM扩展
原生拖放
媒体元素
Web Socket
Web Storage
地理位置
canvas绘图
语义化标签HTML 语义化是指仅仅从 HTML 元素上就能看出页面的大致结构，比如需要强调的内容可以放在 标签中，而不是通过样式设置 标签去做。不同浏览器对 HTML 元素的解析可能有差异，HTML 语义化便是在抛开样式之后，页面能有一个友好的展示效果。我们力求让页面有良好的结构，让页面的元素有含义，同时利于被搜索引擎解析，利于 SEO。HTML 语义化的建议：
少使用无意义的 在 标签中设置 for 属性和对应的 关联起来； 设置
同时，还添加了placeholder、required、pattern、min、max、height、width等表单属性。 placeholder 提供对输入域的提示值 required 规定表单提交前输入域是否必填 pattern 规定用于验证input域的正则表达式 min 规定输入域允许的最小值 max 规定输入域允许的最大值 multiple 输入域可以选择多个值，适用于email和file类型 HTML5标准的表单中添加了很多功能，虽然这些功能都是之前常用的功能，但对于开发者来说，这确实是一件很不错的事情。 HTML5增加的getElementByClassName()方法是最受人欢迎的一个方法，可以通过document对象及所有HTML元素调用该方法。 使用这个方法可以更方便地为带有某些类的元素添加事件处理程序，而不必再局限于使用ID或标签名(getElementsByTagName)。 HTML5规定可以为元素添加非标准的属性，但要加前缀data-，为元素提供与渲染无关的信息。 可以通过元素的dataset属性访问自定义属性的值。 HTML5还为DOM作了其他扩展，包括classList属性、焦点管理、HTMLDocument变化、字符集属性、插入标记等。 最早在网页中引入JavaScript拖放功能的是IE4，HTML5以IE的实例为基础制定了拖放规范。拖放事件可以控制拖放相关的各个方面，拖动某元素时，将依次触发下列事件： dragstart drag dragend 拖放通常伴随着数据变化，为了在拖放操作时实现数据变换，IE5引入了dataTransfer对象，它是事件对象的一个属性，用于从被拖动元素向放置目标传递字符串格式的数据。dataTransfer对象有两个主要方法：getData()和setData()，getData()可以获取由setData()保存的值。 同时，还能通过dataTransfer来确定被拖动的元素及作为放置目标的元素能够接收什么操作。 默认情况下，图像、链接和文本是可以拖动的，HTML5为所有HTML元素规定了一个draggable属性，表示元素是否可以拖动。 HTML5新增了两个与媒体相关的标签，让开发人员不必依赖任何插件就能在网页中嵌入跨浏览器的音频和视频内容，这两个标签就是和。 使用这两个元素时，至少要在标签中包含src属性，指向要加载的媒体文件。并非所有的浏览器都支持所有媒体格式，所以可以指定多个不同的媒体来源，此时使用 和包含很多属性，包括autuplay、controls、src等，还可以触发很多事件，让开发人员在使用少量HTML和JavaScript的情况下编写出自定义的音频/视频播放器。 Web Storage的目的是克服由cookie带来的一些限制，当数据需要被严格控制在客户端上时，无须持续地将数据发回服务器。Web Storage的两个主要目标是： 提供一种在cookie之外存储会话数据的途径 提供一种存储大量可以跨会话存在的数据的机制 Web Storage常用的两个对象分别是localStorage和sessionStorage。 sessionStorage对象存储某个特定会话的数据，该数据只保持到浏览器关闭。因为sessionStorage绑定于某个服务器会话，所以文件在本地运行时是不可用的。下面展示了怎么使用sessionStorage: localStorage对象在HTML5规范中作为持久保存客户端数据的方案，目的是跨越会话存储对象，但有特定的访问限制。要访问同一个localStorage对象，页面必须来自同一个域名(子域名无效)，使用同一种协议，在同一个端口上。 与其他客户端数据存储方案类似，Web Storage同样也有限制，这些限制因浏览器而异。对于localStorage和sessionStorage，有的浏览器会设置每个来源5MB的限制，有的浏览器会设置2.5M的限制。 Web Sockets的目标是在一个多带带的持久连接上提供全双工、双向通信。使用标准的HTTP服务器无法实现Web Sockets，只有支持这种协议的专门服务器才能正常工作。 未加密的连接不再是http://而是ws://，加密的连接也不再是https://而是wss://。使用自定义协议而不是HTTP协议的好处是，能够在客户端和服务器之间发送非常少量的数据，而不必担心HTTP那样字节级的开销。 要创建Web Socket，先实现一个WebSocket对象并传入要连接的URL: Web Socket打开之后，就可以通过连接发送和接收数据。要向服务器发送数据，使用send()方法并传入任意字符串，例如： 对于复杂的数据结构，在通过连接发送前，必须进行序列化: 接下来，服务器要读取其中的数据，就要解析接收的JSON字符串。当服务器向客户端发来消息时，WebSocket对象就会触发message事件。 要关闭Web Socket连接，可以在任何时候调用close()方法。 通过地理定位(geolocation)API，JavaScript代码能够访问到用户的当前位置信息。当然，访问之前用户必须同意共享其地理位置信息。 Geolocation API在浏览器中的实现是navigator.geolocation对象，这个对象包含3个方法。第一个方法是getCurrentPosition()，调用这个方法就会触发请求用户共享地理定位信息的对话框。成功会接收到一个Position对象参数，该对象有两个属性：coords和timestamp。coords对象中将包含下列与位置相关的信息： latitude：纬度 longitude：经度 accuracy：经、纬度坐标的精度，以米为单位 如果希望跟踪用户的位置，可以使用watchPosition()方法。这个方法与getCurrentPosition()方法基本相同，第一次调用，执行成功回调或者错误回调，然后，watchPosition()就地等待系统发出位置已改变的信号（它不会自己轮询位置）。 HTML5添加的最受欢迎的功能就是元素。这个元素负责在页面中设定一个区域，然后就可以通过JavaScript动态地在这个区域中绘制图形。 元素最早是苹果公司推出的，当时主要用在其Dsahboard文件中（最新的Mac已经弃用了这个软件）。 要使用元素，必须先设置其width和height属性，指定可以绘图的区域大小。出现在开始标签和结束标签中的内容是后备信息，如果浏览器不支持元素，就会显示这些信息。 上面只是简单地介绍了下HTML5所带来的一些新特性，浅尝则止并不深入，这些新特性在平时的开发中也给我们带来了很大的便利性。 如果想深入地了解这些特性，建议去Mozilla官方网站阅读相关文档。 文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。 转载请注明本文地址：https://www.ucloud.cn/yun/106534.html、标签；
//取得类中包含"username"和"current"的元素
var allCurrentUsernames = document.getElementByClassName("username current")
//取得id为"myDiv"的元素中带有类名"selected"的所有元素
var selected = document.getElementById("myDiv").getElementsByClassName("selected")
var div = document.getElementById("div")
//取得自定义属性的值
var age = div.dataset.age;
var name = div.dataset.name;
//设置和接收文本数据
event.dataTransfer.serData("name", "James")
var name = event.dataTransfer.getData("name")
媒体元素
James
sessionStorage.setItem("name", "James");
var name = sessionStorage.getItem("name")
localStorage.setItem("name", "James");
var name = localStorage.getItem("name")
var socket = new WebSocket("ws://www.example.com/")
socket.send("Hello World");
//将数据序列化为一个JSON字符串，再发送到服务器
const message = {
name: "James",
age: "2019",
date: "2019-01-01"
}
socket.send(JSON.stringify(message));
socket.onmessage = function(event) {
const data = event.data;
//处理数据
}
socket.close();
地理位置
navigator.geolocation.getCurrentPosition(position => {
drawMapAt(position.coords.latitude, position.coords.longitude);
}, error => {
console.log("Error Code:" + error.code);
console.log("Error Message:" + error.message);
});
结语
摘要：看到美团用了，搜索了下，发现这个文章，就转了下来。已经火了一段时间了，相信作为相关开发工程师，肯定或多或少的了解和尝试过一些的特性和编程。还记得以前我们介绍过的新标签。作为未来前端开发技术的潮流和风向标，绝对不容忽视。 看到美团用了，搜索了下，发现这个文章，就转了下来。 HTML5已经火了一段时间了，相信作为web相关开发工程师，肯定或多或少的了解和尝试过一些HTML5的特性和编程。还...
摘要：前端知识点总结新特性新的语义标签增强型表单音频和视频绘图绘图地理定位拖动增强型表单新新的表单元素新特性数据列表本身不可见为提供输入建议列表新特性进度条左右晃动进度条具有指定进度值进度条新特性刻度尺用于标示一个值所值的范围不 前端知识点总结——H5 1.html5新特性 (1)新的语义标签 (2)增强型表单* (3)音频和视频 (4)Canvas绘图 (5)SVG绘图 (6)地...
摘要：前端知识点总结新特性新的语义标签增强型表单音频和视频绘图绘图地理定位拖动增强型表单新新的表单元素新特性数据列表本身不可见为提供输入建议列表新特性进度条左右晃动进度条具有指定进度值进度条新特性刻度尺用于标示一个值所值的范围不 前端知识点总结——H5 1.html5新特性 (1)新的语义标签 (2)增强型表单* (3)音频和视频 (4)Canvas绘图 (5)SVG绘图 (6)地...
摘要：是对标准的第五次修订。新特性语义特性赋予网页更好的意义和结构文件类型声明仅有一型。新的属性用于与用于用于。索引数据库从本质上说，允许用户在浏览器中保存大量的数据。 HTML5 是对 HTML 标准的第五次修订。其主要的目标是将互联网语义化，以便更好地被人类和机器阅读，并同时提供更好地支持各种媒体的嵌入。HTML5 的语法是向后兼容的。现在国内普遍说的 H5 是包括了 CSS3，Java...
摘要：是对标准的第五次修订。新特性语义特性赋予网页更好的意义和结构文件类型声明仅有一型。新的属性用于与用于用于。索引数据库从本质上说，允许用户在浏览器中保存大量的数据。 HTML5 是对 HTML 标准的第五次修订。其主要的目标是将互联网语义化，以便更好地被人类和机器阅读，并同时提供更好地支持各种媒体的嵌入。HTML5 的语法是向后兼容的。现在国内普遍说的 H5 是包括了 CSS3，Java...
摘要：是对标准的第五次修订。新特性语义特性赋予网页更好的意义和结构文件类型声明仅有一型。新的属性用于与用于用于。索引数据库从本质上说，允许用户在浏览器中保存大量的数据。 HTML5 是对 HTML 标准的第五次修订。其主要的目标是将互联网语义化，以便更好地被人类和机器阅读，并同时提供更好地支持各种媒体的嵌入。HTML5 的语法是向后兼容的。现在国内普遍说的 H5 是包括了 CSS3，Java...
阅读 2325·2021-11-22 09:34
阅读 659·2021-11-19 11:34
阅读 2658·2021-10-14 09:42
阅读 1106·2021-09-22 15:27
阅读 2241·2021-09-07 09:59
阅读 1461·2021-08-27 13:13
阅读 3282·2019-08-30 11:21
阅读 644·2019-08-29 18:35
