本文将为大家详细介绍“html5的新特性是什么”，内容步骤清晰详细，细节处理妥当，而小编每天都会更新不同的知识点，希望这篇“html5的新特性是什么”能够给你意想不到的收获，请大家跟着小编的思路慢慢深入，具体内容如下，一起去收获新知识吧。
创新互联专注为客户提供全方位的互联网综合服务，包含不限于网站设计、成都网站建设、怀来网络推广、小程序开发、怀来网络营销、怀来企业策划、怀来品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；创新互联为所有大学生创业者提供怀来建站搭建服务，24小时服务热线：028-86922220，官方网址：www.cdcxhl.com
html是什么
html的全称为超文本标记语言，它是一种标记语言，包含了一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体，html文本是由html命令组成的描述性文本，html命令可以说明文字，图形、动画、声音、表格、链接等，主要和css+js配合使用并构建优雅的前端网页。
html5的新特性有哪些？
一、html5新特性之用于绘画的canvas元素
canvas 元素用于在网页上绘制图形，画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
Your browser does not support the canvas element.
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="/i/eg_flower.png"
cxt.drawImage(img,0,0);
下面来说一下关于svg的内容：svg是用于描述二维矢量图形的一种图形格式。
svg有三种用法：
把svg直接当成图片放在网页上。
svg实现动画。
svg图片的交互和滤镜效果。
说明：
（1）Canvas 通过 JavaScript 来绘制 2D 图形。
（2）Canvas 是逐像素进行渲染的。
（3）在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包 括任何或许已被图形覆盖的对象。
（4）svg是一种使用 XML 描述 2D 图形的语言。
（5）svg基于XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
（6）在svg中，每个被绘制的图形均被视为对象。如果svg对象的属性发生变化，那么浏览器能够自动重现图形。
更多关于canvas和svg的内容可以参考：HTML5 canvas和HTML5 内联SVG
二、html5新特性之更加丰富强大的表单
html5 拥有多个新的表单 Input 输入类型。这些新特性提供了更好的输入控制和验证。
html5 也新增以下表单元素：
：提供一种验证用户的可靠方法，标签规定用于表单的密钥对生成器字段。
HTML5 新增的表单属性：
placehoder 属性：简短的提示在用户输入值前会显示在输入域上。即我们常见的输入框默认提示，在用户输入后消失。
required 属性：是一个 boolean 属性。要求填写的输入域不能为空
pattern 属性：描述了一个正则表达式用于验证 元素的值。
min 和 max 属性：设置元素最小值与最大值。
step 属性：为输入域规定合法的数字间隔。
height 和 width 属性：用于 image 类型的 标签的图像高度和宽度。
autofocus 属性：是一个 boolean 属性。规定在页面加载时，域自动地获得焦点。
multiple 属性：是一个 boolean 属性。规定 元素中可选择多个值。
三、html5新特性之用于媒介的video和audio元素
1、html5提供了播放音频文件的标准，即使用
实例：
您的浏览器不支持 audio 元素。
说明：
（1）control 属性供添加播放、暂停和音量控件。
（2）在 之间你需要插入浏览器不支持的
（3）
（4）
2、html5提供了一种通过video元素来包含视频的标准方法。
您的浏览器不支持Video标签。
说明：
（1）control 提供了 播放、暂停和音量控件来控制视频。也可以使用dom操作来控制视频的播放暂停，如 play() 和 pause() 方法。
（2）video元素提供了width和height属性控制视频的尺寸.如果设置的高度和宽度，所需的视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。
（3）标签之间插入的内容是提供给不支持video元素的浏览器显示的。
（4）video 元素支持多个source 元素. 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式（ MP4, WebM, 和 Ogg）。
四、html5新特性之html5地理定位
HTML5 Geolocation（地理定位）用于定位用户的位置。
window.navigator.geolocation {
getCurrentPosition: fn 用于获取当前的位置数据
watchPosition: fn 监视用户位置的改变
clearWatch: fn 清除定位监视
} 获取用户定位信息：
navigator.geolocation.getCurrentPosition(
function(pos){
console.log('用户定位数据获取成功')
//console.log(arguments);
console.log('定位时间：',pos.timestamp)
console.log('经度：',pos.coords.longitude)
console.log('纬度：',pos.coords.latitude)
console.log('海拔：',pos.coords.altitude)
console.log('速度：',pos.coords.speed)
}, //定位成功的回调
function(err){
console.log('用户定位数据获取失败')
//console.log(arguments);
} //定位失败的回调
)五、html5新特性之html5拖放
拖放（Drag 和 drop）是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放；拖放的过程分为源对象和目标对象。源对象是指你即将拖动元素，而目标对象则是指拖动之后要放置的目标位置。
想要了解更多拖放中的内容可以参考：HTML拖放
下面给出一个实例：
#div1 {width:488px;height:70px;padding:10px;border:1px solid #aaaaaa;}
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
请把图片拖放到矩形中：
（2）sessionStorage - 针对一个 session 的数据存储：sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。
web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。
WebSocket是HTML5开始提供的一种在单个
TCP 连接上进行全双工通讯的协议。在WebSocket
API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。浏览器通过
JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP
连接直接交换数据。当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。
如果你能读到这里，小编希望你对“html5的新特性是什么”这一关键问题有了从实践层面最深刻的体会，具体使用情况还需要大家自己动手实践使用过才能领会，如果想阅读更多相关内容的文章，欢迎关注创新互联行业资讯频道！
