1、拖放

拖放是一种常见的特性,用于抓取对象以后拖到另一个位置,它是 HTML5 标准的组成部分,由于拖放属性需要设置的内容较多,我们先从一个例子入手,再对例子进行详细的分析,以下的例子允许我们将 img 元素拖动放置在 div 元素中

<!DOCTYPE HTML>
<html>

<head>
<script type="text/javascript">
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));
}
</script>
</head>

<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="img1" src="" draggable="true" ondragstart="drag(event)" />
</body>

</html>

(1)设置元素为可拖放

为 <img> 标签设置 draggable 属性,并将其值设置为 true,表示 img 元素可以被拖动

(2)定义元素被拖动时的行为

为 <img> 标签设置 ondragstart 属性,该属性调用方法 drag(ev)

drag(ev) 使用 ev.dataTransfer.setData("Text",ev.target.id) 设置被拖放元素的数据类型和值,这里被拖放元素是 img 元素,数据类型是 Text,值是被拖放元素的 id ("img1")

(3)定义元素被放置的位置

为 <div> 标签设置 ondragover 属性,该属性调用方法 allowDrop(ev)

allowDrop(ev) 使用 ev.preventDefault() 阻止 allowDrop 事件的默认行为(不允许将元素放置到其他元素中)

(4)定义元素被放置时的行为

为 <div> 标签设置 ondrop 属性,该属性调用方法 drop(ev)

drop(ev) 首先通过 ev.preventDefault() 阻止 drop 事件的默认行为(以链接的形式打开)

然后通过 ev.dataTransfer.getData("Text") 获得数据,这里的数据是指 img 元素的 id ("img1")

最后通过 ev.target.appendChild(document.getElementById(data)) 将被拖动元素追加到目标元素

2、画布

我们可以利用 <canvas> 标签创建画布,但是画布只是一个图形容器,本身没有绘图能力,因此还需要使用 JavaScript 在画布上绘制图形

(1)创建 canvas

我们必须在 <canvas> 标签中定义元素的 id、width 和 height

<canvas id="myCanvas" width="200" height="100">
Your browser does not support the canvas element.
</canvas>

(2)创建 context

使用 id 寻找 canvas 元素

var cv=document.getElementById("myCanvas");

为 canvas 元素创建 context 对象

var ct=cv.getContext("2d"); 

(3)绘制图像

context 是内建的 HTML5 对象,拥有多种绘制线段、矩形、圆形以及添加图像的方法

绘制线段

ct.moveTo(20,20);
ct.lineTo(180,80);
ct.stroke();

绘制矩形

ct.fillStyle="#FF0000";
ct.fillRect(10,10,180,80);

绘制圆形

ct.fillStyle="#FF0000";
ct.beginPath();
ct.arc(60,40,20,0,Math.PI*2,true);
ct.closePath();
ct.fill();

添加图像

var img=new Image()
img.src="......"
cxt.drawImage(img,0,0);

3、可伸缩矢量图形

可伸缩矢量图形(Scalable Vector Graphics,SVG)使用 XML 格式定义矢量图形,它可以在图像质量不下降的情况下被放大,为了便于操作,SVG 有一些预定义的形状元素:

  • 矩形 <rect>
  • 圆形 <circle>
  • 椭圆 <ellipse>
  • 线 <line>
  • 折线 <polyline>
  • 多边形 <polygon>
  • 路径 <path>

下面的例子演示将 SVG 元素直接嵌入 HTML 页面中

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="200">
    <polygon points="100,10 40,180 190,60 10,60 160,180"
    style="fill:red;stroke:blue;stroke-width:2;fill-rule:evenodd;" />
</svg>

4、地理定位

HTML5 Geolocation API 用于获得用户的地理位置,但是需要注意该特性可能侵犯用户隐私,除非用户同意,否则用户位置信息不可用

<!DOCTYPE html>
<html>
<body>
<p id="demo">点击按钮,获得坐标:</p>
<button onclick="getLocation()">按钮</button>

<script>
var x=document.getElementById("demo");

function getLocation()
{
    <!-- 检测是否支持地理定位 -->
    if (navigator.geolocation)
    {
        <!-- 如果支持,则调用 getCurrentPosition 方法 -->
        navigator.geolocation.getCurrentPosition(showPosition,showError);
    }
    else
    {
        <!-- 若不支持,则显示错误信息 -->
        x.innerHTML="Geolocation is not supported by this browser.";
    }
}

<!-- 用于 getCurrentPosition 的第一个参数,显示位置信息 -->
function showPosition(position)
{
    x.innerHTML="Latitude: " + position.coords.latitude + "<br />" +
    "Longitude: " + position.coords.longitude;
}

<!-- 用于 getCurrentPosition 的第二个参数,显示错误信息 -->
function showError(error)
{
    switch(error.code)
    {
        case error.PERMISSION_DENIED:
            x.innerHTML="User denied the request for Geolocation."
            break;
        case error.POSITION_UNAVAILABLE:
            x.innerHTML="Location information is unavailable."
            break;
        case error.TIMEOUT:
            x.innerHTML="The request to get user location timed out."
            break;
        case error.UNKNOWN_ERROR:
            x.innerHTML="An unknown error occurred."
            break;
    }
}
</script>
</body>
</html>

5、Web 存储

HTML5 出现之前,在客户端存储数据都是通过 cookie 完成的,但是 cookie 在处理大量数据时速度很慢而且效率不高,因此,在 HTML5 中可以使用 JavaScript 存储和访问数据,它提供两种新方法:

(1)localStorage

将数据保存在客户端硬件设备上,可以长期储存

  • 设置值
localStorage.setItem(key,value);

localStorage.key = "value";

localStorage["key"] = "value";
  • 获取值
localStorage.getItem(key,value):

localStorage.key;

localStorage["key"];
  • 清除值
localStorage.remove(key);

localStorage.clear();

(2)sessionStorage

session 是指从用户进入网站到用户关闭网站的过程,而 sessionStorage 是针对 session 的数据储存,session 的有效期即为数据储存的有效期

sessionStorage 与 localStorage 区别在于一个是临时储存,一个是长期储存,另外,sessionStorage 的方法与 localStorage 的方法相似,这里不再多加介绍

6、应用缓存

在 HTML5 中,通过创建 cache manifest 文件,可以对数据进行缓存,为 Web 应用带来如下优势:

  • 离线浏览
  • 提高客户端速度:已经进行缓存的资源加载更快
  • 减少服务器负载:进行缓存之后,浏览器只从服务器下载新的资源

(1)创建缓存

  • 定义 manifest 属性

manifest 属性规定当用户访问页面时对页面进行缓存,它接受任何合法的 URL 用于指定 manifest 文件地址,如果没有指定 manifest 属性,则页面不会被缓存,除非在 manifest 文件中直接指定该页面

<!DOCTYPE HTML>
<html manifest="demo.appcache">
    ......
</html>
  • 定义 manifest 文件

manifest 文件用于告知浏览器被缓存的内容以及不被缓存的内容,建议的拓展名是 .appcache,文件可以划分为三个部分:

CACHE MANIFEST:在此标题下列出的文件将在首次下载后进行缓存,这些文件离线时可用

NETWORK:在此标题下列出的文件需要与服务器连接,不会被缓存,这些文件离线时不可用

FALLBACK:在此标题下列出的文件规定当页面无法访问时的回退页面

CACHE MANIFEST
# 2019-02-13 v1.0.0
/main.js

NETWORK:
# 星号表示所有其他资源都需要网络连接
*

FALLBACK:
# 第一个 URL 表示资源,第二个 URL 表示替补资源
/html5/ /404.html

注意:使用 manifest 文件需要在服务器上配置正确的 MIME-type —— "text/cache-manifest"

(2)更新缓存

应用一旦被缓存,会一直保持下去,直至以下情况发生:

  • 清空浏览器缓存
  • 修改 manifest 文件:在 manifest 文件中,以 “#” 开头的表示注释,但是其中一行用于表示日期和版本号,当需要更新缓存时,更新注释行中的日期和版本号即可

注意:一旦文件被缓存,浏览器会继续显示已缓存的版本,即使修改了服务器上的文件。因此,为了确保浏览器可以显示最新的内容,在修改服务器上的文件后,还需要更新 manifest 文件以更新缓存

7、Web Worker

我们知道,当 HTML 页面执行 JavaScript 时,页面是不可响应的,这样就使得页面性能大大降低,而 Web Worker 正好可以解决这样的问题,它可以在后台执行 JavaScript

var w;

function startWorker() // 创建 Web Worker
{
    if(typeof(Worker)!=="undefined") // 检测浏览器是否支持 Web Worker
    {
        // 浏览器支持 Web Worker
        // 创建一个 Web Worker 对象,执行 filename.js 文件中的 JavaScript
        w=new Worker("filename.js");
        // 添加一个 onmessage 事件监听器,当传递消息时,执行事件监听器中的代码
        w.onmessage = function (event) { }
    }
    else
    {
        // 浏览器不支持 Web Worker
        // 打印错误信息
    }
}

function stopWorker() // 终止 Web Worker
{
    w.terminate();
}

参考资料:
http://www.w3school.com.cn/html/index.asp
http://www.w3school.com.cn/html5/index.asp

HTML学习笔记之HTML5新特性的更多相关文章

  1. C++ 学习笔记(一些新特性总结3)

    C++ 学习笔记(一些新特性总结3) public.protected 和 private 继承 public 继承时,基类的存取限制是不变的. class MyClass { public: // ...

  2. web全栈架构师[笔记] — 03 html5新特性

    HTML5新特性 一.geolocation PC端 精度比较低 通过IP库定位 移动端 通过GPS window.navigator.geolocation 单次 getCurrentPositio ...

  3. CSS学习笔记之CSS3新特性

    目录 1.边框 2.背景 3.文本 4.字体 5.转换 6.过渡 7.动画 8.多列 9.自定义尺寸 CSS 用于控制网页的样式和布局,而 CSS3 是最新的 CSS 标准,这篇文章将着重介绍 CSS ...

  4. Groovy学习笔记-Java 5新特性支持

    1.枚举enum enum CoffeeSize{ SHORT, SMALL, MEDIUM, LARGE, MUG } def orderCoffee(size){ print "Coff ...

  5. html5新特性

    这一篇博文不会告诉你怎么去使用html5的新特性,只会给你总结一下新特性------对于好学的人可以把这篇文章当做一个目录 对于初接触的人来说是一个导向 对于已经接触过的人来说是一个检测你掌握程度的检 ...

  6. 基于.net的分布式系统限流组件 C# DataGridView绑定List对象时,利用BindingList来实现增删查改 .net中ThreadPool与Task的认识总结 C# 排序技术研究与对比 基于.net的通用内存缓存模型组件 Scala学习笔记:重要语法特性

    基于.net的分布式系统限流组件   在互联网应用中,流量洪峰是常有的事情.在应对流量洪峰时,通用的处理模式一般有排队.限流,这样可以非常直接有效的保护系统,防止系统被打爆.另外,通过限流技术手段,可 ...

  7. 转: HTML5新特性之Mutation Observer

    转: HTML5新特性之Mutation Observer Mutation Observer是什么 Mutation Observer(变动观察器)是监视DOM变动的接口.当DOM对象树发生任何变动 ...

  8. HTML5新特性之CSS+HTML5实例

    1.新的DOCTYPE和字符集 HTML5的一项准则就是化繁为简,Web页面的DOCTYPE被极大的简化. <!DOCTYPE html> 同时字符集声明也被简化了: <meta c ...

  9. HTML5新特性:FileReader 和 FormData

    连接在这里: HTML5新特性:FileReader 和 FormData

随机推荐

  1. Java之正則表達式【使用语法】

    认为好就顶一个!! ! ! 3.正則表達式 用一些特殊的有意义的字符组成的字符串(死记) 原子:正則表達式的最基本组成单位 正則表達式特殊意义的字符:   .  *  +  ?不能单独表示它们,假设非 ...

  2. bzoj3894: 文理分科(还是那道最小割)

    3894: 文理分科 题目:传送门 感谢波老师没有来D飞我,让我做出了这题... 题解: 这题其实和我做的上一题(bzoj2132)很像,所以就不写题意了. 依然是那最小割... 这题给出了四个利益矩 ...

  3. extern_c

    (1)    使用extern和包含头文件来引用函数有什么区别呢?extern的引用方式比包含头文件要简洁得多!extern的使用方法是直截了当的,想引用哪个函数就用extern声明哪个函数.这大概是 ...

  4. CodePlus 2017 12 月赛

    这场比赛跟个zz一样 div1卡在了同余方程上 心态崩了去做div2 然后被T1搞崩了 T1: 大模拟 比较像配平方程式 思路: 但是未知物质每种元素系数不能≥10 且不能为空 (如CO2+?=CO2 ...

  5. CF 1016 C —— 思路

    题目:http://codeforces.com/contest/1016/problem/C 一定是先蛇形走在回形走,所以预处理.暴力即可: 自己一开始写了一个,总是WA,又看了看TJ写法: 模仿一 ...

  6. bzoj3112

    http://www.lydsy.com/JudgeOnline/problem.php?id=3112 模板题...模板又打错了... #include<bits/stdc++.h> u ...

  7. bzoj3527

    http://www.lydsy.com/JudgeOnline/problem.php?id=3527 今天肿么这么颓废啊...心态崩了 首先我们得出Ei=Fi/qj,然后我们设f[i]=1/i/i ...

  8. SpringMVC+MyBaties关于上传(跟新)图片的问题

    /** * 方法名:uploadPhoto * 描 述:TODO(上传图片) * 作 者:池彦龙 * 时 间:2017/03/30 * 返回类型: * 参 数: * 异 常: */ Controlle ...

  9. openstack instance resize to

    Icehouse resize No valid host was found Hi all!! We're currently experimenting an error that's it's ...

  10. E20170627-gg

    ring   n. 戒指,指环; 铃声,钟声; 环形物; 拳击场;   vi. 按铃,敲钟; 回响; 成环形; rear   n. 后部,背面,背后; 臀部; (舰队或军队的) 后方,后尾,殿后部队; ...