整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML5中增加了拖放api

HTML5中新增了关于拖放的API,通过拖放API可以放HTML页面任意元素变成可拖动的。其实很简单,只有两个方面:一个是在某个元素上按下鼠标不松开,移动鼠标,这就是拖的动作,第二个是松开鼠标,将元素放到某一位置,这个是放的动作。

在HTML5中<img.../>元素默认是可拖动的,而<a.../>元素只要设置href属性,也是默认可以拖动的。

对于普通元素而言,如果可以把他变成可拖动的,只需要把该元素的draggable属性设为true即可。但是仅仅设置这个还不行,只表示元素可拖动,并没有携带元素,用户看不到效果。如果需要拖动操作携带数据,应该为被拖动元素的ondragstart事件指定监听器。

上面这些拖动中都带了“禁止”标志,拖到目的地不能被接受,是因为拖动元素被“拖动”document对象时,document对象默认阻止了拖动事件。因此不能接受放。

只要监听document的ondrop方法,用户把“<div.../>元素”放到document中,通过JavaScript代码把该元素移动到该位置即可。

TML5的无刷新技术。在html5出来前,实现无刷新前进后退通常是结合location.hash+onhashchange事件来实现的,有了html5,可以利用html5 history api来实现加载新页面!

实现无刷新前进后退通常是结合location.hash+onhashchange事件来实现的

History对象原来有三个方法,一个属性。

history.length:历史列表中的网址数。

history.back():加载历史列表前一个网址。

history.forward():加载历史列表后一个网址。

history.go(num):加载历史列表中的某个页面,参数为相对当前页面,跳转的次数。go(-1)与back()效果相同,go(1)与forward()效果相同。go(-2)与单击两次后退按钮执行的操作一样。

h5 history api实现无刷新跳转

HTML4.0、XHTML到HTML5,从某种意义上讲,这是HTML描述性标记语言的一种更加规范的过程。因此,HTML5并没有给开发者带来多大的冲击。但HTML5增加了很多非常实用的新功能和新特性,下面具体介绍HTML5的一些优势。

1、 解决了跨浏览器问题

在HTML5之前,各大浏览器厂商为了争夺市场占有率,会在各自的浏览器中增加各种各样的功能,并且不具有统一的标准。使用不同的浏览器,常常看到不同的页面效果。在HTML5中,纳入了所有合理的扩展功能,具备良好的跨平台性能。针对不支持新标签的老式IE浏览器,只需简单地添加JavaScript代码就可以使用新的元素。推荐了解黑马程序员web前端课程。

2、新增了多个新特性

HTML语言从1.0到5.0经历了巨大的变化,从单一的文本显示功能到图文并茂的多媒体显示功能,许多特性经过多年的完善,已经发展成为一种非常重要的标记语言。HTML5新增的特性如下。

● 新的特殊内容元素,比如header、nav、section、article、footer。

● 新的表单控件,比如calendar、date、time、email、url、search。

● 用于绘画的canvas元素。

● 用于媒介回放的video和audio元素。

● 对本地离线存储的更好支持。

● 地理位置、拖曳、摄像头等API。


HTML5标准的制定是以用户优先为原则的,一旦遇到无法解决的冲突时,规范会把用户放在第一位。另外,为了增强HTML5的使用体验,还加强了以下两方面的设计。

● 安全机制的设计

为确保HTML5的安全,在设计HTML5时做了很多针对安全的设计。HTML5引入了一种新的基于开源的安全模型,该模型不仅易用,而且对不同的API(Application Programming Interface,应用程序编程接口)都通用。使用这个安全模型,不需要借助于任何不安全的hack就能跨域进行安全对话。

● 表现和内容分离

表现和内容分离是HTML5设计中的另一个重要内容。实际上,表现和内容的分离早在HTML4.0中就有设计,但是分离的并不彻底。为了避免可访问性差、代码高复杂度、文件过大等问题,HTML5规范中更细致、清晰地分离了表现和内容。但是考虑到HTML5的兼容性问题,一些陈旧的表现和内容的代码还是可以兼容使用的。

4. 化繁为简的优势

作为当下流行的通用标记语言,HTML5尽可能地简化,严格遵循了“简单至上”的原则,主要体现在这几个方面:

● 新的简化的字符集声明;

● 新的简化的DOCTYPE;

● 简单而强大的HTML5 API;

● 以浏览器原生能力替代复杂的JavaScript代码。 为了实现这些简化操作,HTML5规范需要比以前更加细致、精确。为了避免造成误解,HTML5对每一个细节都有着非常明确的规范说明,不允许有任何的歧义和模糊出现。


喜欢记得关注一下哦。