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
随机推荐
- Java之正則表達式【使用语法】
认为好就顶一个!! ! ! 3.正則表達式 用一些特殊的有意义的字符组成的字符串(死记) 原子:正則表達式的最基本组成单位 正則表達式特殊意义的字符: . * + ?不能单独表示它们,假设非 ...
- bzoj3894: 文理分科(还是那道最小割)
3894: 文理分科 题目:传送门 感谢波老师没有来D飞我,让我做出了这题... 题解: 这题其实和我做的上一题(bzoj2132)很像,所以就不写题意了. 依然是那最小割... 这题给出了四个利益矩 ...
- extern_c
(1) 使用extern和包含头文件来引用函数有什么区别呢?extern的引用方式比包含头文件要简洁得多!extern的使用方法是直截了当的,想引用哪个函数就用extern声明哪个函数.这大概是 ...
- CodePlus 2017 12 月赛
这场比赛跟个zz一样 div1卡在了同余方程上 心态崩了去做div2 然后被T1搞崩了 T1: 大模拟 比较像配平方程式 思路: 但是未知物质每种元素系数不能≥10 且不能为空 (如CO2+?=CO2 ...
- CF 1016 C —— 思路
题目:http://codeforces.com/contest/1016/problem/C 一定是先蛇形走在回形走,所以预处理.暴力即可: 自己一开始写了一个,总是WA,又看了看TJ写法: 模仿一 ...
- bzoj3112
http://www.lydsy.com/JudgeOnline/problem.php?id=3112 模板题...模板又打错了... #include<bits/stdc++.h> u ...
- bzoj3527
http://www.lydsy.com/JudgeOnline/problem.php?id=3527 今天肿么这么颓废啊...心态崩了 首先我们得出Ei=Fi/qj,然后我们设f[i]=1/i/i ...
- SpringMVC+MyBaties关于上传(跟新)图片的问题
/** * 方法名:uploadPhoto * 描 述:TODO(上传图片) * 作 者:池彦龙 * 时 间:2017/03/30 * 返回类型: * 参 数: * 异 常: */ Controlle ...
- openstack instance resize to
Icehouse resize No valid host was found Hi all!! We're currently experimenting an error that's it's ...
- E20170627-gg
ring n. 戒指,指环; 铃声,钟声; 环形物; 拳击场; vi. 按铃,敲钟; 回响; 成环形; rear n. 后部,背面,背后; 臀部; (舰队或军队的) 后方,后尾,殿后部队; ...