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属性就可以实现；
运行效果：
美丽的风景，这边其实有鼠标的箭头，笔者截图没有截出来。