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 属性就可以实现；
运行效果：
美丽的风景，这边其实有鼠标的箭头，笔者截图没有截出来。
我是【程序员的时光】，热爱技术分享，信仰终身学习，欢迎大家关注！我们下期再见！
评论