在HTML中已经有了各种字体、颜色、样式之后，今天洪哥带大家一起看看怎么在HTML中插入图片。
我们之前提到过，HTML文档本身是纯文本的，所以不可能像Word一样，直接把文字和图片都保存在同一个文件（.doc文件）里面。在讲HTML中怎么
插入图片之前，我们先谈谈HTML中有哪些外面元素。这里说的图片，肯定就是一种外面的元素了。还有什么呢？Flash算不算，当然算。还有视频对不对？
当然，除了这些我们看得见的元素之外，还有脚本、层叠样式表等我们看不到的元素，这些都是在外部的（这话表达得不是很太好，应该这样讲，这里列出的元素都
可以放在外面，但脚本和样式表其实也可以放在HTML文档里面）。
<html>
<head>
<title>洪哥的HTML页面有图片</title>
</head>
<body>
<font size="7">有图片的HTML文档</font>
<img src="sample.jpg" width="200" height="200" alt="示例图片" />
</body>
</html>
将文件保存为"honge4.html"，并且去找一张jpg格式的图片过来，放到跟hong4.html同一目录，并且命名为sample.jpg。做完这些后，打开honge4.html页面，看看是不是图片已经被插入到网页中了？
然后来解释一下这段代码。<font>标签是设置字体样式的，我们前面已经学习了，所谓“学以致用”，我们这里就拿来用一下。而真正插入图片的标签，我想大家已经看到了，那就是<img>标签。
<img>标签，它是image图片这个单词的简写。顾名思义，那就插入图片了。其中src属性，是source的简写，意思是“来源”。那
么它表示的意思就是图片的路径了。之前洪哥让大家把sample.jpg放到跟hong4.html同一目录，而且设置src="sample.jpg"
时，这里的路径被省略掉了，只有文件名。这是因为洪哥使用的是相对路径，什么是相对路径呢，这样来说吧，honge4.html也在当前目
录，sample.jpg也在当前目录，两个的目录相互抵销了。于是honge4.html在引用sample.jpg图片时，直接就用
sample.jpg的文件名即可了。另外，除了相对路径，那就还有绝对路径了，关于相对路径和绝对路径的问题，我们后面单独写一篇文章来讲。
width和height是我们以后要经常遇到的两个属性，一个表示宽度，一个表示高度。那图片的宽度就表示水平的长度，而高度就表示垂直的长度了。这里
的单位是像素，即px，玩Photoshop的朋友肯定很熟。如果不指定图片的宽度和高度，则图片会使用自己的实际宽度和高度显示在网页上，这样可能会让
网页看起来很丑。不过，如果这里指定的高度和宽度与图片的真实宽高不成比例的话，那图片又会显示扭曲变形，这些都得注意。
alt属性一般人很少用，它的作用是如果图片打不开（原因可能是不存在这个图片，或者其它的），那么将在图片的位置上显示alt属性指定的几个字。听起来
好像没有什么用哈，但实际做SEO（搜索引擎优化）的人，很喜欢搞这个。所说百度图片上进行搜索时，百度都是根据alt属性来判断图片的内容的。
好了，关于图片就说这么多。有一点扩展的，大家可以自己去试试。那就是用图片做超链接！我们已经学习过图片怎么插入了，也学习过超链接是怎么回事了，还讲过标签与标签之间是可以嵌套的，那聪明的你应该知道怎么做了吗？
要饭二维码
