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

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

任务要求：写个网页

主题：自选，健康；
实现方法：
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，不需要自动播放的话，插入音乐的方法非常多。首先

其实不自动播放的话后面这些属性应该都可以不设置。

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>

第一次网络信息基础作业记录文档相关推荐

jmeter优化记录文档
文章目录 jmeter优化记录文档 jvm 优化参考文档 jmeter 优化系统相关信息: 系统环境: 硬件信息: 系统参数调整 jmeter内存溢出错误日志如下情况分析解决方案 jmeter ...
OMRON CJ系列CJ1W-EIP21通过网关设备 EtherNetIP转RS232/485与Modbus Slave软件测试记录文档
OMRON CJ系列CJ1W-EIP21通过网关设备 EnTalk EtherNetIP Adapter - RS232/485与Modbus Slave软件测试记录文档时间:2021年2月26 记 ...
FreeMarker中文帮助手册API文档,基础入门学习文档
FreeMarker中文帮助手册API文档,基础入门学习文档分类: 编程技术发布: bywei 浏览: 7 日期: 2011年5月28日分享到: QQ空间新浪微博腾讯微博人人网什么是Fr ...
一个基础的 HTML 文档有哪些标签？（3）
作者简介作者名:1_bit 简介:CSDN博客专家,2020年博客之星TOP5,蓝桥签约作者.15-16年曾在网上直播,带领一批程序小白走上程序员之路.欢迎各位小白加我咨询我相关信息,迷茫的你会找到 ...
php基础快速入门文档,快速入门 - Laravel 5.8 中文文档手册 - php中文网手册
Eloquent:入门简介 Laravel 的 Eloquent ORM 提供了一个漂亮.简洁的 ActiveRecord 实现来和数据库交互.每个数据库表都有一个对应的「模型」用来与该表交互.你可 ...
大学计算机基础应用word,大学计算机基础实验4-word文档的综合应用
大学计算机基础实验4-word文档的综合应用 Word 文档的综合应用 (一)表格制作 [实验目的] 1．熟练掌握表格的建立及内容的输入. 2．熟练掌握表格的编辑. 3．熟练掌握对表格的格式化. 4． ...
网络上的FreeBSD在线文档
网络上的FreeBSD在线文档. 1.FreeBSD使用手册 2.FreeBSD Handbook中文版 (张纪青译) 3.FreeBSD Porter's Handbook中译本 4.FreeBSD ...
大学计算机word排版作业,大学作业 word 文档排版.doc
大学作业 word 文档排版经历的一切只是一场虚伪的游戏,满意答案时间会说明.用键盘敲击出的誓言.多么.的.不堪一击. 那些浮躁又有些肤浅的青春 .抬头看到阳光 ...
第七节：C#工业控制编程基础--读写txt文档实验
第七节:C#工业控制编程基础–读写txt文档实验文章目录第七节:C#工业控制编程基础--读写txt文档实验一.实验目的: 了解C#文件的读写. 二.实验内容: 用C#将文本写入指定txt文件,并 ...

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

第一次网络信息基础作业记录文档相关推荐

最新文章

热门文章