首页 > html教程 > 正文

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

转载 2019-02-11 0 1

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

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中的标签实现跳转百度官网

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

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

相关文章


  • 用Unity和HTML5开发移动游戏的优缺点
  • 游戏中的HTML词汇大比拼
  • 白鹭HTML5开发者巡回沙龙走进“会耍”的成都
  • PS直播预告|html5+css3打造炫酷3D卡片效果
  • 游吐槽丨道长开喷:《逆水寒》该道歉!炒作low逼,把html说成C语言
  • html页面中图片长宽不一需要根据父级长宽全图不拉伸显示的做法
  • 高端的医院官网响应式模板PSD和HTML+后台界面HTML皮肤套装下载
  • 应届生4天的时间来制作一个简单的HTML按钮和CSS,应该解雇他吗?
  • 作者信息

    藏色散人

    好好学习天天向上!

    最近文章
    PS搞定你的影子 0
    PS黑白照片快速上色技巧 0
    以口袋PUSH案例盘点H5的类型 0