写点什么

HTML(三)——在网页中使用图像 img

发布于: 2021 年 01 月 19 日
HTML(三)——在网页中使用图像img

1.初识网页图片


首先新建一个 index.html 网页,同时把一张后缀名为.jpg 的图片也放在这个文件夹中;



然后用<img/>标签实现网页图片:<img src="图片路径"/>


<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body><img src="1.jpg"/></body></html>
复制代码


注:这里用的是相对路径; 


运行结果:



2.相对路径和绝对路径


如果图片文件在父一级的文件夹里,该如何使用呢?



比如在 index1 文件中我想引用父一级的 yan.jpg 图片,则可以用"../"来表示;


<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body><img src="1.jpg"><img src="../yan.jpg"><!-- 父一级的图片文件引用需要用"../"才可以 --></body></html>
复制代码


运行结果:



绝对路径:


我们在网上找一张图片,复制图片地址;


<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body><img src="1.jpg"><img src="../yan.jpg"><!-- 父一级的图片文件引用需要用"../"才可以 --><img src="http://pic1.nipic.com/2008-12-30/200812308231244_2.jpg"/><!-- 直接引用图片的绝对地址 --></body></html>
复制代码


运行结果: 



本地硬盘图片:


 在 src 中加上图片路径即可


<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body><img src="1.jpg"><img src="../yan.jpg"><!-- 父一级的图片文件引用需要用"../"才可以 --><img src="http://pic1.nipic.com/2008-12-30/200812308231244_2.jpg"/><!-- 直接引用图片的绝对地址 --><img src="D://fengjing.jpg"><!-- 引用本地硬盘的图片,加上文件路径即可 --></body></html>
复制代码


运行结果: 



3.设置图片的尺寸 


在 img 中我们可以添加 height 和 weight 属性,来设置图片的大小;


<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body><!-- 直接引用图片的绝对地址 --><img weight=300 height=300 src="http://pic1.nipic.com/2008-12-30/200812308231244_2.jpg"/></body></html>
复制代码


运行结果:



可以发现小了很多

4.用 alt 属性为图像设置被替换文本


当我们图片刷不出来的时候,可以用 alt 属性来暂时告诉用户这个图片的内容;


比如我们加一个不存在的图片,那么网页刷出来肯定是这样子的:



此时我们在 img 属性中添加 alt 属性:


<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body><img alt="这是风景照" src="1.jpg"></body></html>
复制代码


运行结果: 



可以起到提示作用!

5.用 title 属性为图片设置标题


当我们用鼠标触碰到图片时,网页会给我们提示这是什么,这个是怎么实现的呢?


<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body><img alt="这是风景照" title="美丽的风景" src="1.jpg"></body></html>
复制代码


用 title 属性就可以实现;


运行效果:



美丽的风景,这边其实有鼠标的箭头,笔者截图没有截出来。


我是【程序员的时光】,热爱技术分享,信仰终身学习,欢迎大家关注!我们下期再见!


发布于: 2021 年 01 月 19 日阅读数: 12
用户头像

程序员的路,会越来越精彩! 2020.04.30 加入

公众号:程序员的时光 记录学习编程的一路时光,从小白到现在也能稳操胜券; 主要从事Java后台开发,数据结构与算法,设计模式等等; 欢迎一起交流,分享经验,学习进步!

评论

发布
暂无评论
HTML(三)——在网页中使用图像img