任务卡_04-前端技术_HTML与HTML5常用标签
程序员文章站
2022-06-12 10:38:05
...
目录
一，视频网站训练任务
1，任务概述
有个客户有这样的一个需求，想做一个视频播放网站，所有视频以图片列 表的形式显示，当用户点击图片的视频，可以在页面下方播放指定的电影。 那 么现在开始学习 HTML，完成视频网站的制作吧！
2，任务过程
使用<img>完成电影列表的显示
使用 iframe 引入单个电影页面
当点击图片的时候，在下方的 iframe 中切换图片对应的电影
3，任务线索
视频： HTML 框架标签、HTML 多媒体标签
参考手册：https://www.w3school.com.cn/html/index.asp
文档： HTML 框架标签.pdf、HTML 多媒体标签.pdf
4，参考代码
4.1 工程结构
4.2 参考代码
Demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>自定义视频网站</h1>
<p align="center">
<a href="video1.html" target="myFrame"><img src="./images/1.jpg" width="20%" title="视频1"></a>
<a href="video2.html" target="myFrame"><img src="./images/2.jpg" width="20%" title="视频2"></a>
<a href="video3.html" target="myFrame"><img src="./images/3.jpg" width="20%" title="视频3"></a>
<a href="video4.html" target="myFrame"><img src="./images/4.jpg" width="20%" title="视频4"></a>
</p>
<p align="center">
<a href="video5.html" target="myFrame"><img src="./images/11.jpg" width="20%" title="视频5"></a>
<a href="video6.html" target="myFrame"><img src="./images/22.jpg" width="20%" title="视频6"></a>
<a href="video7.html" target="myFrame"><img src="./images/33.jpg" width="20%" title="视频7"></a>
<a href="video8.html" target="myFrame"><img src="./images/44.jpg" width="20%" title="视频8"></a>
</p>
<p align="center">
<iframe name="myFrame" frameborder="0" width="70%" height="550px"></iframe>
</p>
</body>
</html>video1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p align="center">
<video poster="./images/1.jpg" width="100%" src="./images/fun.mp4" autoplay="autoplay"></video>
</p>
</body>
</html>video2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p align="center">
<video controls="controls" poster="./images/2.jpg" width="100%" src="./images/fun.mp4" autoplay="autoplay"></video>
</p>
</body>
</html>video3.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p align="center">
<video controls="controls" poster="./images/3.jpg" width="100%" src="./images/fun.mp4" autoplay="autoplay"></video>
</p>
</body>
</html>video4.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p align="center">
<video controls="controls" poster="./images/4.jpg" width="100%" src="./images/fun.mp4" autoplay="autoplay"></video>
</p>
</body>
</html>video5.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p align="center">
<video controls="controls" poster="./images/11.jpg" width="100%" src="./images/fun.mp4" autoplay="autoplay"></video>
</p>
</body>
</html>video6.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p align="center">
<video controls="controls" poster="./images/22.jpg" width="100%" src="./images/fun.mp4" autoplay="autoplay"></video>
</p>
</body>
</html>video7.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p align="center">
<video controls="controls" poster="./images/33.jpg" width="100%" src="./images/fun.mp4" autoplay="autoplay"></video>
</p>
</body>
</html>video8.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p align="center">
<video controls="controls" poster="./images/44.jpg" width="100%" src="./images/fun.mp4" autoplay="autoplay"></video>
</p>
</body>
</html>
下一篇： 减肥芹菜有大妙用!快来了解一下!