第一次网络信息基础作业记录文档

比比兽卡卡

已于 2022-10-04 05:56:49 修改

阅读量553

点赞数 3

分类专栏：网信作业文章标签： html5 javascript

于 2020-11-20 18:20:16 首次发布

本文链接：https://blog.csdn.net/weixin_44886869/article/details/109856303

版权

网信作业专栏收录该内容

3 篇文章 1 订阅

订阅专栏

第一次网络信息基础作业记录文档
这是我第一次网信作业的记录，欢迎大家讨论与指正

任务要求：写个网页

主题：自选，健康；
实现方法：
a) 使用HTML5编写，用文字编辑器，不要使用Frontpage之类的软件；
b) 主页面命名使用mypage.html，以便检查；
基本功能：
a) 要求插入图片和音乐（在远程主机上可用）；
b) 设计带有联系人电子邮件地址的超链接，点击后可向其发送电子邮件；
c) 必须有个登陆的表单，action属性暂时空置，留待第2次实验补充；
d) 创建可实现页面跳转的超链接；
e) 基本功能在两个小时内完成；
允许使用CSS、JavaScript增强页面效果和功能；
如果使用了课堂之外的内容（包括HTML5标签），必须附上注释，高亮显示；
如果遇到问题记录到文档中（包括解决方法），就是这儿。

主题：巴黎圣日耳曼的几位球员

最终效果：

图片来源于百度文库
编辑器：Sublime Text 3

大二学前端的时候用过一阵子，相当于一个加强版的记事本，用记事本也可以，因为第一次作业仅使用文本编辑。

按照任务要求，首先讨论插入图片和音乐的代码

事先在网页html文件的相同文件夹中下载好三位前锋球员的图片
我选的是内马尔姆巴佩迪马利亚，左中右各一个
放同一文件夹的原因是后面好写相对路径，这是后话

插入图片：

在这里插入图片描述
dimaria.jpg是我的文件命名， alt 属性为用户由于某些原因无法查看图像时提供了备选的信息，width 和 height 自由设置

音乐的部分搞得复杂了一点，因为想弄个自动播放，加了一点js，不需要自动播放的话，插入音乐的方法非常多。首先

其实不自动播放的话后面这些属性应该都可以不设置。
allez.mp3是下载好的巴黎圣日耳曼队歌
id是我下面找到这段音乐的方法
后面

在这里插入图片描述

这样网页就可以自动播放音乐了。为了美观，顺便把播放模块给隐藏了。

第二部分：超链接

超链接还是挺简单的，我直接把超链接放在了图片上。
在这里插入图片描述
看左下角的链接，我直接给导到百度百科去了

在这里插入图片描述

加上target的好处是不会每次点开都把原网页顶掉。
第三部分
登陆表单估计主要在第二次实验做，目前还没有写action，提交表单之后貌似相当于刷新界面

Email就一句话的事儿：

<a target="_blank" href="mailto:youremailid@xxx.xxx" alt="email address">send E-mail</a>

在界面上
点击后呼出邮件功能
在这里插入图片描述
至此，完成了所有功能并使用了少量JS以添加效果，完成实验！

过去很久了，更新一下原文吧

<html>
<head>
	 <title> mypage </title>
	 <audio id = "audio" src="./allez.mp3" hidden = "true" controls = "controls" autoplay="autoplay" loop="true"></audio>
</head>
<body>
	<h1>Welcome to Paris Saint-Germain F.C.!</h1>
	<h1>欢迎来到巴黎圣日耳曼！</h1>
	<h3>Here are three forward members</h3>
	<p>Click on pictures to learn more!</p>
	<!--注释是这样写的 -->
	<!-- 前面是一些基础文字设置-->
	<a  target="_blank" href="https://baike.baidu.com/item/%E5%86%85%E9%A9%AC%E5%B0%94%C2%B7%E8%BE%BE%E5%B8%AD%E5%B0%94%E7%93%A6/4460782?fromtitle=%E5%86%85%E9%A9%AC%E5%B0%94&fromid=3431139&fr=aladdin/">
	<img src="Neymar.jpg" alt="Neymar" width="237" height="332"/>
	</a>

	<a  target="_blank" href="https://baike.baidu.com/item/%E5%9F%BA%E5%88%A9%E5%AE%89%C2%B7%E5%A7%86%E5%B7%B4%E4%BD%A9/19408535?fromtitle=%E5%A7%86%E5%B7%B4%E4%BD%A9&fromid=19416599&fr=aladdin/">
	<img src="mbappe.jpg" alt="Mbappe" width="237" height="332"/></a>

	<a  target="_blank" href="https://baike.baidu.com/item/%E5%AE%89%E8%B5%AB%E5%B0%94%C2%B7%E8%BF%AA%E9%A9%AC%E5%88%A9%E4%BA%9A/2551279?fromtitle=%E8%BF%AA%E9%A9%AC%E5%88%A9%E4%BA%9A&fromid=5426107&fr=aladdin">
	<img src="dimaria.jpg" alt="DiMaria" width="237" height="332"/></br></a>

	<pre>
		    Neymar (AML)                       Mbappe (ST)                      Di Maria (AMR)
	</pre>
	
	<hr>
	<!--三封图片，加下划线，下面弄个发邮件 -->
	<h4>Contact to LPZ, the Website Maker</h4>
	<a target="_blank" href="mailto:2018211094@bupt.edu.cn" alt="email address">send E-mail</a>
	<hr>
	<!--下面表单-->
	<!--一组额外的标签 details 和 summary，把反馈界面单独列出来了-->
	<details>
	    <summary>反馈</summary>
	    <p>

			<form name="data" action=" " method="post">
				请留下你的信息~<br><br>
				用户名：<input type="text" name="user" /> <br/><br/>
				密码：<input type="text" name="password" /><br/><br/>
				本网站使用体验如何？<input type="text" name="experience" /> <br/><br/>
				如需联系，你的电话是：<input type="text" name="phone" /><br/><br/>
				<input type="submit" value="确认" />
			</form>
		</p>
	</details>
	<!--另一个新标签，弹出一个弹窗-->
	<dialog id="dialog">
	     <h4>Question!</h4>
	     <h5>Do you like PSG?</h5>
	     <button onclick="closeModal()">YEEEEEES!!</button>
	 </dialog>

	 <hr>
	 <a  href="redmypage.html">Change to red!</a>

	<!--下面加入了部分JS代码，前面作用是进入网站后自动播放巴黎圣日耳曼队歌，后面是触发弹窗-->
	<script type="text/javascript">
		var audio = document.getElementById("audio");
		audio.play();


		var dialog = document.getElementById("dialog");
	    dialog.showModal();
	    function closeModal() {
	        this.dialog.close();
	    }

	</script>
	<!--加入了一点css代码，以静态修饰网页的背景-->
	<style>
	    body { background-color: #CCEEFF; }
	</style>

</body>
</html>