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();
}
参考资料:
http://www.w3school.com.cn/html/index.asp
http://www.w3school.com.cn/html5/index.asp
HTML学习笔记之HTML5新特性的更多相关文章
- C++ 学习笔记(一些新特性总结3)
C++ 学习笔记(一些新特性总结3) public.protected 和 private 继承 public 继承时,基类的存取限制是不变的. class MyClass { public: // ...
- web全栈架构师[笔记] — 03 html5新特性
HTML5新特性 一.geolocation PC端 精度比较低 通过IP库定位 移动端 通过GPS window.navigator.geolocation 单次 getCurrentPositio ...
- CSS学习笔记之CSS3新特性
目录 1.边框 2.背景 3.文本 4.字体 5.转换 6.过渡 7.动画 8.多列 9.自定义尺寸 CSS 用于控制网页的样式和布局,而 CSS3 是最新的 CSS 标准,这篇文章将着重介绍 CSS ...
- Groovy学习笔记-Java 5新特性支持
1.枚举enum enum CoffeeSize{ SHORT, SMALL, MEDIUM, LARGE, MUG } def orderCoffee(size){ print "Coff ...
- html5新特性
这一篇博文不会告诉你怎么去使用html5的新特性,只会给你总结一下新特性------对于好学的人可以把这篇文章当做一个目录 对于初接触的人来说是一个导向 对于已经接触过的人来说是一个检测你掌握程度的检 ...
- 基于.net的分布式系统限流组件 C# DataGridView绑定List对象时,利用BindingList来实现增删查改 .net中ThreadPool与Task的认识总结 C# 排序技术研究与对比 基于.net的通用内存缓存模型组件 Scala学习笔记:重要语法特性
基于.net的分布式系统限流组件 在互联网应用中,流量洪峰是常有的事情.在应对流量洪峰时,通用的处理模式一般有排队.限流,这样可以非常直接有效的保护系统,防止系统被打爆.另外,通过限流技术手段,可 ...
- 转: HTML5新特性之Mutation Observer
转: HTML5新特性之Mutation Observer Mutation Observer是什么 Mutation Observer(变动观察器)是监视DOM变动的接口.当DOM对象树发生任何变动 ...
- HTML5新特性之CSS+HTML5实例
1.新的DOCTYPE和字符集 HTML5的一项准则就是化繁为简,Web页面的DOCTYPE被极大的简化. <!DOCTYPE html> 同时字符集声明也被简化了: <meta c ...
- HTML5新特性:FileReader 和 FormData
连接在这里: HTML5新特性:FileReader 和 FormData
随机推荐
- 'IOKING' TCP Transmission Server Engine ('云猴'©TCP通讯server引擎)(预告版)
关键词: IOKING IOCP TCP Transmission Server Engine Lock Free Interlocked 云猴完毕portTCP通讯server引擎 无锁 原子锁( ...
- 对数据html文本 的处理
对数据html文本 的处理 : 提取文字.图片.分句 ''' SELECT * FROM Info_Roles WHERE Flag=1 LIMIT 2; select top y * from 表 ...
- kafka02
- centos上装eclipse步骤
1.去官网下个eclipse for linux的 地址:http://www.eclipse.org/downloads/ Eclipse IDE for Java EE Developer ...
- HDU 5862Counting Intersections
Counting Intersections Time Limit: 12000/6000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/ ...
- bzoj 4590: [Shoi2015]自动刷题机
好恶心.. 二分上界到100000LL*1000000000LL %_% #include<cstdio> #include<iostream> #include<cs ...
- ASP.NET_SessionId vs .ASPXAUTH why do we need both of them?
https://stackoverflow.com/questions/23758704/asp-net-sessionid-vs-aspxauth-why-do-we-need-both-of-th ...
- P1402 酒店之王 网络流
大水题,我自己瞎做就做出来了,没啥说的,zz建图,就是板子. 题干: 题目描述 XX酒店的老板想成为酒店之王,本着这种希望,第一步要将酒店变得人性化.由于很多来住店的旅客有自己喜好的房间色调.阳光等, ...
- E20170626-hm
authenticate vt. 认证,证明是真实的.可靠的或有效的; 鉴定,使生效; author n. 作者; 著作家; 创造者; 发起人;
- wcf 代理配置
<?xml version="1.0" encoding="utf-8"?> <configuration> <appSett ...