第一章：第7节 HTML图片标记

知道HTML为什么叫超文本标记语言吗？因为HTML页面不仅可以有文字，还可以有链接、图片、音乐、flash动画，普通的文本文件TXT却只能写写文字而已。这节学习如何在页面中显示图片。

<img />:这个是可以显示图片的标记，它是空标记，不需要闭合标签。

看效果：

如果只有<img />是不会显示图片的，在网页里显示图片必须得有图片路径，你需要使用源属性（src）。src 指 "source"。源属性的值是图片的 URL 地址。

URL地址可以填一个绝对的网络地址，比如“

https://www.phpnanshen.com/Upload/image/201611/101478780657102759.png”，要以“http://”开头。也可以填一个相对的地址，例如上面图示的“./bikaqiu.jpg”，“./”代表这个图片在当前页面的目录下，也可以直接这样写“bikaqiu.jpg”。如果是这样写“../bikaqiu.jpg”，就代表图片在当前页面上级目录下。上上级目录是这样写“../../bikaqiu.jpg”，以此类推，上上上级……。

实际开发中推荐用绝对路径指定一张图片的地址，使用相对路径，页面位置变动的话还要去修改图片路径，挺麻烦的。

width和height这两个属性不用我说也应该能看明白，指定图片的宽和高的。

alt属性是就当是对图片的介绍，可有可无。

<img />不用楠神说，大家都会明白，十分重要，网络上没有图片显示的页面很少很少了，用<img />标记显示图片是最常用的方式。有时图片还可以用其他方式显示，比如可以用CSS显示图片，上节我们学习的表格标记，它有个background属性可以设置图片路径显示图片。

额外说明：HTML页面是网络上的一个文件资源，图片也是一个文件资源，我们访问一个含有图片的网站HTML页面，浏览器先去请求HTML页面，获得页面内容，浏览器就去解读HTML标记，当读到<img />标记时，浏览器又会发一个图片文件请求。假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要总共请求 11 个文件。