HTML学习笔记之HTML5新特性

目录

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();
}
上一篇:jar包中MANIFEST.MF文件的Class-Path包引用


下一篇:chrome扩展程序开发之在目标页面执行自己的JS