HTML5基础（二）：超链接和多媒体文件应用

不会写代码！！

已于 2024-04-13 15:18:23 修改

阅读量994

点赞数 1

分类专栏： web前端学习文章标签： web html5

于 2022-04-22 20:39:59 首次发布

本文链接：https://blog.csdn.net/xty123abc/article/details/124353815

版权

本文提供了一系列HTML5实训项目，包括设计支持音频、视频播放的网页，简易网站导航，新生课程简介，中国名牌大学简介。通过这些项目，读者将掌握超链接的使用，多媒体元素的集成，以及书签链接的设计方法，提升网页制作技能。

摘要由CSDN通过智能技术生成

实训目标

1) 掌握超链接的标记语法、属性语法、学会为网页添加各种超链接；

2) 掌握书签链接定义与语法，学会使用书签链接设计 Web 页面；

3) 掌握 img 和 marquee 标记与属性的设置方法；

4) 掌握 bgcolor 和 embed 标记语法与属性的设置方法，为页面添加多媒体文件。

实训内容

1) 使用超链接制作网站导航条；

2) 使用无序列表制作网站导航条；

3) 使用书签设计新生课程简介；

4) 使用背景音乐标记为页面添加背景音乐；

5) 使用 embed 标记制作带有音乐、视频、动画的网页。

实训项目

1) 支持音频、视频播放的网页；（20 分）

2) 设计简易网站导航；（20 分）

3) 设计新生课程简介；（20 分）

4) 设计中国名牌大学简介；（20 分）

5) 课外拓展训练。（10 分）

环境准备：

博主用的是webstorm集成环境，涉及的资源文件采取二级分类，如下图所示：

1）将所有image图片放在image文件夹中

2）命名序号如图所示

项目 2-1 支持音频、视频播放的网页

实训指导过程：

编程设计支持音视、视频播放的网页，效果如图 2-1 所示。具体步骤如下：

图 2-1 支持音频、视频播放的网页

1. 启动程序，创建 HTML 文档，输入文件名为 prj2-1.html。

2. 在 HTML 文档 head 标记插入样式 style。

3. 在 HTML 文档 body 标记中分别进行下列操作：

1) 插入 center 标记实现居中显示。

2) 在 center 标记中插入标题字 h2 标记显示歌词的名称“明月几时有”。

3) 继续插入水平分隔线 hr 标记。

4) 插入 font 标记，设置显示歌词样式，歌词内容如下所示：明月几时有？把酒问青天。布置天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒，起舞弄清影，何似在人间。转朱阁，低绮户，照无眠。不应无限，何事偏向别时圆。人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。

5) 插入图层，并在图层内插入无序列表，在列表项中分别插入不同的多媒体文字。 6) 在 div 结束标记后插入滚动文字 marquee 标记，设置滚动文字标记属性实现向左交替滚动，内容为：“欢迎来到我的多媒体世界！”。

4. 在 style 标记中分别定义无序列表、列表项、图层和滚动文字标记样式：

ul{list-style-type:none;} li{float:left;margin:20px;} div{height:350px;background-color:#99cc00;text-align:center;} marquee{font-size:16px;padding:4px auto;}

实现源码如下：

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>多媒体及滚动字幕应用</title>
	<style type="text/css">
		body{text-align:center;}
		ul{list-style-type:none;}
		li{float:left;margin:20px;}
		div{height:250px;background-color:#99cc00;text-align:center;}
		marquee{font-size:16px;padding:4px;margin:auto;background-color:#0FF}
	</style>
</head>

<body>
<h2>明月几时有</h2>

<hr color=blue size="5">
<span style="font-size: 144%; ">
	明月几时有？把酒问青天。<br>
	不知天上宫阙，今夕是何年。<br>
	我欲乘风归去，又恐琼楼玉宇，高处不胜寒，起舞弄清影，何似在人间。<br>
	转朱阁，抵绮户，照无眠。<br>
	不应有恨，何事偏向别时圆。<br>
	人有悲欢离合，月有阴晴圆缺，此事古难全。<br>
	但愿人长久，千里共婵娟。<br>
</span>
<hr color=red size="5">
<ul>
	<li><embed src="image/baidu.jpg"></embed></li>
	<li><embed src="1.mp3"&