html5学习笔记

前端开发那些事
字数统计: 2.1k   |   阅读时长≈ 10 分钟

这里记载了关于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"设置元素为可拖放，使用ondragstart和setData()设置拖动什么，使用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-2023 Shawn Zhou
  • 由 Hexo 框架强力驱动 | 主题 - Ayer
  • 访问人数: | 浏览次数:

感谢打赏~

支付宝
微信