HTML5基础知识总结02

最新推荐文章于 2022-11-25 17:57:41 发布

宇智波-林中路

最新推荐文章于 2022-11-25 17:57:41 发布

阅读量194

点赞数

分类专栏： HTML基础学习文章标签： html5

本文链接：https://blog.csdn.net/m0_60830137/article/details/119765321

版权

HTML基础学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.HTML5 Video(视频)

HTML5 规定了一种通过 video 元素来包含视频的标准方法。

video--视频窗口

width/height--属性设置视频窗口初始化大小

controls---属性设置视频播放的控制器

source---子元素设置被播放的资源

source---子元素可以在video中出现多个，从第一个可被识别的视频开始播放（可以有多个视频）

src---属性设置资源路径【绝对路径.相对.网络地址】

type---设置被播放资源的类型

video---元素支持3种视频格式： MP4, WebM, 和 Ogg。

<video controls="controls">
			<source src="res/movie.mp4" type="audio/mp4"></source>
			<source src="res/movie.mp4" type="audio/mp4"></source>
		</video>

显示如下：

2.HTML5 Audio(音频)

HTML5 规定了在网页上嵌入音频元素的标准，即使用audio元素。

controls--设置控制器

source--子元素表示被播放的音频资源

src--音频资源路径

type--文件类型

audio元素支持3种音频格式文件: MP3, Wav, 和 Ogg。

autoplay--设置自动播放

loop--设置循环播放

<audio controls="controls" outoplay="outoply" loop="4">
   <source src="res/zijinghuayuan.mp3"></source>
</audio>

显示如下：

注意:

Chrome已不再支持打开浏览器自动播放声音，为了遏制一些广告对用户的影响，浏览器升级70.0后版本对音频自动播放限制，不能用代码触发音频播放事件必须由用户手动触发，主要目的是让用户自己触发，才可以播放。

3. HTML5 Web 存储

HTML5可以在本地存储用户的网页数据

在没有Web 存储之前网页数据本地存储使用cookie完成

cookie浏览器自带的存储空间，每一个cookie可以存4k

cookie本地存储不安全

3.1 HTML5 Web 存储方式

HTML5 Web 存储有2中方式 localStorage 和 sessionStorage

共同点:localStorage 和 sessionStorage都允许在浏览器端存储数据

localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。

sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数

3.2 localStorage 和 sessionStorage用法

1. 使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage。

if(typeof(Storage)!=="undefined") {

// 是的! 支持 localStorage sessionStorage 对象! // 一些代码.....

} else {

// 抱歉! 不支持 web 存储。

2. localStorage存储数据

localStorage有2种方式:

(1)localStorage.变量名称="数据值"; 获取保存的数据值:localStorage.变量名称;

(2)localStorage.setItem("名称","数据值"); 获取保存的数据值:localStorage.getItem("名称");

手动删除localStorage对象中存储的数据:

localStorage.removeItem("名称");删除指定的数据

localStorage.clear(); 删除所有数据

2.sessionStorage存储数据

sessionStorage有2种方式:

(1)sessionStorage.变量名称="数据值"; 获取保存的数据值:sessionStorage.变量名称;

(2)sessionStorage.setItem("名称","数据值"); 获取保存的数据值:sessionStorage.getItem("名称");

手动删除sessionStorage对象中存储的数据:

sessionStorage.removeItem("名称");删除指定的数据

sessionStorage.clear(); 删除所有数据

注意:sessionStorage对象管理浏览器窗口之后之前保存的数据会自动清空

}

4. HTML5 Canvas

Canvas--就是在html中开辟出来的绘制图形的空间【画布】

通过style来设置一些样式

通过javascript在canvas画布上绘制图形

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML Canvas</title>
		<script>
			//绘制矩形
				function setRect(){
					//得到画布对象canvas对象
				var canvasobj=document.getElementById("canvas1");
				//创建 context 对象--画笔
				var con=canvasobj.getContext("2d");
				//设置画笔颜色
				con.fillStyle="black";
				//开始绘制矩形
				//fillRect(x,y,w,h);
				con.fillRect(10,10,100,100);
						}
		</script>
	</head>
	<body>
		<h1>HTML Canvas</h1>
		<h4>Canvas--就是在html中开辟出来的绘制图形的空间【画布】</h4>
		<h4>通过style来设置一些样式</h4>
		<h4>通过javascript在canvas画布上绘制图形</h4>
		<input type="button" value="绘制矩形" onclick="setRect();"/> <br>
		<!-- solid 表示实线 -->
		<canvas id="canvas1" style="width: 400px; height: 400px; border: 10px solid red"> </canvas>
	</body>
</html>

显示如下：