我们随便打开一个网页，都可以看到很多图片，向网页中添加图片是非常重要的一步操作，几乎在前端工作中每天都会用到，在HTML中，用<img>标签来表示图片元素，这是一个单标签，是行内可替换元素，通过属性src来指定图片路径地址，src的属性值本质上是一个链接地址，所以通常是相对地址和http开头的网络图片。
地址分为相对地址和绝对地址，当html文件与图片处在同一个目录下的时候，直接写图片名称就是它的地址，可见相对路径指的是图片相对于当前的页面所在的路径，要用好相对路径，首先得要观察你的网页存放在哪个文件夹下，网页所在的路径就是当前路径，就像刚才我们直接写图片名称的例子；如果当前路径下有个叫images名称的文件夹，那么路径就是images/文件名.图片格式；如果图片放在当前路径的上一层目录下，那么路径就是../images/文件名.图片格式。总之，我们都是以当前页面路径开始，最终找到图片位置，因此我们把这样的写法就叫做相对地址。
绝对地址在实际项目中不会用到，在此我们仅仅做个了解，绝对地址的特征是带硬盘路径，比如把图片放在了D盘，那么路径就为D:/图片.图片格式，一旦当前网页路径变了，比如移动到了C盘，图片就会找不到地址，很不灵活。
所以，我们一定要写相对路径，相对路径有一个非常大的好处，就是只要保证网页文件和图片的相对位置是不变的，无论我把整个项目移动到任何盘下的任何文件夹中，图片都可以正确的找到链接地址，这就是为什么我们一定要写相对路径的原因。
接下来，我们讲下图片格式。
如果网页加载一张图片非常慢，那一定是这张图片体积非常的大，就要对图片做体积上的压缩，而且要尽量保证不失真，不会有任何的模糊。如果网页上图片体积压缩的太小，图片像素低就不清晰，所以在网页上选择一个合适的图片格式尤为重要。
网页上常用的格式有三种：
JPG：有损压缩的格式，对原有图像有较大体积上的压缩，失真度较小，而且在可接受的范围之内。
PNG:无损压缩，体积更小，更重要的是支持背景透明的图片
GIF:动态图片，支持动画是最大的特点，但缺点是颜色种类非常少，只有256种颜色，这样图片颜色失真严重，很难让图片表现出比较细腻清晰的样子。
Img标签有两个必填属性：
Alt：用来显示提示文字，当图片路径错误，或因网络原因加载不出来的时候，提示文字会显示在图片占位上
Title：也是提示文字，当鼠标指针滑动到图片之上的时候显示
写上这两个属性并赋值，有利于SEO优化。
最后，我们讲一下超链接。
互联网中的网站，都是由超链接把每个页面串联在一起的，点击超链接，就可以从一个网页跳转到另一个网页，搜索引擎会把海量的网站页面收录，你可以通过关键词来查找这些页面。可见，超链接的作用功不可没。
超链接用a标签，有个非常重要的属性href，与img标签的src属性值一样，可以写一个地址。如果你写一个后缀名是MP3、MP4、或者xls文件，并不是在线听歌或者看视频，而是下载它。A标签是一个双标签，包裹的文字会显示在页面上，默认是带有下划线的蓝色字体样式，a标签不仅可以包含文字，也可以包含图片，他们都属于行内样式，是可以嵌套的，这个时候我们的图片就变成可点击的了，具有和超链接文本一样的效果，可以跳转到任意网页了。
另外，超链接还有一个属性是name，当一个页面内容非常多，页面很长的时候，你要不停的滑动鼠标中间的滚轮，或者拖动页面最右侧的滚动条，非常麻烦。这个时候，为了方便用户浏览，我们会在页面中做几个链接，当作目录导航，跳转到当前页面的不同行数位置。像这样的技术叫做锚点技术，具体做法是：首先在需要跳转到的位置写上a标签，起好一个名字，写在name属性值中，回到目录链接中，将href属性用#号跟上对应的name属性值即可，那么点击目录结构链接，就可以跳转到当前页面的指定位置了。
最后，讲一下target属性，它有这么几个取值：
第一个叫self，第二个叫blank，第三个叫top，注意这些单词前都要带下划线，最常用的就是self和blank了，在默认情况下是self，他们两个的区别是：通过a链接打开一个新页面，该页面会跳转刷新后打开这个新页面，此时我们再也看不到原来的页面了，如果我们希望保留现在的页面，并打开一个新窗口去加载我指定的新页面，这个时候，我们就可以把这个超链接的target属性值修改为blank。
本节的实战例子会放在QQ群的HTML项目实战文件夹下，请去下载后学习。
