实验一：HTML语言基础

需要完整代码和图片直接划到最后

一、实验要求

参考课堂锚链接页面代码，以“两弹一星功勋科学家”或者“王者荣耀”为主题，制作科学家或游戏英雄的介绍页面，要求点击某位科学家或英雄链接后，跳转到该科学家或英雄的介绍。

二、实验过程

分析各类超链接，以及自己需要的哪些，初步整理结构，去找内容，图片，填充。
最后用

返回顶部

返回首页

返回页面

三、实验结果

1.实验效果图

2.关键代码

三、项目心得

超链接有许多种，这里用了最简单的一种，a href，可以进一步完善，多去学习外部链接，页面返回链接，图片链接，下载连接等。

四、全部代码及图片

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>王者荣耀</title></head><body><div><img src="wangzherongyao.jpeg" width="96" align="left" /><h1>  王者荣耀</h1></div><br /><hr /><h2><a name="top">目录</a></h2><ol><li><a href="#s1">周瑜</a></li><li><a href="#s2">小乔</a></li><li><a href="#s3">孙策</a></li><li><a href="#s4">大乔 </a></li></ol><hr />    <h3><a name="s1">周瑜</a></h3><p><img src="zhouyu.gif" width="136"/><br /><br />周瑜，字公瑾，三国江东英豪之一。先辅佐孙策，后在孙权帐下为都督。为人风流倜傥，善音律，人称度曲周郎，留下“曲有误，周郎顾”的美谈。周瑜最著名的战绩，是在赤壁之战中，与刘备合作，大败曹军，奠定了天下三分的格局。周瑜在此战役，起了最主要的作用。而《三国演义》中那个心胸狭隘的周瑜，并非历史的真实<br><br>流火之矢冷却值：0.6消耗：50 被动：周瑜普通攻击和技能的火焰会对敌人和敌方建筑叠加引燃印记，持续4秒；叠加满4层后目标将被引燃，在4秒内每秒承受125（+17%法术加成）点法术伤害并减少其30%移动速度，持续1秒；引燃期间目标不会再被叠加印记<br><br>东风浩荡冷却值：5/4.6/4.2/3.8/3.4/3消耗：60周瑜向指定方向召唤狂风形成一个单向风区，风区内己方英雄移速提升10%，敌方英雄移速降低20%，持续3秒，狂风吹起瞬间，还会将附近的敌人朝风向方向击退并造成200/240/280/320/360/400（+30%法术加成）点法术伤害，火区若被风区持续覆盖1秒，会朝风向方向蔓延出新的火区，火区每0.5秒对敌人造成一次125/150/175/200/225/250（+17%法术加成）点法术伤害<br><br>流火之矢冷却值：0.6消耗：50周瑜下令发射火矢轰击指定目标区域，火矢轰击会造成250/300/350/400/450/500（+34%法术加成）点法术伤害并留下一块火区，持续6.5秒，每0.5秒对火区内敌人造成一次125/150/175/200/225/250（+17%法术加成）点法术伤害。火区的数量若超过5个将清除较早生成的火区。火矢每8.5秒可储备1次，最多储备3次。被动：周瑜处于火区之中每0.5秒回复40/42/44/46/48/50(+5%法术加成)点生命值<br><br>烽火赤壁冷却值：10/10/10消耗：100周瑜向指定范围方向召唤一片火焰，造成200/300/400（+40%法术加成）点法术伤害，火焰掠过火区会激起一道火风，火风会造成额外200/300/400（+40%法术加成）点法术伤害并将敌人晕眩1秒<br></p><br /><br /><h3><a name="s2">小乔</a></h3><p><img src="xiaoqiao.jpeg" width="136px"/><br /><br />本应是小桥。小桥和大桥是姐妹俩，是东汉末年庐江士族桥玄的女儿。《三国演义》将二人说成大小乔。江南二乔，是出名的美女，大乔嫁于孙策，小乔嫁给了周瑜。周瑜风流倜傥，人称度曲周郎，跟小乔十分相得。曹操率军南下，击破荆州刘表，威逼江南。有传说，说曹操就是为了二乔而来。抢夺二乔，置于铜雀台。所以，唐朝诗人杜牧有诗道：“东风不与周郎便，铜雀春深锁二乔。”《三国演义》里诸葛亮游说孙权抗曹，也沿用了这个传说。<br><br>十多年前，江东名门乔氏诞生一对双生女婴时，曾掀起一场轩然大波。对精于魔道的家族而言，双胞胎是不吉利的。最终，双胞胎中的妹妹被送往稷下寄养。也许因为缺少家族的束缚，小乔并没有成为姐姐那样的完美女性，而是更加无拘无束的长大。成长为少女的小乔终于被接回家中时，人人都嘲笑她的天真，同情心，以及不切实际的乐观——直到他们被她强大的法力所震慑。小乔天生就能将复杂的魔道运用自如，那种天赋就流淌在她的血液里，无需教导也挥之不去。<br><br>长辈们担忧暴露家族的秘密陷入恐慌，再度将小乔送往东海边的城镇，要让女孩在乡下终老。没过多久，奇怪的疾病莫名开始在沿海流行。恐慌中的人们向封锁城镇的士兵发起冲击，最后演变成暴乱。而奉命前来镇压的，正是周瑜。<br><br>小乔敏锐意识到风的影响。她试图唤起和风吹散带有染病孢子的毒雾。一片慌乱，她镇定施展的强大法术引起了周瑜的注意。他无情的将少女作为嫌疑犯羁押。两人的初次会面发生在简陋的大牢中，小乔少有固执的说服英俊的军官。整整一夜过去，周瑜终于相信傻气少女的空气传染理论，而她则彻底沦陷在一见钟情的爱慕中。两人的合作不仅解救人们的生命，意外的收获是，周瑜开始警惕到数百里外的海面上和血族的传闻。几个月后瘟疫终于平息，周瑜返回江郡时，他已经无法违背心意丢下小乔独自离开了。对他背负重任的人生而言，小乔是照亮阴暗心海、最璀璨的星辉。世人皆知，铁血都督周公瑾以坚定的意志和不苟言笑的冷酷著称。任何人都无法动摇他。在他如尺规般明确的人生中，只有小乔是违背人生信条的唯一意外。“希望和奇迹是存在的！”</p><br /><br />    <h3><a name="s3">孙策</a></h3><p><img src="sunce.jpeg" width="136px"/><br /><br />孙策，字伯符，吴郡富春人。绰号“小霸王”，是长沙太守孙坚的长子，其妹孙尚香，赤壁之战后，嫁于刘备为妻。孙策其人容貌俊美，性格阔达，十几岁时便四处结交名士，也是难得一遇的军事奇才，用兵如神。孙策与周瑜同岁，自幼相识，后来孙策跟着父亲孙坚行军打仗，二人便失去了联系，重逢后，仍推诚相待，联手占据江东六郡后，一起娶了乔家二位美人，成了连襟关系。<br><br></p><br /><br /><h3><a name="s4">大乔 </a></h3><p><img src="daqiao.jpeg" width="136px"><br>即小乔的姐姐，江东庐江桥玄的女儿。传说都是国色天香，大乔嫁给了孙策，小乔嫁给了周瑜。她们的名字，在《三国志》里有零星的记载。<br><br>古老的魔道家族：江东乔氏，谨守着复杂而令人窒息的传统，以维持源自太古的，血脉中代代相传的魔道。然而最担心的事终究还是发生了：千百年来诞生的第一对双生女婴，似乎应验了家谱中关于乔氏一族终会败亡的预言。家族的长辈恐惧着，作出无情的决定：培养姐姐作为家族继承人，妹妹则从家谱中抹去，送往稷下寄养。大乔在家族严格的教养下，成长为气质高贵的少女，除了她从不愿靠近大海的怪癖，一切都完美无暇。可令族人不满的是，她始终没有展现出身为继承人应有的力量。难道从前的决定是错误的？唯有乔氏族长——她的祖父抱持顽固的信心。“海的新娘”，老人这样留下了令人迷惑的临终遗言。彼时沿海的土地处于动荡中，江东的统治者听闻了大乔的美名，想要拥有她。乔氏族人不再有耐性，决定屈服，献上这美丽又无用的贡品。失去了庇护她的祖父，唯一的姐妹也远在稷下，大乔答应为家族的利益牺牲，要求则是出嫁前让自己去海边向祖父的灵魂祈祷。族人们同意了。她提着灯笼登上临海的礁石。海的波涛述说着她才能听懂的话语：它在斥责她，诅咒她的血脉，要追溯到很久很久之前，远在封神战争之前的恩怨……魔道家族的起源……少女冷静的承受着远古幽魂的怨怒，岿然不动，专心守护微小的灯火，那是她主宰命运的唯一希望。夜雾和阴云都无法遮蔽微弱又顽固的光亮。族人们安心了，认定少女不可能逃走。夜深了，连续三天的仪式令人疲惫，黎明来临时一切就会结束。他们送走海的新娘，交换家族的荣光。忽然海潮高涨起来，看守们惊醒了。不，那不是潮水！是船队！从海上偷袭江郡，乘风破浪而来的大船！水手和他们的领导者本该迷失于黑暗的茫茫大海，可那盏明亮的灯指引了他们，漩涡和潮水为他们引路，孤注一掷成功了！惊慌的人们还不知道，江东正迎来新的统治者，长久的战乱会因这场突袭终结。孙策，从大船上第一个跳下的青年，迎着暮霭和喷薄光芒的朝阳，大步走向在暗夜为他们点亮明灯的少女。几乎形影不离的同伴紧随其后。青年朝少女伸出了手……那飞扬而自信的身影，成为生命中最璀璨的记忆。………………时光如梭，所有美好都已灰飞烟灭。当东风祭坛点亮时，女郎走出隐居的处所，遥望那道光芒划破长空。自所爱之人离去，灯笼初次闪烁起微光。江东魔道名门最后的继承者，骨子里却铭刻着出人意料的高傲和叛逆，未有一刻想过要顺从沉重的命运。如今，她似乎已再度抓住契机，去逆转不可能的过往。“守望着天空，大海，和你的回忆。”<br></p><hr><div align="right"><a href="#top">返回顶部</a>          </div><div align="left"><a href="demo.html">返回首页</a>          </div></body>
</html>

注：图片来源于网络，侵权联系删除。

web前端实验系列juster相关推荐

【Web前端学习系列01】—HTML
[Web前端学习系列01]-HTML HTML 基本标签-head head title标签 meta标签 link标签 style标签 script标签 base标签文本标题标签 h 段落标签 ...
web前端实战系列[4]——多级菜单
1.代码 <!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8 ...
web前端复习系列[1]——标签
<h1>一般用于网站标题. 加入强调语气,使用<strong>和<em>标签.<em> 表示强调,<strong> 表示更强烈的强调.并且在 ...
web前端实战系列[1]——三列布局
1.代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
----web前端实验二
学习目标: 前两道第一题: 提示:仅做参考,记得修改class 和 id <!DOCTYPE html> <html lang = "en"><he ...
前后端解析_好程序员Web前端教程分享前后端分离接口
随着互联网的高速发展以及IT开发技术的升级,前后端分离已成为互联网项目开发的业界标准使用方式.在实际工作中,前后端的接口联调对接工作量占Web前端人员日常工作的30%-50%,甚至会更高.接下来的好程 ...
Web前端小测试——Vue简易投票(根据票数实时更新排名)
前言:新人投稿,不足之处,还望斧正! 这段时间有个Web前端实验上机测试,当时没有在限定的时间内做出来的,真的感觉自己好笨好笨,所有积累的理论基础感觉自己没有任何一丢丢可以拿上台面来,过后也因此不敢去 ...
Web前端开发人员和设计师必读文章推荐【系列二】
这篇文章继续向大家分享Web开发和设计精华文章,文章主要来自今年6月份发布在梦想天空博客的博文.梦想天空博客专注于分享Web开发技术.资源和教程,展示最新 HTML5 和 CSS3 技术应用,分享实用 ...
Web 前端开发精华文章推荐（jQuery、HTML5、CSS3）【系列十二】
2012年12月12日,[<Web 前端开发人员和设计师必读文章>系列十二]和大家见面了.梦想天空博客关注前端开发技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HT ...

web前端实验系列juster