您好,登录后才能下订单哦!
本篇内容主要讲解“HTML5新特性有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“HTML5新特性有哪些”吧!
Web存储
它具有以下特征:
你可以通过属性和方法来使用 JavaScript 操作 web 存储器中的数据实现访问。
不像 cookies 这种由服务器端脚本创建的,web存储是由客户端脚本如 JavaScript 创建。
Web 存储在主流的 Web 浏览器中都是原生支持的,如 Chrome,Opera,Firefox,Safari 和 IE8 +。换句话说,不需要第三方插件。
会话存储
引用:
会话存储必须用于处理机密和敏感信息的网络活动,如信用卡号码,社会保险号码和登录证书。这些信息很容易受到“DNS欺骗”的攻击,所以不应该存储超过一个单个会话。”
<script type="text/javascript"> sessionStorage.lastname="Smith"; document.write(sessionStorage.lastname); <!--script>
一个网站可以让用户自定义网页的主题和布局,并在本地存储中保存这些设置。以这种方式,用户可以在后续访问中看到自己个人的网页。
<script type="text/javascript"> localStorage.lastname="Smith"; document.write(localStorage.lastname);
// Check whether browser supports Geolocation API or not if (navigator.geolocation) // Supported { // place the geolocation code here } else // Not supported { alert("Oop! This browser does not support HTML5 Geolocation."); }
getCurrentPosition()
watchPosition()
该 watchPosition()方法会返回一个 watch ID,当不再需要获取位置时,可以用 watch ID 来停止 watchPositon()方法。
设置元素为可拖放
dataTransfer.setData( ) 方法设置被拖数据的数据类型和值:
function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); }
<span data-mce- "="">本文介绍的 HTML5 一些新特性就到这里,在后面一篇文章中,我们将会学习到 HTML5 的 Canvas 知识。。学习了 HTML5 的新特性,能够帮助我们在进行前端开发时更加顺利,同时也可以借助一些前端开发工具。Wijmo 是一款大而全面的前端 HTML5 / JavaScript UI控件集,能为企业应用提供更加灵活的操作体验,现已全面支持Angular 2。
<span data-mce- font-size:16px;"="">在上面的例子中,ondrop 属性调用了一个函数,drop(event):
function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); }
Server-Sent 事件 - 单向消息传递
var source=new EventSource("demo_sse.php"); source.onmessage=function(event) { document.getElementById("result").innerHTML+=event.data + " "; };
创建一个新的 EventSource 对象,然后规定发送更新的页面的 URL(本例中是 "demo_sse.php")
当 onmessage 事件发生时,把已接收的数据推入 id 为 "result" 的元素中
if(typeof(EventSource)!=="undefined") { // Yes! Server-sent events support! // Some code..... } else { // Sorry! No server-sent events support.. }
PHP 代码 (demo_sse.php):
这要通过调用 ondragover 事件的 event.preventDefault() 方法:
event.preventDefault()
以前也可能做到这一点,前提是网页不得不询问是否有可用的更新。通过服务器发送事件,更新能够自动到达。
<!--?<span data-mce--->php header('Content-Type: text/event-stream'); header('Cache-Control: no-cache'); $time = date('r'); echo "data: The server time is: {$time}\n\n"; flush(); ?>
<span data-mce- font-size:16px;"="">ASP 代码 (VB) (demo_sse.asp):
<% Response.ContentType="text/event-stream" Response.Expires=-1 Response.Write("data: " & now()) Response.Flush() %>
把报头 "Content-Type" 设置为 "text/event-stream"
输出发送日期(始终以 "data: " 开头)
到此,相信大家对“HTML5新特性有哪些”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。