2021.5.12 HTML5学习第二天_2021关于html5的新闻-CSDN博客

本文链接：https://blog.csdn.net/JINGMaNong/article/details/116724002

HTML5 语义元素

语义 = 意义
语义元素 = 有意义的元素
什么是语义元素?
一个语义元素能够清楚的描述其意义给浏览器和开发者。
无语义元素实例: <div> 和 <span>- 无需考虑内容.
语义元素实例: <form>, <table>, and <img> - 清楚的定义了它的内容.

许多现有网站都包含以下HTML代码：

<div id="nav">, <div class="header">,或者 <div id="footer">, 来指明导航链接, 头部, 以及尾部.
HTML5 提供了新的语义元素来明确一个HTML页面的不同部分:

<header> / <nav> / <section> / <article> / <aside> / <figcaption> / <figure> / <footer>

在这里插入图片描述

HTML5 `<header>` 元素

<header>元素描述了文档的头部区域

<header>元素主要用于定义内容的介绍展示区域.

在页面中你可以使用多个<header> 元素.

HTML5 <nav>元素

<nav> 标签定义导航链接的部分。

<nav>元素用于定义页面的导航链接部分区域，但是，不是所有的链接都需要包含在 <nav>元素中!

HTML5<article>元素

<article> 标签定义独立的内容。

HTML5 <section> 元素

<section> 标签定义文档中的节（section、区段）。

比如章节、页眉、页脚或文档中的其他部分。根据W3C HTML5文档: section 包含了一组内容及其标题。

HTML5<aside> 元素

<aside> 标签定义页面主区域内容之外的内容（比如侧边栏）

HTML5 <footer> 元素

<footer> 元素描述了文档的底部区域.

<footer>元素应该包含它的包含元素
一个页脚通常包含文档的作者，著作权信息，链接的使用条款，联系信息等
文档中你可以使用多个<footer>元素.

HTML5 <figure> 和 <figcaption> 元素

<figure>标签规定独立的流内容（图像、图表、照片、代码等等）。

<figure> 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。

<figcaption>标签定义 <figure>元素的标题.

<figcaption>元素应该被置于 “figure” 元素的第一个或最后一个子元素的位置。

HTML5 Video(视频)

大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。

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

<video>元素提供了播放、暂停和音量控件来控制视频。

同时 <video>元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度，所需的视频空间会在页面加载时保留。

如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。

<video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。

<video>元素支持多个 <source> 元素.<source>元素可以链接不同的视频文件。

浏览器将使用第一个可识别的格式。

当前， <video> 元素支持三种视频格式： MP4, WebM, 和 Ogg。

HTML5 <video>- 使用 DOM 进行控制

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Video</title>
	</head>
	<body>
		<video width="300px" height="300px" controls="controls">
			<source src="shipin.mp4" type="video/mp4"></source>
		</video>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Video</title>
	</head>
	<body>
		<button onclick="playPause()">播放/暂停</button>
		<button onclick="makeBig()">放大</button>
		<button onclick="makeSmall()">缩小</button>
		<br />
		<video id="video1" width="400px" height="400px" controls="controls">
			<source src="shipin1.mp4" type="video/mp4"></source>
		</video>
		<script>
			//得到video的dom对象
			var myVideo=document.getElementById("video1");
			//暂停/播放
			function playPause(){
				//paused--判断视频是否被暂停
				if(myVideo.paused){
					//播放
					myVideo.play();
				}else{
					//暂停
					myVideo.pause();
				}	
			}
			//放大
			function makeBig(){
				myVideo.window=500;
				myVideo.height=600;
			}
			//缩小
			function makeSmall(){
				myVideo.window=300;
				myVideo.height=300;
			}
		</script>
	</body>
</html>

HTML5 Audio(音频)

大多数音频是通过插件（比如 Flash）来播放的。然而，并非所有浏览器都拥有同样的插件。

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

controls 属性供添加播放、暂停和音量控件。

在<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本。

<audio> 元素允许使用多个<source> 元素.<source> 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件。

目前, <audio>元素支持三种音频格式文件: MP3, Wav, 和 Ogg。

HTML5 <audio >- 使用 DOM 进行控制

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Audio</title>
		
	</head>
	<body>
		<button onclick="playPause()">播放/暂停</button>
		<audio id="myabdio1" controls="controls">
			<source src="audio.mp3"></source>
		</audio>
		<script>
			var myabdio1=document.getElementById("myabdio1");
			function playPause(){
				//paused--判断音频是否被暂停
				if(myabdio1.paused){
					myabdio1.play();
				}else{
					myabdio1.pause();
				}
			}
		</script>
	</body>
</html>

HTML5 Web 存储

什么是 HTML5 Web 存储?

HTML5 web 存储,一个比cookie更好的本地存储方式。

使用HTML5可以在本地存储用户的浏览数据。

早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能.

数据以键/值对存在, web网页的数据只允许该网页访问使用。

键/值-----书的目录就是典型的键/值数据结构。

书的标题【键】----页码【值】

localStorage 和 sessionStorage

客户端【浏览器】存储数据的两个对象为：

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

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

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

在这里插入图片描述

localStorage 对象

localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>localStorage  </title>
		<script>
			function testlocalStorage(){
				if(typeof(Storage)!=="undefined"){
					if(localStorage.clickcount){
						var count=localStorage.clickcount;
						count++;
						localStorage.clickcount=count;
					}else{
						localStorage.clickcount=1;
					}
					//alert("ssss");
					document.getElementsByTagName("h1")[0].innerHTML=localStorage.clickcount;
				}else{
					document.getElementsByTagName("h1")[0].innerHTML="对不起，您的浏览器不支持 web 存储。";
				}
			}
		</script>
	</head>
	<body>
		
		<input type="button" value="测试localStorage" onclick="testlocalStorage();" />
		<h1></h1>
	</body>
</html>

sessionStorage 对象

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

不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：

保存数据：localStorage.setItem(key,value);

读取数据：localStorage.getItem(key);

删除单个数据：localStorage.removeItem(key);

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

注意: 键/值对通常以字符串存储，需要转换该格式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>sessionStorage</title>
		<script>
			function testsessionStorage(){
				if(typeof(Storage)!=="undefined"){
					if(sessionStorage.clickcount){
						var count=sessionStorage.clickcount;
						count++;
						sessionStorage.clickcount=count;
					}else{
						sessionStorage.clickcount=1;
					}
				document.getElementsByTagName("h1")[0].innerHTML=sessionStorage.clickcount;
				}else{
					document.getElementsByTagName("h1")[0].innerHTML="对不起，您的浏览器不支持 web 存储。";
				}
			}
		</script>
	</head>
	<body>
		<input type="button" value="测试sessionStorage" onclick="testsessionStorage();" />
		<h1></h1>
	</body>
</html>

localStorage和sessionStorage区别

localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。

2.它们均只能存储字符串类型的对象（虽然规范中可以存储其他原生类型的对象，但是目前为止没有浏览器对其进行实现）。

3.localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。

4.sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。

5不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标签页仅指顶级窗口，如果一
个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。

6.localStorage只要在相同的协议、相同的主机名、相同的端口下，就能读取/修改到同一份localStorage数据。

sessionStorage比localStorage更严苛一点，除了协议、主机名、端口外，还要求在同
一窗口（也就是浏览器的标签页）下。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function testlocalStorage(){
				//如果判断储存不为未定义值
				if(typeof(Storage)!=="undefined"){
					//读取数据：localStorage.getItem(key);
					//*1,转换为数字类型
					if(localStorage.getItem("clicknum")*1){
						
						var num=localStorage.getItem("clicknum")*1;
						num++;
						localStorage.setItem("clicknum",num);
					}else{
						//保存数据：localStorage.setItem(key,value);
						localStorage.setItem("clicknum",1);
					}
			document.getElementsByTagName("h1")[0].innerHTML=localStorage.getItem("clicknum");
					
					
					}else{
						document.getElementsByTagName("h1")[0].innerHTML="对不起，您的浏览器不支持 web 存储。";
					}
						
					
				}
			function exit(){
				if(typeof(Storage)!=="undefined"){
					//删除单个数据：localStorage.removeItem(key);
					localStorage.removeItem("clicknum");
					//删除所有数据：localStorage.clear();
					//localStorage.clear();
				}else{
					document.getElementsByTagName("h1")[0].innerHTML="对不起，您的浏览器不支持 web 存储。";
				}
				window.close();
			}
		</script>
	</head>
	<body>
		<input type="button" value="测试localstorage" onclick="testlocalStorage();" />
		<input type="button" value="exit" onclick="exit()" />
		<h1></h1>
	</body>
</html>