任务卡_04-前端技术_HTML与HTML5常用标签

最新推荐文章于 2024-03-20 15:15:56 发布

&再见萤火虫&

最新推荐文章于 2024-03-20 15:15:56 发布

阅读量452

点赞数 1

分类专栏： # 任务卡文章标签：任务卡前端技术 HTML与HTML5标签开课吧新职课

本文链接：https://blog.csdn.net/qq_41528502/article/details/109528841

版权

任务卡专栏收录该内容

25 篇文章 8 订阅

订阅专栏

一，视频网站训练任务

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>

章节汇总在这里（づ￣3￣）づ╭❤～@&再见萤火虫&【04-前端技术】

对学习Java感兴趣的同学欢迎加入QQ学习交流群：1126298731

有问题欢迎提问，大家一起在学习Java的路上打怪升级！(o゜▽゜)o☆[BINGO!]

&再见萤火虫&

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
任务卡_04-前端技术_HTML与HTML5常用标签

目录一，视频网站训练任务1，任务概述2，任务过程3，任务线索4，参考代码4.1 工程结构4.2 参考代码一，视频网站训练任务1，任务概述有个客户有这样的一个需求，想做一个视频播放网站，所有视频以图片列表的形式显示，当用户点击图片的视频，可以在页面下方播放指定的电影。那么现在开始学习 HTML，完成视频网站的制作吧！2，任务过程使用<img>完成电影列表的显示使用 iframe 引入单个电影页面当点击图片的时候，在下方的 if..
复制链接

扫一扫

专栏目录