HTML5新特性有哪些

本文主要讲解“HTML5有哪些新功能”，感兴趣的朋友不妨看看。本文介绍的方法简单、快速、实用。让边肖带你学习“HTML5有哪些新功能”！

网络存储

它具有以下特点：

您可以通过属性和方法使用JavaScript访问web内存中的数据。

与服务器端脚本创建的cookies不同，web存储是由客户端脚本(如JavaScript)创建的。

主流网络浏览器，如Chrome、Opera、Firefox、Safari和IE8，都支持网络存储。换句话说，不需要第三方插件。

会话存储

报价：

会话存储必须用于处理机密和敏感信息，如信用卡号、社会保险号和登录证书。该信息容易受到“域名系统欺骗”的攻击，因此它不应存储一个以上的会话。"

span data-mce- font-size:16px;"=""如何创建并访问一个 sessionStorage：

script type=' text/JavaScript ' session storage . last name=' Smith '；

document . write(session storage . last name)；-脚本本地存储，数据以字符串的形式存储，并且它将继续(除非您显式删除它)。即使浏览器窗口关闭，数据也将始终存在，如果下一次访问相同的源时使用相同的浏览器，数据也将可用。本地存储旨在存储跨越多个浏览器窗口且持续时间比当前会话更长的数据。

网站允许用户自定义网页的主题和布局，并将这些设置保存在本地存储中。这样，用户可以在后续的访问中看到自己的个人网页。

span data-mce- font-size:16px;"=""如何创建和访问 localStorage：

script type=' text/JavaScript ' local storage . last name=' Smith '；

document . write(local storage . last name)；

HTML geolocation API 只有一个对象，就是 navigator.geolocation 对象。你可以将 navigator.geolocation 比作浏览器中的指南针。浏览器是否支持这个 API，还有待确认。你可以通过将以下的 if-else 写入到自己的代码中，来检测浏览器是否支持。 //CheckwhetherbrowsersupportsGeolocationAPIornotif(navigator.geolocation)//Supported{//pla

ce the geolocation code here } else // Not supported {
    alert("Oop! This browser does not support HTML5 Geolocation.");
}

getCurrentPosition（）

watchPosition（）

该 watchPosition（）方法会返回一个 watch ID，当不再需要获取位置时，可以用 watch ID 来停止 watchPositon（）方法。

• clearWatch（）方法以 watchPosition（）方法的 watch ID 作为参数，用于停止执行 watchPosition（）方法。

我们已经很熟悉拖放电脑桌面上的文件、文件夹和图标了。拖放是一种任何的桌面应用具有的强有力的也是理所当然应该具备的用户交互。使用像鼠标这样的指针设备，通过拖放来实现拷贝，插入和删除任何电脑桌面上的文件和对象。

设置元素为可拖放

• 然后，规定当元素被拖动时，会发生什么。

  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。

• 当放置被拖数据时，会发生 drop 事件。

  <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 事件 - 单向消息传递

• EventSource 对象用于接收服务器发送事件通知：

  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" 的元素中

• 在上面的 TIY 实例中，我们编写了一段额外的代码来检测服务器发送事件的浏览器支持情况：

  if(typeof(EventSource)!=="undefined")
  { // Yes! Server-sent events support! // Some code..... } else { // Sorry! No server-sent events support.. }

• 为了让上面的例子可以运行，您还需要能够发送数据更新的服务器（比如 PHP 和 ASP）。

  PHP 代码 (demo_sse.php)：

• ondragover 事件规定在何处放置被拖动的数据。

  这要通过调用 ondragover 事件的 event.preventDefault() 方法：

  event.preventDefault()

  以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过服务器发送事件，更新能够自动到达。

  <!--?<span data-mce---&gtphp 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新特性有哪些”有了更深的了解，不妨来实际操作一番吧！这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！