如果你刚开始建立网站，那么为网站内所有的图像创建一个文件夹是个良好的习惯。

  • 需要使用<img>元素来向页面中添加图像。这是一个空元素（即没有结束标签），<img>元素必须包含以下两个特性：
    1.src
    这个特性告诉浏览器在何处可以找到所需的图像文件。特性值通常是一个指向网站内某个图像的相对URL。
    2.alt
    这个特性对图像进行文本说明，你无法查看图像时这段说明会对图像进行描述。
    如果图像只是用来使页面更加美观（并且它没什么含义，例如一条图像分割线），那么alt特性仍然可以使用，但应使用空引号。
    3.title
    也可以在<img>元素中使用title特性来提供有关图像的附加信息。大部分浏览器在光标悬停在图像上时会以提示的方式显示title特性的内容。

图像的宽度和高度

你经常会看到<img>元素使用另外两个特性来指定它的大小。
-height
这个特性以像素为单位来指定图像的高度。
-weight
这个特性以像素为单位来指定图像的高度。

图像往往比构成页面中其余HTML代码耗费更多的加载时间。所以，一种好的解决方法是事先指定图像的大小，这样浏览器就可以为正在加载的图像留出合适的空间余量，同时继续显示页面上的其余文本。
相对于采取HTML，越来越多的人采用CSS来指定图像的大小。

图像的衡量和分辨率

-当你设定用于屏幕显示的图像的大小时，应该使用像素来设定图像的大小（而不要使用厘米或英寸）
-显示在计算机屏幕上的图像由称为像素的小方块构成。屏幕的分辨率就是每英寸的屏幕上所容纳的像素数;在大多数计算机上,这个数值是可以提高或降低的。
-如果一个屏幕的分辨率设置为640像素X480像素，然后将分辨率提高为1024像素X768像素，那么在此屏幕上显示的图像和文本将变小，这是因为屏幕在同样大小的空间内显示了更多的像素。

图形和图形说明

<figure>:
图像往往带有说明，HTML5引入一个新的<figure>用来包含图像以及对图像的说明，并且这两项是相关联的。
只要图像的说明是相同的，你就可以在<figure>元素中添加多个图像。
<figcaption>:
在HTML5中引入<figcaption>元素是为了让网页设计人员给图像添加说明。
那些不理解HTML5元素的浏览器会直接忽略新元素，而只显示其中的内容。

eg:

<html>
    <body>
            <img src="360wallpaper.jpg" alt="很棒的一张图片" title="Good" width="600" height="450">
            <br />
            <figcaption>Everything is possible!</figcaption>
    </body>
</html>

效果如下图:

小结

  • <img>元素用于向网页中添加图像。
  • 必须为<img>元素指定src特性和alt特性，src特性用来表示图像的源地址，alt特性用来描述图像的内容。
  • 应该根据图像在网页上显示的大小来保存图像，并将其保存为合适的格式。
  • 照片最好保存为JPEG格式;使用单色的插图或徽标更适合保存为GIF格式。