HTML5 | 语义标签和视频、音频标签

最新推荐文章于 2022-09-30 18:06:58 发布

Bravo！！！

最新推荐文章于 2022-09-30 18:06:58 发布

阅读量172

点赞数

本文链接：https://blog.csdn.net/weixin_47982238/article/details/107487191

版权

一、HTML标签的共有属性

1. id

HTML中id的作用是为单元（元素，标签）提供唯一的标识或标记，以便浏览器在分析和处理网页时可以找到id的位置。通常用于：

1）元素的风格(style sheet)选择。

2）脚本语言使用id属性作为标记来查找id所在的单位。

3）用作声明对象的单元的标识。

2. class

将不同的内容作为一个类

3. title

4.style（样式）

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>index</title>
	<style>
		.imgcls{
			background:#ccc;
		}
		#imgid{
			background: #f0f;
		}
	</style>
</head>
<body>
	<img src="xs.png" title='xs' width='200px' height='200px' class='imgcls'>	
	<img src="xs.png" width='200px' height='200px'>	
	<img src="xs.png" width='200px' height='200px' class='imgcls'>	
	<img src="xs.png" width='200px' height='200px' id='imgid'>	
</body>
</html>

二、语义化标签

1.article（文章部分）

2.footer（尾部）

3.header（头部）

4.nav（导航菜单一般要公用）

5.section（体部）

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>index</title>
	<style>
		.container{
			width:1200px;
			/*background: #ccc;*/
			height:600px;
			margin:0 auto;
		}

		header{
			height:50px;
			background: #272822;
		}

		section{
			height:500px;
		}

		footer{
			height:50px;
			background: #272822;
		}

		article{
			float:left;
			margin-left:30px;
		}
	</style>
</head>
<body>
	<!-- 主体 -->
	<div class="container">
		<!-- 头部 -->
		<header>
			
		</header>

		<!-- 体部 -->
		<section>
			<article>
				<img src="xs.png" alt="">
			</article>
		</section>

		<!-- 尾部 -->
		<footer>
			
		</footer>	
	</div>
</body>
</html>

三、视频标签

Web 上的视频

直到现在，仍然不存在一项旨在网页上显示视频的标准。

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

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

HTML5视频标签:

<video src="movie.ogg" controls="controls" autoplay loop width='1200px' height='500px'></video>

所有浏览器都支持的视频方式:

<embed src=" " type=" " allowscriptaccess="always" allowfullscreen="true" wmode="opaque" width="1200" height="500"></embed>

<video> 标签的属性

视频控制实例

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>index</title>
	<style>
		...
	</style>
</head>
<body>
	<!-- 主体 -->
	<div class="container">
		<!-- 体部 -->
		<section>
			<video src="cartoon.webm" width='1200px' id='vid'></video>	
			<p>
				<button onclick='start()'>播放</button>
				<button onclick='pause()'>暂停</button>
			</p>
		</section>
	</div>
</body>
<script>
//找到视频对象
vid=document.getElementById('vid');
//开始
function start(){
	vid.play();	
}
//暂停
function pause(){
	vid.pause();	
}
</script>
</html>

HTML5音频、视频控制:
1.vobj.play();
2.vobj.pause();

四、音频标签

HTML5音频标签:

<audio src="go.mp3" controls="controls"  autoplay loop> </audio>

音频控制实例

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>index</title>
	<style>
		...
	</style>
</head>
<body>
	<!-- 主体 -->
	<div class="container">
		<!-- 体部 -->
		<section>
			<audio src="go.mp3" controls="controls" id='vid'></audio> 
			<p>
				<button onclick='start()'>播放</button>
				<button onclick='pause()'>暂停</button>
			</p>
		</section>	
	</div>
</body>
<script>
//找到视频对象
vid=document.getElementById('vid');
//开始
function start(){
	vid.play();	
}
//暂停
function pause(){
	vid.pause();	
}
</script>
</html>

Bravo！！！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 | 语义标签和视频、音频标签

一、HTML标签的共有属性1. idHTML中id的作用是为单元（元素，标签）提供唯一的标识或标记，以便浏览器在分析和处理网页时可以找到id的位置。通常用于：1）元素的风格(style sheet)选择。2）脚本语言使用id属性作为标记来查找id所在的单位。3）用作声明对象的单元的标识。2. class将不同的内容作为一个类3. title4.style（样式）<!doctype html><html lang="en"><head
复制链接

扫一扫