HTML如何实现跳转？
初学HTML，我为大家带来了列子希望能帮助大家，共同学习交流，不懂得我都会解答，后续尽量保证文章质量，近期一个月都没空，只能敷衍更新一下下啦
本章内容你能学到：css的调用，body背景颜色的设置，段P标签的使用，标题标签，和超链接的使用方法
所用到的工具：HBuilder X3.8.7 ，谷歌浏览器
8-3.1.png
点击译文跳转到这个页面
8-3.2
我创建了一个名为"综合案例-今日搜索热词"的文件夹，css文件我名为niu.css，其中index.html为主文件，sp.html未点击后跳转的文件
文件详情
首先看index.html主文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/niu.css">//调用niu.css文件
<title></title>
</head>
<body bgcolor="#aaaa7f">//bgcolor背景颜色
<h1>古文欣赏</h1>//h1标题标签
<hr>
<h2>桃花源记</h2>
<a target="_blank" href="sp.html">译文</a>//超链接a，跳转去sp.html文件
<p> 晋太元中，武陵人捕鱼为业。缘溪行，忘路之远近。忽逢桃花林，夹岸数百步，中无杂树，芳草鲜美，落英缤纷。渔人甚异之，复前行，欲穷其林。
林尽水源，便得一山，山有小口，仿佛若有光。便舍船，从口入。初极狭，才通人。复行数十步，豁然开朗。土地平旷，屋舍俨然，有良田、美池、桑竹之属。阡陌交通，鸡犬相闻。其中往来种作，男女衣着，悉如外人。黄发垂髫，并怡然自乐。
见渔人，乃大惊，问所从来。具答之。便要还家，设酒杀鸡作食。村中闻有此人，咸来问讯。自云先世避秦时乱，率妻子邑人来此绝境，不复出焉，遂与外人间隔。问今是何世，乃不知有汉，无论魏晋。此人一一为具言所闻，皆叹惋。余人各复延至其家，皆出酒食。停数日，辞去。此中人语云：“不足为外人道也。”(间隔
一作：隔绝)
既出，得其船，便扶向路，处处志之。及郡下，诣太守，说如此。太守即遣人随其往，寻向所志，遂迷，不复得路。
南阳刘子骥，高尚士也，闻之，欣然规往。未果，寻病终。后遂无问津者。</p>
</body>
</html>
在看跳转后的sp.html文件,这里没什么要讲的，我全部用段落p标签，你可以自己修改内容，后续我会讲解，如何插入音频，视频内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body >
<p>译文<br>
东晋太元（公元376-396）年间，武陵有个人以捕鱼为生。有一天他沿着溪水划船而行，忘记了路有多远。忽然遇到一片桃花林，在小溪两岸的几百步之内，中间没有其它树木，花草鲜嫩美丽，地上的落花繁多交杂，渔人对此感到非常诧异。他继续向前行船，想要走到林子的尽头。
桃花林的尽头就是溪水的源头，渔人发现了一座小山，山上有个小洞口，洞里面隐隐约约透着点光亮。渔人便下了船，从洞口走了进去。最开始非常狭窄，只能容得下一人通过。又向前行走了几十步，突然变得开阔明亮。渔人眼前这片土地平坦宽广，房屋排列得非常整齐，还有肥沃的田地、美丽的池塘，以及桑树、竹子这类的植物。田间小路四通八达，鸡鸣狗吠的声音此起彼伏。人们在田间来来往往耕种劳动，男女的穿戴装束，完全如同世俗之外的人一样。老年人和小孩儿，都怡然并自得其乐。
这里的人看见了渔人，感觉非常惊讶，问他是从哪里来的。渔人都详细地作了回答。这里的人便邀请他到家中做客，摆了酒、杀了鸡用来款待他。村里面的其他人听说来了这么一个人，全都来打听消息。他们自己说他们的先祖是为了躲避秦朝时期的战乱，率领妻子儿女乡邻们来到这个与世隔绝的地方，从此他们再没有人出去了，所以和外面的人隔绝了一切往来。村里的人问渔人现如今是什么世道，他们居然不知道有汉朝，更不用说魏、晋两朝了。渔人把自己知道的所有事都一一说了出来，村民们听了都感叹惋惜。其余的人各自又把渔人邀请到自己的家中，都拿出自己的美酒佳肴来款待他。渔人停留了几日后，就向村里的人告辞。村里的人告诉他：“这里的情况不值得对外面的人说啊。”
渔人出来之后，找到了自己的船，就沿着来时的路回去，处处都做了记号。他到了郡城武陵，就去拜见太守，说了自己的这番经历。太守立即派遣人员跟随他前往，寻找渔人先前作的记号，竟然迷路了，后来再也找不到通往桃花源的路了。
南阳有个叫刘子骥的人，是一个高尚的读书人，他听到了这个消息，非常愉快地计划着前往桃花源。但没有实现，不久后就病死了，后来就再也没有探访桃花源的人了。</p>
</body>
</html>
最后看css文件niu.css
h1 {
text-align: center;//居中
}
h2{
text-align: center;//居中
}
body背景你也可以写到css文件中，写代码，尽量养成用英文的习惯，命名文件和id等都尽量用英文习惯，我这里为了方便大家理解就不怎么规范了，重点东西都要养成注释的习惯，在以后工作中也方便自己和他人。
好了，今天内容就到这里了，有什么不懂的欢迎随时评论区或私信我，看到都会解答，仅限于文章内容，以上有什么讲的不规范的内容，欢迎大佬指证我的错误。
网友评论