HTML图像_HTML5学习教程-续电潮

如何才能把图片放到网页上？这要用到img标签。现在网页支持的图像格式有很多，包括典型的gif、jpg、png，当然还有目前谷歌推荐的webp格式。

1. img 图像

img 是英文单词 image 的缩写，意思是图像，它是 HTML 中最通用的定义图片的方式，是一个闭合标签，定义方式如下：

<img src = "url" alt = "" /> <!-- 定义一个图片 -->

其中 src 属性是必须属性，用来指定图片所对应的 URL 地址。

1.1 src 属性

src 的全称是 source，表示图片的 URL 地址源。源就是表示图片的地址路径，这个路径可以是相对路径，也可以是绝对路径。绝对路径指的是一个包含网络协议头的完整路径，常用的网络协议是 HTTP 协议，例如 https://www.baidu.com/img/bd_logo1.png；相对路径是指这个图片文件跟当前的网页在同一个服务域，例如：/img/bd_logo1.png。

<img src = "../_nuxt/img/d.png" /> <!-- 这是一个相对路径 -->
<img src = "https://xudianchao.com/img/bd_logo1.png" /><!-- 这是一个绝对路径 -->

有时当图片过大时或者过多时，网页加载可能会比较慢，这时需要针对图片使用懒加载的方式（图片懒加载），懒加载的原理就是将图片的 src 先设置为空，网页其他内容加载完之后，再通过 JavaScript 将 src 属性赋值，例如：

<div class="container">
  <img src="img/loading.png" alt="1" data-src="photo-1.jpeg">
  <img src="img/loading.png" alt="2" data-src="photo-2.jpeg">
  <img src="img/loading.png" alt="3" data-src="photo-3.jpeg">
</div>
<script>window.onload = function (){//页面加载完之后再加载图片
    var a = document.getElementsByTagName("img");//获取图片DOM
    for(var i in a){ 
        a[i].src = a[i].getAttribute("data-src")
    }
}</script>

点击下面的“运行案例”，可以试试真实的运行效果：

<div class="container">
  <img src="/html5/img/loading.png" alt="1" data-src="/html5/img/photo-3.png">
  <img src="/html5/img/loading.png" alt="2" data-src="/html5/img/photo-3.png">
  <img src="/html5/img/loading.png" alt="3" data-src="/html5/img/photo-3.png">
</div>
<script>window.onload = function (){//页面加载完之后再加载图片
    var a = document.getElementsByTagName("img");//获取图片DOM
    for(var i in a){ 
        a[i].src = a[i].getAttribute("data-src")
    }
}</script>

以上代码通过定义 onload 事件，将图片延后加载。

1.1.1 Base64 方式加载图片

我们都知道 exe、jpg、pdf 这些格式的文件是使用二进制方式保存的，其中包含很多无法显示和打印的字符，如果要让文本处理软件能处理二进制数据，需要将其编码成一种明文显示的安全格式，Base64 是一种最常见的二进制编码方法。有时为了方便处理，图片并非使用二进制流方式保存，而是使用 Base64 方式编码之后保存在数据库，img 标签的 src 属性可以识别 Base64 格式的编码图片格式，例如：

<img src='data:img/jpg;base64,iVBORw0KGgo='/> 
<!--Base64文件过长，演示仅指格式-->

1.2 alt 属性

当出现网络或者图片路径存在问题时，图片展示可能会出问题，这时网页中图片占位的地方会出现一张裂图，如果不做任何说明时，可能会影响用户体验。这时，如果在裂图上有一段文字说明的话，会适当的增加友好度，alt 属性就是图片加载失败时的替代文本，意思是当图片加载失败时使用 alt 定义的文本显示在图片当前的位置上，例如：

<img src=""  alt="这是一张测试图片" />

1.3 align

定义图片的排列对齐方式，在 HTML5 中推荐使用 css 替代。

<h2>设置对齐</h2>
<p>图像 <img src ="/img/bd_logo1.png" align="middle" border=1> 在文本中</p>
<h2>未设置对齐</h2>
<p>图像 <img src ="/img/bd_logo1.png" border=1> 在文本中</p>

以上定义居中的方式可以使用 css 的方式实现相同的效果，例如：

<p>图像<img src ="/img/bd_logo1.png" style="vertical-align: middle;border:1px solid">在文本中</p>

1.4 border

定义图片的边框，在 HTML5 中推荐使用 css 的 border 样式替代

<img src="/img/bd_logo1.png" border="2" />

上述定义了一个 border 是 2 的图片，同样可以使用 css 的方式替代：

<img src="/img/bd_logo1.png" style="border:2px solid" />

1.5 height

定义图片的高度，在 HTML5 中推荐使用 css 的 height 样式替代：

<img src="/img/bd_logo1.png" width="50" height="50">
<br />
<img src="/img/bd_logo1.png" width="100" height="100">

上述定义了一个 height 分别是 50 像素和 100 像素的图片，如果使用 CSS 定义的话，是这样的：

<img src="/img/bd_logo1.png" style="width:50px;height:50px;">
<br />
<img src="/img/bd_logo1.png" style="width:100px;height:100px;">

1.6 width

定义图片的宽度，在 HTML5 中推荐使用 CSS 替代。

1.7 ismap

属性定义图像为服务器端图片映射，就是定义图片中可以点击的区域，并且将对标发送到服务器，需要配合 a 标签使用。

<a href="https://xudianchao.com">
<img src="/img/b_lo.png" ismap />
</a>

上述代码，当用户点击图片时，浏览器会将点击的坐标点以 x，y 作为参数，以 GET 的方式请求服务器，例如当用户点击图片的坐标点（8,8）时，服务器会受到一条 HTTP 请求，此坐标点是相对定位坐标点。

1.8 hspace

定义图片左右侧的空白，在 HTML5 中推荐使用 CSS 替代。

<h3>带有 hspace 和 vspace 的图像：</h3>
<p>
<img border="1" src="/img/blo.png" height=100 width=100 align="middle" hspace="30" vspace="30" />
这是并排的文字信息
</p>

1.9 vspace

定义图片上下区域的空白，在 HTML5 中推荐使用 CSS 替代。

1.10 longdesc

定义图片描述文档的 URL ，这个属性和 alt 类似，只不过可以描述更多的文字-超过 1024 字符，但是目前还没有浏览器支持这个属性。

1.11 usemap

定义图片在客户端的可点击区域，需要配合 map 和 area 标签使用。

<img src="/html5/img/area.jpg"  usemap="#planetmap" />
<map name="planetmap">
  <area href="/active/3ZYfZKGRAhbHzJySpRriJoGWo8v6/index.html?innerAnchor=46246884002&focus=3" shape="rectangle" coords="25,290,175,337">
</map>

2. css 定义背景图

可以结合 div 和 css 的 background-image 属性来定义背景图的方式显示一张图片，例如：

<div style="background-image: url('../img/bd_logo1.png');width:500px;height:300px"></div>

上述代码的也可以实现一张图像效果。

3. 注意事项

由于 HTML 中的元素中，图片相对于别的文本类型的元素所占用的网络空间较大，所以图片加载可能会比较慢，而且 HTML 中的元素网络请求是同步进行的，所以当定义了一些较大的图片或者图片元素较多时，网页本身会出现卡顿的情况，所以针对图片的加载需要做出一些优化：

尽可能少使用图片，或者使用体积较小的图片;
压缩图片体积，推荐采用webp格式；
通过懒加载的方式异步加载图片;
通过设置 HTTP 缓存时间，防止图片重复请求服务器资源;
通过使用 CSS 背景图的方式，将所需图片压缩到一张图片，减少请求图片次数。

4. 小结

本章介绍了几种 HTML5 定义图片的方式，以及图片的各种属性，最后介绍了几种加载优化方式。图片是HTML 中使用最频繁的多媒体标签，因此需要熟悉它的使用方式.

此组别内的文章

需要支持？

HTML图像