html5学习笔记

这里记载了关于HTML5相关的学习笔记,该部分内容是曾在2020年发布的。

当前博客显示的发布时间非真实时间,而是这些内容在当时发布时的最后发布时间。

H5音频

HTML5提供了播放音频文件的标准,control属性供添加播放,暂停和音量控件。

<audio>定义声音,<source>规定多媒体资源,可以是多个

使用src属性为audio标签提供资源,controls=“controls”提供控制控件

注意audio是双标签,中间的内容可以是“浏览器不支持”之类的话,代表浏览器无法解析这个标签,如果浏览器可以解析audio标签,则在页面里显示播放器。

有些浏览器对mp3等格式支持不是很好,可以这样解决:

1
2
3
4
<audio>  
<source src="1.mp3">
<source src="1.ogg">
</audio>

使用source标签提供资源。

H5视频

以前的时候,在浏览器中播放视频需要借助flash插件,现在随着flash慢慢淡出舞台,H5视频应运而生。flash插件播放视频有诸多不便,H5播放视频就可以解决这些问题。

<video>定义视频,<source>规定多媒体资源,可以是多个,有两个属性,width和height定义宽高。

1
2
3
4
<video controls="controls" height="300px" width="500px">  
<source src="1.mp4">
<source src="1.webm">
</video>

H5拖放

拖放是一种常见的特性,即抓取对象以后拖到另一个位置。IE9以上,火狐,Opera12以上,Chrome以及Safari5以上支持拖放。

使用draggable="true"设置元素为可拖放,使用ondragstartsetData()设置拖动什么,使用ondragover设置放到何处,使用ondrop进行放置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>  
<html>
<head>
<meta charset="utf-8">
<title>fuck</title>
<style type="text/css">
#div1 {
width: 300px;
height: 300px;
border: 1px solid black;
}
</style>
<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>
<p>请拖动图片</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img src="img/11.png" id="d1" draggable="true" ondragstart="drag(event)">
</body>
</html>

H5 canvas

画布是一个矩形区域,可以控制它的每一个像素。

canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。但注意,canvas只是画布,不是画笔,只用于承载画面。

需要画笔操作的话,使用js控制。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>  
<html>
<head>
<meta charset="utf-8">
<title>canvas</title>
</head>
<body>
<canvas id="can" width="400px" height="400px"></canvas>
<script type="text/javascript">
var c = document.getElementById("can");
var cxt = c.getContext("2d"); // 确定以2D方式绘制
cxt.fillStyle = "#0000FF"; // 确定绘制颜色
cxt.fillRect(0,0,100,100); // 绘制一个矩形

cxt.beginPath(); //绘制圆使用,路径开始
cxt.arc(200,20,15,0,Math.PI*2,true); // 绘制圆
cxt.closePath(); // 记得再关闭路径
cxt.fill(); // 绘制图形输出到屏幕

var img = new Image(); // 绘制图片的变量初始化
img.onload = function() { // 当图片加载完毕时才绘制
cxt.drawImage(img,200,200); // 绘制图像
}
img.src = "img/right.png"; // 图片资源位置
</script>
</body>
</html>

H5 SVG

什么是SVG?它指可伸缩矢量图形(Scalable Vector
Graphics),用于定义在网络上使用的矢量图形,它使用XML格式定义图形,在放大或者改变尺寸的情况下图形质量不会受到损失,SVG是万维网联盟的标准。

与其他图像格式相比,SVG的优势在于:

  • 它可以被文本编辑器创建和修改
  • 可被搜索,索引,脚本化或压缩
  • SVG可伸缩
  • 可在任何分辨率下高质量打印
  • 可在图像质量不下降的情况下被放大

IE9以上,火狐,Opera,Chrome以及Safari都支持内联SVG。

https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element
上可以找到大量SVG图形的API,还可以看到各个浏览器的兼容性信息。

使用.svg后缀的文件为矢量图形文件,内部代码即是SVG代码,方便图形重用。

使用<iframe src="svg.svg" width="150px" height="150px" frameborder="no"></iframe>就可以显示一个svg文件的图形。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>  
<html>
<head>
<meta charset="utf-8">
<title>SVG</title>
</head>
<body>
<svg viewbox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle cx="60" cy="60" r="50"></circle>
</svg>
<svg viewbox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon points="60,20 100,40 100,80 60,100 20,80 20,40"/>
</svg>
</body>
</html>

H5 地理定位

在用户允许的情况下,使用H5的Geolocation
API获取用户的地理位置。IE9以上,火狐,Chrome,Safari以及Opera支持地理定位,如果设备支持GPS,则地理定位会更加精确,所以它对手机的支持相对好一些。

这个示例代码使用的是谷歌地图,由于某些原因测试不出来。国内的地图倒是有提供的api,做的挺完善,如果有需求可以去调用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>  
<html>
<head>
<meta charset="utf-8">
<title>地理定位</title>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 获取当前地理位置
function init() {
navigator.geolocation.getCurrentPosition(function(position) {
// 设定地图参数,将用户当前的地理经纬度设置为地图中心点
var coords = position.coords;
var latlng = new google.maps.LatLng(coords.latitude, coords.longitude);
var myOptions = {
zoom : 14,
center : latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
// 创建地图并在div中显示
var map1;
map1 = new google.maps.Map(document.getElementById("map"),myOptions);
// 地图上创建标记
var marker = new google.maps.InfoWindow({
content : "当前位置"
})
infowindow.open(map1, marker);
})

}
</script>
</head>
<body>
<div id="map" style="width: 2000px; height: 1000px;"></div>
</body>
</html>

H5 Web存储

HTML5提供了两种在客户端存储数据的新方法:localStorage是没有时间限制的数据存储,一年以后数据仍可使用。sessionStorage是针对一个session的数据存储。之前数据存储是由cookie来完成的,但是cookie不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得cookie速度很慢而且效率也不高。

使用localStorage对数据进行存储是可以保存很长时间的,当浏览器关闭或刷新页面时输入的数据不会消失,而是会保存在localStorage里面。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>  
<html>
<head>
<meta charset="utf-8">
<title>web存储</title>
<script type="text/javascript">
var ta;
var btn;
window.onload = function() {
ta = document.getElementById("ta");
if (localStorage.text) {
ta.value = localStorage.text;
}
btn = document.getElementById("btn");
btn.onclick = function() {
localStorage.text = ta.value;
}
}
</script>
</head>
<body>
<textarea rows="10" cols="20" id="ta"></textarea><br>
<button type="button" id="btn">save</button>
</body>
</html>

sessionStorage方法针对一个会话进行数据存储,当用户关闭当前浏览器窗口,数据就会被删除。以下代码展示了一个简单的累加器。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>  
<html>
<head>
<meta charset="utf-8">
<title>web存储</title>
<script type="text/javascript">
var num = 0;
var txt;
var btn;
window.onload = function() {
txt = document.getElementById("txt");
btn = document.getElementById("addbtn");
if (sessionStorage.num) {
num = sessionStorage.num;
showNum();
}
else {
num = 0;
}

btn.onclick = function() {
num++;
sessionStorage.num = num;
showNum();
}
}
function showNum() {
txt.innerHTML = num;
}
</script>
</head>
<body>
<span id="txt">0</span>
<button type="button" id="addbtn">+1</button>
</body>
</html>
打赏
  • 版权声明: 本博客所有文章除特别声明外,著作权归作者所有。转载请注明出处!

扫一扫,分享到微信

微信分享二维码
  • Copyrights © 2018-2021 Shawn Zhou
  • Hexo 框架强力驱动 | 主题 - Ayer
  • 访问人数: | 浏览次数:

感谢打赏~

支付宝
微信