html5的新特性是什么-创新互联

本文将为大家详细介绍“html5的新特性是什么”，内容步骤清晰详细，细节处理妥当，而小编每天都会更新不同的知识点，希望这篇“html5的新特性是什么”能够给你意想不到的收获，请大家跟着小编的思路慢慢深入，具体内容如下，一起去收获新知识吧。

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有三种用法：

1. 把svg直接当成图片放在网页上。

2. svg实现动画。

3. 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));
}



请把图片拖放到矩形中：