将图像插入网页
图片通过使网页更加有趣和丰富多彩来增强网页的视觉外观。
<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 。