Day_3 HTML5 超链接与多媒体文件应用

最新推荐文章于 2024-01-14 10:57:25 发布

化身孤岛的鲸o

最新推荐文章于 2024-01-14 10:57:25 发布

阅读量3.9k

点赞数 5

分类专栏： Web前端文章标签： html

本文链接：https://blog.csdn.net/weixin_44123362/article/details/104598572

版权

Web前端专栏收录该内容

5 篇文章 3 订阅

订阅专栏

项目1 设计简易灯箱画廊

实训要求：

（1）利用超链接和图像标记设计简易灯箱画廊。
（2）给简易灯箱画廊增加背景音乐效果。

实训内容：

（1）超链接的应用
（2）无序列表的应用
（3）图像标记的应用
（4）背景音乐的应用
（5）样式表的应用
（6）浮动框架的应用

知识点

（1）超链接标记

<a href="" title="" target="">链接内容</a>

在这里插入图片描述

什么是超文本？

标记语言的真正威力在于其收集能力，它可以将收集来的文档组合成一个完整的信息库，并且可以将文档库与世界上的其他文档集合链接起来。

这样的话，读者不仅可以完全控制文档在屏幕上的显示，还可以通过超链接来控制浏览信息的顺序。 这就是 HTML 和 XHTML 中的 “HT” - 超文本（hypertext），就是它将整个 Web 网络连接起来。

超文本的基础知识
超文本的基本特征就是可以超链接文档；你可以指向其他位置，该位置可以在当前的文档中、局域网中的其他文档，也可以在因特网上的任何位置的文档中。这些文档组成了一个杂乱的信息网。目标文档通常与其来源有某些关联，并且丰富了来源；来源中的链接元素则将这种关系传递给浏览者。

超链接可以用于各种效果。超链接可以用在目录和主题列表中。浏览者可以在浏览器屏幕上单击鼠标或在键盘上按下按键，从而选择并自动跳转到文档中自己感兴趣的那个主题，或跳转到世界上某处完全不同的集合中的某个文档。

超链接还可以向浏览者指出有关文档中某个主题的更多信息。例如，“如果您想了解更详细的信息，请参阅某某页面。”。作者可以使用超链接来减少重复信息。例如，我们建议创作者在每个文档中都签署上自己的姓名。这样就可以使用一个将名字和另一个包含地址、电话号码等信息的单独文档链接起来的超链接，而不必在每个文档中都包含完整的联系信息。

超链接（hyper text），或者按照标准叫法称为锚（anchor），是使用 < a> 标签标记的，可以用两种方式表示。锚的一种类型是在文档中创建一个热点，当用户激活或选中（通常是使用鼠标）这个热点时，会导致浏览器进行链接。浏览器会自动加载并显示同一文档或其他文档中的某个部分，或触发某些与因特网服务相关的操作，例如发送电子邮件或下载特殊文件等。锚的另一种类型会在文档中创建一个标记，该标记可以被超链接引用。

还有一些与超链接相关联的鼠标相关事件。这些事件与 JavaScript 结合使用可以产生一些令人激动的效果。

注释
锚的这两种类型都使用同样的标签；也许这就是它们拥有同样的名称的原因。但是我们发现，如果将它们区分开，把提供热点和超链接地址的锚看作“链接”，而用于标记文档的目标部分的锚称为“锚”，那么您将更容易理解这两种类型的锚。
在这里插入图片描述

（2）图像img标记

<img src="url" width="" height="" alt="" vspace="" hspace="" border="" align="">

<img src="/i/eg_tulip.jpg"  alt="上海鲜花港 - 郁金香" />

以上代码的效果：
在这里插入图片描述

（3）使用embed标记播放背景音乐

<embed src="tree/Sleep Away,mp3" loop="true" autostart="true" widtd="0" height="0">
</embed>

在这里插入图片描述

（4）浮动框架iframe标记

<iframe scr="" name="iframe" width="500px" height="300px"></iframe>

在这里插入图片描述

实训过程：

<!DOCTYPE html>
<html lang = "en">
	<head>
		<meta charset="utf-8">
		<meta name="keywords" content="Web前端开发，网页设计">
		<title>超链接</title>
		<style type = "text/css">
			body{
				text-align: center;
			}
			.div1{
				width: 900px;
				height: 500px;
				margin: 0px auto;
				text-align: center;
				background-color: white;
			}
			ul{
				margin: 0px auto;
				width: 800px;
				list-style-type: none;
				height: 120px;
			}
			li{
				float: left;
				width: 110px;
				height: 90px;
				margin: 5px;
			}
			img{
				border: 0;
				width: 100px;
				height: 80px;
			}
			h3{
				font-size:24px;
				padding: 10px auto;
				color:red;
			}
			/*超链接a伪类样式*/
			a{
				color: #ffffff;
				text-decoration: none;
			}
			a:link,a:visited,a:active{color:#0033cc;} 
			a:hover{border-bottom: 4px solid #FF0000} 	/*鼠标悬停时有红色的底边线出现*/
		</style>
	</head>
	<body>
		<embed src="picture/music.flac" loop="true" width="0" height="0">
		</embed>
		<div class="div1" id="">
			<ul>
				<li><a href="picture/1.jpg" target="_top">T1<br><img src="picture/1.jpg"/></a></li>
				<li><a href="picture/2.jpg" target="_top">T2<br><img src="picture/2.jpg"/></a></li>
				<li><a href="picture/3.jpg" target="_top">T3<br><img src="picture/3.jpg"/></a></li>
                ...
			</ul>
			<iframe name="iframe" scr="picture/10.jpg" width="500px" height="300px" frameborder="0" marginheight="10px"></iframe>
		</div>
	</body>
</html>

弄了好长时间，这里的iframe不知道为什么一直显示不了。。。

项目2 设计支持音频、视频播放的网页

实训要求：

（1）利用embed标记为网页添加多媒体文件。
（2）利用marquee标记实现网页滚动字幕的效果。
（3）利用图层div标记设置多媒体文件展示区域布局。

实训内容：

（1）网页多媒体文件的应用
（2）网页滚动文字的应用
（3）段落与排版标记的应用
（4）无序列表的应用
（5）字体font标记的应用
（6）样式表的定义与应用

知识点：

（1）滚动文字marquee标记

<marquee direction="up" behavior="alternate" onMouseOver="this.stop()" 
onMouseOut="this.start()">滚动文字</marquee>

实训过程：

<!DOCTYPE html>
<html lang = "en">
	<head>
		<meta charset="utf-8">
		<meta name="keywords" content="Web前端开发，网页设计">
		<title>多媒体</title>
		<style type = "text/css">
			@font-face {
				font-family: 'MyNewFont';   /*字体名称*/
				src: url('font/1.TTF');       /*字体源文件*/
			}
			body{
				text-align: center;
			}
			.div1{
				height: 250px;
				text-align: center;
				background-color: #99cc00;
			}
			ul{
				list-style-type: none;
			}
			li{
				float: left;
				margin: 20px;
			}
			marquee{
				font-size: 16px;
				padding: 4px auto;
			}
		</style>
	</head>
	<body>
		<h2>一路向北</h2>
		<hr>
		<p style="font-family: MyNewFont; font-size: 30px;">		后视镜里的世界<br>
				越来越远的道别<br>
				你转身向背<br>
				侧脸还是很美<br>
				我用眼光去追<br>
				竟听见你的泪<br>
				在车窗外面徘徊<br>
				是我错失的机会<br>
				你站的方位<br>
				跟我中间隔着泪<br>
				街景一直在后退<br>
				你的崩溃在窗外零碎<br>
				我一路向北<br>
				离开有你的季节<br>
				你说你好累<br>
				已无法再爱上谁<br>
				风在山路吹<br>
				过往的画面全都是我不对<br>
				细数惭愧<br>
				我伤你几回<br>
		</p>
		<hr>
		<div class="div1" id="">
			<ul>
				<li><embed src="music/1.flac" loop="true" width="500" height="200"></embed></li>
			</ul>
		</div>
		<marquee direction="left" behavior="alternate" onMouseOver="this.stop()" 
		onMouseOut="this.start()">欢迎来到我的音乐世界！</marquee>
	</body>
</html>

效果如下：

在这里插入图片描述

项目3 设计简易导航网站

实训要求：

（1）在浏览器URL中输入网址https://www.hao123.com/访问网站，参照此图第一行导航的效果编写代码实现导航条目。
（2）分别采用段落与超链接组合和无序列表与超链接组合完成导航条目的设计
在这里插入图片描述

实训过程：

<!DOCTYPE html>
<html lang = "en">
	<head>
		<meta charset="utf-8">
		<meta name="keywords" content="Web前端开发，网页设计">
		<title>多媒体</title>
		<style type = "text/css">
			@font-face {
				font-family: 'MyNewFont';   /*字体名称*/
				src: url('font/1.TTF');       /*字体源文件*/
			}
			.div1{
				text-align: center;
			}
			ul{
				list-style-type: none;	/*去掉列表项前面的符号*/
				text-align: center;
			}
			li{
				display: inline;	/*列表项行内显示*/
				width: 100px;
			}
			li a{
				padding: 0 20px;	/*列表项中的超链接宽度，分隔导航条目*/
			}
		</style>
	</head>
	<body>
		<div class="div1">
			<h3 style="text-align: left;">使用段落标记和超链接实现网站导航</h3>
			<p>
				<a href="https://www.baidu.com/?tn=98010089_dg&ch=7">百度</a>&nbsp;&nbsp;&nbsp;&nbsp;
				<a href="https://www.sina.com.cn/">新浪</a>&nbsp;&nbsp;&nbsp;&nbsp;
				<a href="https://www.qq.com/">腾讯</a>&nbsp;&nbsp;&nbsp;&nbsp;
				<a href="https://www.sohu.com/">搜狐</a>&nbsp;&nbsp;&nbsp;&nbsp;
				<a href="https://www.163.com/">网易</a>&nbsp;&nbsp;&nbsp;&nbsp;
				<a href="https://www.so.com/">360搜索</a>&nbsp;&nbsp;&nbsp;&nbsp;
			</p>
			<hr align="center" size="3" color="#0066ff">
			<h3 style="text-align: left;">使用无序列表和超链接实现水平导航条</h3>
			<ul>
				<li><a href="https://www.baidu.com/?tn=98010089_dg&ch=7">百度</a></li>
				<li><a href="https://www.sina.com.cn/">新浪</a></li>
				<li><a href="https://www.qq.com/">腾讯</a></li>
				<li><a href="https://www.sohu.com/">搜狐</a></li>
				<li><a href="https://www.163.com/">网易</a></li>
				<li><a href="https://www.so.com/">360搜索</a></li>
			</ul>
			
		</div>
	</body>
</html>

效果如下：

在这里插入图片描述

项目4 设计专业课程导航

实训要求：

利用无序列表与书签链接设计专业课程导航。

实训内容：

（1）超链接的应用
（2）无序列表的应用
（3）书签的应用

知识点：

书签的定义与使用：

通过超链接a标记的name和href属性设置书签名称和书签链接，分以下两个步骤：
（1）定义书签名称

<a name="书签名称">书签标题</a>

（2）制作书签链接

同页面内使用书签链接，格式如下图所示：

<a href="#书签名称" target="窗口名称"></a>

异页面内使用书签链接，格式如下图所示：

<a href="url#书签名称" target="窗口名称"></a>

实训过程：

<!DOCTYPE html>
<html lang = "en">
	<head>
		<meta charset="utf-8">
		<meta name="keywords" content="Web前端开发，网页设计">
		<title>多媒体</title>
		<style type = "text/css">
			@font-face {
				font-family: 'MyNewFont';   /*字体名称*/
				src: url('font/1.TTF');       /*字体源文件*/
			}
			.div1{
				text-align: center;
			}
			h2{
				text-align: center;
			}
			p{
				text-indent: 2px;	/*首行缩进2字符*/
			}
		</style>
	</head>
	<body>
		<h2>专业课程导航</h2>
		<a name="dir0">专业课程导航</a>
		<ul>
			<li><a href="#dir1">数据结构</a></li>
			<li><a href="#dir2">计算机网络</a></li>
			<li><a href="#dir3">机器学习</a></li>
		</ul>
		<h3><a name="dir1">数据结构</a></h3>
		<p>数据结构(data structure)是带有结构特性的数据元素的集合，它研究的是
		</p>
		<h3><a name="dir2">计算机网络</a></h3>
		<p>数据结构(data structure)是带有结构特性的数据元素的集合，它研究的是
		</p>
		<h3><a name="dir3">机器学习</a></h3>
		<p>数据结构(data structure)是带有结构特性的数据元素的集合，它研究的是
		</p>
	</body>
</html>

效果如下：

在这里插入图片描述

化身孤岛的鲸o

关注

5
点赞
踩
41

收藏

觉得还不错? 一键收藏
2
评论
Day_3 HTML5 超链接与多媒体文件应用

项目1 设计简易动漫画廊实训要求：（1）利用超链接和图像标记设计简易灯箱画廊。（2）给简易灯箱画廊增加背景音乐效果。实训内容：（1）超链接的应用（2）无序列表的应用（3）图像标记的应用（4）背景音乐的应用（5）样式表的应用（6）浮动框架的应用知识点（1）超链接标记<a href="" title="" target="">链接内容</a>什么...
复制链接

扫一扫