HTML学习笔记之HTML5新特性

2024-04-04 22:21:00

1、拖放
2、画布
3、可伸缩矢量图形
4、地理定位
5、Web 存储
6、应用缓存
7、Web Worker

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();
}

码农公寓