html图像

将图像插入网页

图片通过使网页更加有趣和丰富多彩来增强网页的视觉外观。

<img> 标记用于在html文档中插入图像，它是一个空元素,仅包含属性，<img> 标记可以使用:

下面的示例在网页上插入三个图像:

例子

<img src="kites.jpg" alt="Flying Kites">
<img src="sky.jpg" alt="Cloudy Sky">
<img src="balloons.jpg" alt="Balloons">

每个图像必须至少具有两个属性: src 属性和 alt 属性属性。

src 属性告诉浏览器在哪里找到图像，其值是图像文件的url 。

然而,那个 alt 属性为图像提供替代文本如果图像不可用或由于某种原因无法显示，它值应该是一个有意义的图像替代品。

备注： 像 <br><img> 元素也是

<img src="kites.jpg" alt="Flying Kites" width="300" height="300">
<img src="sky.jpg" alt="Cloudy Sky" width="250" height="150">
<img src="balloons.jpg" alt="Balloons" width="200" height="200">

你还可以使用 style 属性指定图像的宽度和高度，由于内联样式有最高优先级，因此可以防止样式表意外更改图像大小。

例子

<img src="kites.jpg" alt="Flying Kites" style="width: 300px; height: 300px;">
<img src="sky.jpg" alt="Cloudy Sky" style="width: 250px; height: 150px;">
<img src="balloons.jpg" alt="Balloons" style="width: 200px; height: 200px;">

备注： 最好同时指定两个 width 和 height 属性,以便浏览器可以在下载图像之前为它分配这么多空间。

使用HTML5 Picture 元素

有时，放大或缩小图像以适合不同的设备（或屏幕尺寸）无法正常工作，另外，使用 width 和 height 属性或属性不减小原始文件大小，为了解决这些问题，HTML5引入了 <picture>标记,用于定义图像的多个版本以针对不同类型的设备。

<picture> 元素包含零个或多个 <source> 元素,每个元素引用不同的图像源,和一个 <img> 返回元素在屏幕上进行绘制时所用的y坐标. <source> 元素具有 media 属性，用于指定媒体条件（类似于媒体查询），浏览器使用该媒体条件来确定什么时候应使用特定来源，让我们尝试一个示例:

例子

<picture>
 <source media="(min-width: 1000px)" srcset="logo-large.png">
 <source media="(max-width: 500px)" srcset="logo-small.png">
 <img src="logo-default.png" alt="My logo">
</picture>

备注： 确定是使用显式宽度还是测量宽度的一种简便方法 <source> 元素并在其中选择最佳匹配; 如果未找到匹配项,则 <img> 元素元素 src 属性.此外. <img> 标记必须指定为 <picture> 元素元素。

使用图像映射

图像映射允许你定义图像上的热点,它作用类似于

<img src="objects.png" usemap="#objects" alt="Objects">
<map name="objects">
 <area shape="circle" coords="137,231,71" href="clock.html" alt="Clock">
 <area shape="poly" coords="363,146,273,302,452,300" href="sign.html" alt="Sign">
 <area shape="rect" coords="520,160,641,302" href="book.html" alt="Book">
</map>

属性<map> 标记用于从 <img> 使用其标记 usemap 属性.该 <area> 标签使用inside <map> 元素定义图像上的可单击区域，可以在图像中定义任意数量的可点击区域。

备注： 图像映射不应用于网站导航，他们对搜索引擎不友好，

提示： 有许多用于创建图像映射的在线工具，一些高级编辑器（如Adobe Dreamweaver ）还提供了一组工具，可轻松创建图像map 。