《编程基础: HTML第三章》:这4行代码,决定了它叫 360
作者|李娜
*本文为「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标签吗?对就是它。
这样无论我们点击那个图片都可以进入百度的页面了!
小伙伴们也可以试试自己建一个页面,把浏览的网站,用自己喜欢的图片的方式替代,然后一点击就会跳转,这样想想会不会有点小激动呢?
你说书签栏,那是什么鬼?
能有你自己做的好吗?请说一遍。我自己做的最好!
当然有什么问题或者需要李娜我给大家分享讲解的地方,可以在留言区留言告诉我,整理后会在公众号里面分享讲解哦!