Java联盟

《编程基础: HTML第三章》:这4行代码,决定了它叫 360

2017-08-28  本文已影响0人  Java联盟

作者|李娜

*本文为「Java联盟」原创内容,转载无需授权,请保留署名来源。

前言

今天拿百度官网来开开刀,大家都知道百度网站是一个比较简单的网页,主要的结构就是百度的 LOGO 和一个搜索框。

如果没有这个实现 LOGO 图片的代码,那么百度就只剩下个搜索框了。

那这个 LOGO 代码是如何实现的呢,如果要在这个 LOGO 加上一个跳转页面,又是要如何实现?

那么我们现在就来开始讲解第三节的内容。

那么提到路径的话就分两种了。

1.绝对路径(完整的描述文件位置的路径)有两种方式:

一是从盘符出发的路径,相信小伙伴们应该有安装软件的经历,我们选择的安装目录,就是软件的路径。

类似于这样:C:\Program Files\EditPlus 3盘符这就是一个完整的从盘符出发的路径。

(在这种情况之下,我们加载到页面的图片只有我们的电脑可以显示,别人打开这个页面,是没法加载图片的,因为别人的电脑不一定有同样的路径 甚至同样的路径之下未必有同样的图片。)

还有一种就是从服务器出发的,简单来说我们看到网上的图片想要添加到我们的页面上,选择图片鼠标右键复制图片地址,(这个地址就是图片所在服务器空间的文件目录地址)

我们把这个地址粘贴到src属性这里 就可以在我们的页面中看到这张图片了。

当然除了上面讲两个属性还有很多属性哦!

像可以用width属性用来设置图片的宽度和height属性来设置图片的高度哦!

效果如下

说到这里你肯定知道,百度的LOGO是怎么加上去的了。

下面我来给大家出个小题目,知道的可以在评论留言哦。

我会一一评论点评的!

下面的4种情况是如何实现呢?

1.文件夹1里面文件夹2,图片在文件夹2里面,html和文件夹1同一目录。

2.图片和文件夹1同一目录,html在文件夹1里面。

3.图片和文件夹1同一目录,文件夹1里面文件夹2,html在文件夹2里面。

4.图片在文件夹2里,html在文件1里面,文件夹1和文件夹2同一目录。

可以自己尝试做一下吧!

注意一下:我们在编写代码的时候所有的标点符号都在英文输入法下哦!!!

好了图片标签就讲完了,那我们开始来说后面的一个问题,如果要在这个 LOGO 加上一个跳转页面,又是要如何实现?

我们先复制百度LOGO的图片地址。

小伙伴们还记得上篇文章中提到的超链接标a标签吗?对就是它。

这样无论我们点击那个图片都可以进入百度的页面了!

小伙伴们也可以试试自己建一个页面,把浏览的网站,用自己喜欢的图片的方式替代,然后一点击就会跳转,这样想想会不会有点小激动呢?

你说书签栏,那是什么鬼?

能有你自己做的好吗?请说一遍。我自己做的最好!

当然有什么问题或者需要李娜我给大家分享讲解的地方,可以在留言区留言告诉我,整理后会在公众号里面分享讲解哦!

有疑问?请留言!关注Java联盟微信公众号,看Java要闻!

上一篇下一篇

猜你喜欢

热点阅读