前端学习Day5
2019-11-01 本文已影响0人
骑猪的baba
1.练习1.1代码
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>这是我第一个前端练习网页</title>
</head>
<body>
<a name="top" id="top"></a>
<center><h1>这是我的个人博客</h1></center>
<hr/>
<center><h2>东风破</h2></center>
<center><a href="https://baike.so.com/doc/2526484-2669235.html">周杰伦</a></center>
<center>
<p>
一盏离愁孤 灯伫立在窗口<br/>
我在门后 假装你人还没走<br/>
旧地如重游 月圆更寂寞<br/>
夜半清醒的烛火 不忍苛责我<br/>
一壶漂泊 浪迹天涯难入喉<br/>
你走之后 酒暖回忆思念瘦<br>
水向东流 时间怎么偷<br/>
花开就一次成熟 我却错过<br/>
谁在用琵琶弹奏 一曲东风破<br/>
岁月在墙上剥落 看见小时候<br/>
犹记得那年我们都还很年幼
而如今琴声幽幽 我的等候你没听过<br/>
<center><img src="1.1.jpg" alt="周杰伦照片"/></center>
谁在用琵琶弹奏 一曲东风破<br/>
枫叶将故事染色 结局我看透<br/>
篱笆外的古道 我牵着你走过<br/>
荒烟蔓草的年头 就连分手都很沉默<br/>
一壶漂泊 浪迹天涯难入喉<br/>
你走之后 酒暖回忆思念瘦<br/>
水向东流 时间怎么偷<br/>
花开就一次成熟 我却错过<br/>
谁在用琵琶弹奏 一曲东风破<br/>
岁月在墙上剥落 看见小时候<br/>
犹记得那年 我们都还很年幼<br/>
而如今琴声幽幽 我的等候你没听过<br/>
谁在用琵琶弹奏 一曲东风破<br/>
枫叶将故事染色 结局我看透<br/>
篱笆外的古道 我牵着你走过<br/>
荒烟蔓草的年头 就连分手都沉默<br/>
<center><img src= "1.2.jpeg" alt="周杰伦的照片"/></center>
谁在用琵琶弹奏 一曲东风破<br/>
岁月在墙上剥落 看见小时候<br/>
犹记得那年 我们都还很年幼<br/>
而如今琴声幽幽 我的等候你没听过<br/>
谁在用琵琶弹奏 一曲东风破<br/>
枫叶将故事染色 结局我看透<br/>
篱笆外的古道 我牵着你走过<br/>
荒烟蔓草的年头 就连分手都很沉默<br/>
</p>
</center>
<hr/>
<center>
<p>
友情链接：<a href="https://www.baidu.com">A网站</a>|<a href="https://www.baidu.com">B网站</a>|<a href="https://www.baidu.com">C网站</a><br/>
<a href="#top" target="_self">回到顶部</a>|<a href="mailto:guoyongrou@126.com? subject=我的联系">联系我们</a>
</p>
</center>
</body>
</html>
效果如下
_E__前端练习_练习1.html (1).png
2.注意几点
- 网页居中显示的时候，可以在body的开始标签之后，body的结束标签之前分别添加center的开始和结束标签，以使得网页整体居中显示
- 网页出现超链接的时候，链接的具体路径不清楚时，可以使用#号代替
- 注意网页的细节，比如网页中插入图片时候和目标网页的图片大小一致，行距是否相同
1.网页图片大小可以通过查看目标网页的源代码，也可以通过浏览器的截图功能拉出其宽度
- 行距如何小了可以通过添加br标签
- 网页中回到顶部的实现代码
<a href="#">回到顶部</a>
也就是表明#具有回到顶部的作用
- 网页内跳转任意位置的设置
html中有一个唯一的属性是任何标签都可以使用的，他就是id。
一个页面中id属性的值只能是唯一的
跳转到元素的位置，直接在href后面加#id的属性值
<p id="here">我是一只特立独行的猪</p>
<hr/>
<a href="#here">我要找到你</a>
- 联系我们设置
实际上就是发送电子邮件的超链接，默认打开计算机的邮件客户端
href="mailto:邮件地址"
<a href="mailto:jhhk@126.com">
3.修改后的代码和效果图
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>这是我第一个前端练习网页</title>
</head>
<body>
<center>
<a name="top" id="top"></a>
<h1>这是我的个人博客</h1>
<a href="#bottom">到底部</a>
<hr/>
<a href="#pic1">到第一张图片<a>
<h2>东风破</h2>
<a href="#">周杰伦</a>
<center>
<p>
一盏离愁孤 灯伫立在窗口<br/>
我在门后 假装你人还没走<br/>
旧地如重游 月圆更寂寞<br/>
夜半清醒的烛火 不忍苛责我<br/>
一壶漂泊 浪迹天涯难入喉<br/>
你走之后 酒暖回忆思念瘦<br>
水向东流 时间怎么偷<br/>
花开就一次成熟 我却错过<br/>
谁在用琵琶弹奏 一曲东风破<br/>
岁月在墙上剥落 看见小时候<br/>
犹记得那年我们都还很年幼<br/>
而如今琴声幽幽 我的等候你没听过<br/>
<img id="pic1"src="1.1.jpg" alt="周杰伦照片" width="300"/><br/>
谁在用琵琶弹奏 一曲东风破<br/>
枫叶将故事染色 结局我看透<br/>
篱笆外的古道 我牵着你走过<br/>
荒烟蔓草的年头 就连分手都很沉默<br/>
一壶漂泊 浪迹天涯难入喉<br/>
你走之后 酒暖回忆思念瘦<br/>
水向东流 时间怎么偷<br/>
花开就一次成熟 我却错过<br/>
谁在用琵琶弹奏 一曲东风破<br/>
岁月在墙上剥落 看见小时候<br/>
犹记得那年 我们都还很年幼<br/>
而如今琴声幽幽 我的等候你没听过<br/>
谁在用琵琶弹奏 一曲东风破<br/>
枫叶将故事染色 结局我看透<br/>
篱笆外的古道 我牵着你走过<br/>
荒烟蔓草的年头 就连分手都沉默<br/>
<img src= "1.2.jpeg" alt="周杰伦的照片" width="300"/><br/>
谁在用琵琶弹奏 一曲东风破<br/>
岁月在墙上剥落 看见小时候<br/>
犹记得那年 我们都还很年幼<br/>
而如今琴声幽幽 我的等候你没听过<br/>
谁在用琵琶弹奏 一曲东风破<br/>
枫叶将故事染色 结局我看透<br/>
篱笆外的古道 我牵着你走过<br/>
荒烟蔓草的年头 就连分手都很沉默<br/>
</p>
</center>
<hr/>
<p>
友情链接：<a href="h#">A网站</a>|<a href="#">B网站</a>|<a href="#">C网站</a><br/><br/>
<a id="bottom" href="#">回到顶部</a>|<a href="mailto:guoyongrou@126.com">联系我们</a>
</p>
</center>
</body>
</html>
修改后.png
