web进阶之二:写一个简单的网页。
2018-09-07 本文已影响55人
甚得朕心
我们需要怎么写
我们要心中有个想法，我这个网页要有什么，有哪些功能。不过一般都会有美工给你做好图或者根据客户需要做一个效果图，然后就是设计，实现各种各样的功能。在这里我们只做一个简单的网页：
- 实现网页内顶部和底部的跳转
- 实现网页的跳转
- 插图片。
直接上代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>韩磊—《等待》</title>
<link rel="stylesheet" type="text/css" href="style.css">
<!--
1.写外部样式表时，要注意样式表的文件名要以.css结尾，可以用sublime或者webstorm编辑好了再保存
2.链接外部样式表时，要在<head>内，然后写上链接的标签。
-->
</head>
<body>
<center>
<a href="#bottom">去底部</a>|<a href="#tar">去歌词部分</a>
<a name="top"></a>
<h1>甚得朕心之韩磊——等待</h1>
<hr/>
<h2>等待</h2>
<a href="https://baike.baidu.com/item/%E9%9F%A9%E7%A3%8A/32383?fr=aladdin" target="blank">韩磊</a>
<!--上一行为超链接，target表示目标为一个空的网页，如果不写将会在本网页重新加载链接网页-->
<p>
<a name="tar"></a>
我为什么还在等待<br>
我不知道为何仍这样痴情<br>
明知辉煌过后是暗淡<br>
仍期待着把一切从头来过<br>
我们既然曾经拥有<br>
我的爱就不想停顿<br>
每个梦里都有你的梦<br>
共同期待一个永恒的春天<br>
春天<br>
<img src="pic02.jpg"> <br>
我为什么还在等待<br>
我不知道为何仍这样痴情<br>
明知辉煌过后是暗淡<br>
仍期待着把一切从头来过<br>
我们既然曾经拥有<br>
我的爱就不想停顿<br>
每个梦里都有你的梦<br>
共同期待一个永恒的春天<br>
春天<br>
<a href="http://s.music.so.com/s?q=%E7%AD%89%E5%BE%85#src=so" target="blank">点击试听</a><br>
<img src="pic01.jpg" width="300" height="450" > <br>
</p>
<hr/>
<a href="#top">返回顶部</a>|<a href="https://www.jianshu.com/u/f7b98666a32e" target="blank">给我留言</a>
<!--站内的锚点也是用了超链接的方式
1.首先要在制定的位置定义一个名字(比如：top)
2.在需要显示点击跳转的地方，写上超链接<a href="#+需要去的位置的名字比如top">去顶部</a>
3.通过1和2就能实现在网页内跳转到底部或者顶部的位置。
-->
<dir>友情链接:
<a href="https://www.xiami.com/artist/305" target="blank">虾米好听韩磊</a>
</dir>
<a name="bottom"></a>
</center>
</body>
</html>
效果图:
001.JPG
在这张图片的顶部，我写了一个“去底部和去歌词部分”，在点击这个两个链接时，就会跳转到所去的位置。因为我在底部的位置和歌词的位置各设置了一个锚点。
<a name='bottom'></a>
<!---底部的锚点-->
<a name='tar'></a>
<!--歌词部分的锚点-->
这样设置之后，在网页想要呈现的地方，再把它调用出来
<a herf='#bottom'>去顶部</a>|<a herf='tar'>去歌词部分</a>
<!--在需要显示的位置写出来，这样一点击，就会到设置好的位置。-->
在“韩磊”的位置，我用了一个超链接，实现网页的跳转，到韩磊的百度百科主页。
<a herf="https://baike.baidu.com/item/%E9%9F%A9%E7%A3%8A/32383?fr=aladdin" target="blank"></a>
<!--herf后面跟着网页的地址，target后面我选择网页的打开的位置为空白页，如果不写，就会在当前页面跳转。-->
002.JPG
同理，上图片中的，返回顶部也是设置锚点来实现。而给我留言和虾米好听韩磊，则是采用了超链接，跳转到其他的页面。
