首页 > html教程 > 正文

Java小练习用HTML中的标签实现跳转百度官网

转载 2019-02-11 0 4

我没事的时候会用百度网站搜一些东西,相信有不少小伙伴都有这种爱好,眼熟不这个就是百度的页面结构

Java小练习用HTML中的标签实现跳转百度官网

要知道图片格式一般分为三种:gif 动态图片, jpg格式, png 格式。

想要引用图片到网页上面需要用到 图片标签。

使用的格式:

其中 img 代表我们现在要想页面中添加的是图片 src 是 img 的属性后面添加图片的路径,也就是我们图片存放的位置。

alt 属性是规定图像的替代文本,就是有的时候图片因为各种原因加载不出来的时候会有一段文字出现在哪边提示我们这是一个什么图片。

路径又分两种

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

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

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

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

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

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

Java小练习用HTML中的标签实现跳转百度官网

相对路径

就是自身相对与目标位置从当前目录出发,HTML 文件和图片在同一目录(文件夹)里,可以直接引用文件名。

符号路径
./当前目录
../返回上一层目录
../../返回上一层的上一层的目录

Java小练习用HTML中的标签实现跳转百度官网

像上图这种情况我们的 html 文件和 图片1.jpg 在同一个页面。同时在 images文件夹中存在图片2.jpg 我们该如何调取这两张图片呢?

Java小练习用HTML中的标签实现跳转百度官网

这样我们打开页面就可以看见这两张图片了。

Java小练习用HTML中的标签实现跳转百度官网

当然除了上面讲两个属性还有很多属性哦!可以用 width 属性用来设置图片的宽度和 height 属性来设置图片的高度哦!

当然这只是一个图片,要想实现点击图片就可以跳转网页的功能还差一点,差一个a标签。把网站的地址,和图片的路径同时写在a标签里面。就像这样。

Java小练习用HTML中的标签实现跳转百度官网

页面的效果:

Java小练习用HTML中的标签实现跳转百度官网

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

看到这里你想到了什么?要不要建一个页面然后用图片把链接包装起来,只有你知道图片后面是哪个链接,这样想想还有点小激动呢!嘿嘿嘿

相关文章


  • 南京seo优化之网站html标签优化分享(徐金华seo博客)
  • 第五节html的链接重要组成,和重要元素记住这些就够了
  • HTML之行内标签、块标签、行内块标签(广州中软卓越)
  • 七夕马上要到了,用HTML语言编写一个礼物,送给女朋友吧
  • “我的人生,我做主!”——中科韬睿TR1802班HTML项目验收
  • PDF转Word太常见了,来看看PDF转HTML的吧!
  • 仿生智能算法之路径智能寻找的HTML及JS动画实现代码
  • 零基础学习HTML背景表单单选按钮复选框上传文件下拉列表