html图像

分享于 

5分钟阅读

Web开发

 

将图像插入网页

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

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

src="URL" alt="some_text"

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

例子


<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;">

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

使用HTML5 Picture 元素

有时,放大或缩小图像以适合不同的设备(或屏幕尺寸)无法正常工作,另外,使用 widthheight 属性或属性不减小原始文件大小,为了解决这些问题,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 。


图像  images  
相关文章