1.添加图像：给网站添加图像需要使用<img>元素，这是一个空元素，其中<img>元素必须包含两个特性:src,alt以及title

其中，src这个特性告诉浏览器在何处可以找到所需要的图像文件。特性值通常可以是一个指向网站内某个图像的相对URL。

alt这个特性对图像进行文本说明，在你无法查看图像时这段说明会对图像进行描述。同时，也可以在<img>元素中使用title特性来提供有关图像的附加信息。大部分浏览器在光标悬停在图像时会以提示的方式显示title特性的内容。

2.创建图像的三条规则：使用正确的格式保存图像、以正确的大小保存图像、以像素来衡量图像

3.常见的图像格式：jpg、png、gif

4.图像的衡量和分辨率：显示在计算机屏幕上的图像由称为像素的小方块构成，屏幕的分辨率就是每英寸的屏幕上所容纳的像素数。

 

 

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加图像</title>
</head>
<body>
<img src="../ch05/timg.jpg" alt="A family of quokka" title="The quokka is an Australian marsupial that is simmilar in
 size to the domestic cat."/>
</body>
</html>

　　


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像的宽度和高度</title>
</head>
<body>
    <img src="../ch05/timg.jpg"  alt="A family of quokka" width="600" height="450"/>
</body>
</html>



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在代码插入图像的位置</title>
</head>
<body>
<img src="../ch05/timg2.jpg" alt="Bird" width="100" height="100"/>
<p>There are around 10,000 living species of birds that inhabit different ecosystems from the
    Arctic to the Antarctic.Many species undertake long distance annual migrations,and many more
    perform shotter irregular journeys.
</p>
<hr/>
<p><img src="../ch05/timg2.jpg" alt="Bird" width="100" height="100"/>
    There are around 10,000 living species of birds that inhabit different ecosystems from the
    Arctic to the Antarctic.Many species undertake long distance annual migrations,and many more
    perform shotter irregular journeys.
</p>
<hr/>
<p>There are around 10,000 living species of birds that inhabit different ecosystems from the
    Arctic to the Antarctic.<img src="../ch05/timg2.jpg" alt="Bird" width="100" height="100"/>
    Many species undertake long distance annual migrations,and many more perform shotter irregular journeys.
</p>
<hr/>
</body>
</html>





<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Images</title>
</head>
<body>
<h1>
    <img src="../ch05/timg.jpg" alt="From A to Zucchini">
</h1>
<figure>
    <img src="../ch05/Chocolate-islands.jpg" alt="Chocolate Islands" title="Chocolate Islands Individual Cakes"/>
    <p>
        <figcaption>
            This recipe for individual chocolate cakes is so simple and so delectable!
        </figcaption>
    </p>
</figure>
<h4>More Recipes:</h4>
<p>
    <img src="../ch05/lemom-posset.jpg" alt="Lemon Posset" title="Lemon Posset Desset"/>
    <img src="../ch05/roasted-brussel-sprouts.jpg" alt="Roasted Brussel Sprouts"
         title=" Roasted Brussel Sprouts Side Dish"/>
    <img src="../ch05/zucchini-cake.jpg" alt="Zucchini Cake" title="Zucchini Cake No Frosting"/>
</p>
</body>
</html>