第4章使用图像（html）

误小果

已于 2022-12-28 16:27:30 修改

阅读量248

点赞数 1

分类专栏：前端文章标签： html 计算机视觉前端

于 2022-12-04 10:25:48 首次发布

本文链接：https://blog.csdn.net/m0_72647241/article/details/128098759

版权

前端专栏收录该内容

7 篇文章 1 订阅

订阅专栏

                   第4章 使用图像

目录标题

4.1 图像的格式
4.2 <img>标签基础语法
4.3 图像的路径src
4.4 图像的提示文字alt
4.5 图像的宽度（width）和高度（height）
4.6 图像的超链接
- 4.6.1 图像的超链接
- 4.6.2 图像热区链接
4.7 练习题
4.8章节任务

4.1 图像的格式

网页中图像的格式通常有3种，即GIF，JPEG和PNG，它们分别具有不同的展示特点。在网页的制作中，需要根据图像的类型去选择使用不同的图像格式。

4.1.1 GIF格式

（1） GIF是英文Graphic Interchange Format的缩写，即图像交换格式。GIF文件最多可使用256种颜色，最适合显示色调不连续或具有大面积单一颜色的图像，例如导航条，按钮，图标，徽标或其他具有统一色彩和色调的图像。
（2）GIF格式的最大优点就是可制作动态图像，可以将数个静态文件作为动画帧串联起来，转换成一个动画文件。
（3）GIF格式的另一优点就是可以将图像以交错的方式在网页中呈现。所谓交错显示，就是当图像尚未下载完成时，浏览器会以马赛克的形式将图像慢慢显示，让浏览者可以大概猜出所下载图像的雏形。

4.1.2 JPEG格式

（1）JPEG是英文Joint Photographic Experts Group的缩写，它是一种图像压缩格式。此文件格式是用于摄影或连续色调图像的高级格式，这是因为JPEG文件可以包含数百万种颜色。随着JPEG文件品质的提高，文件的大小和加载时间也会增加。通常我们可以通过压缩JPEG文件的方法在图像品质和文件大小之间实现良好的平衡。
（2）JPEG格式是一种可以将图像压缩得非常紧凑的格式，专门用于不含大色块的图像。JPEG格式的图像有一定的失真度，但是在正常的损失下肉眼分辨不出JPEG和GIF图像的区别，而JPEG文件大小只有GIF文件的1/4.JPEG对图标之类的含大色块的图像不是很有效，不支持透明图和动态图，但它能够保留全真的调色板格式。如果图像需要全彩模式才能表现效果的话，JPEG就是最佳选择。

4.1.3 PNG格式

（1）PNG（Portable Network Graphics）格式是一种非破坏性的网页图像文件格式，它提供了将图像文件以最小的方式压缩却又不造成图像失真的技术。它不仅具备了GIF图像格式的大部分优点，而且还支持48位的色彩，可以很快地交错显示，实现跨平台的图像亮度控制和更多层的透明度设置。

4.2 标签基础语法

图像是网页构成中最重要的元素之一，美观的图像会为网站增添生命力，同时也可加深用户对网站风格的印象。img 标签的相关属性如下：

属性	值	描述
alt	text	规定图像的替代文本
src	URL	规定显示图像的URL
height	pixels %	定义图像的高度
ismap	URL	将图像定义为服务器端图像映射
longdesc	URL	指向包含长的图像描述文档的URL
usemap	URL	将图像定义为客户器端图像映射
width	pixels %	设置图像的宽度

4.3 图像的路径src

（1）src属性用于指定图像源文件所在的路径，它是图像必不可少的属性。
（2）语法：
img src=“图像文件的地址”
（3）说明：
在该语法中，src参数用来设置图像文件所在的路径，这一路径可以是相对路径，也可以是绝对路径。

例子4-1
创建一个img标签，src属性值为外部图像文件的路径，在浏览器上显示这幅图像

<!DOCTYPE html>
<html>
  <head>
      <meta charset="UTF-8">
      <title></title>
  </head>
  <body>
     <img src="img/kitty.jpg" alt=" ">
   </body>
</html>

提示：
（1）可以使用文件和http://关键字作为图像的地址，用于在网页上加载图像。
（2）HTML文件中无法直接插入多媒体文件，需要从外部引入。

4.4 图像的提示文字alt

1alt属性是img标签的必要属性，它规定了图像无法正常显示时的替代文本。
2语法：
img src="图像文件的地址 " alt=“替代文本”
3说明：
（1）在该语法中，提示文字的内容可以是中文，也可以是英文。
（2）图像无法正常显示的原因可以有以下几种：
1 网速太慢
2 src属性值错误
3 浏览器禁用图像
4 用户使用的是屏幕阅读器

例子4-2
给img标签增加alt属性，属性值为这张图像的替代文本。当图像的地址填写有误的时候，显示替代文本，浏览者依然可以看到丢失图像的信息。在浏览器中的显示效果。

<!DOCTYPE html>
<html>
  <head>
     <meta charset="UTF-8">
     <title></title>
  </head>
  <body>
    <img src="img/kitty1.jpg" alt="这是一张小猫咪的照片">
  </body>
</html>

4.5 图像的宽度（width）和高度（height）

1 width和height属性分别用来定义图像的宽度和高度，如果img标签不定义宽度和高度，图像就会按照它的原始尺寸显示。
2语法：
img src=“图像文件的地址” alt=“替代文本” width=“图像的宽度” height=“图像的高度”
3说明：
（1）在该语法中，图像的宽度和高度的单位是像素或百分比。当只规定其中的一个值时，另一个值会等比进行缩放。
（2）无论在width和height属性中指定是什么值，整个图像都会被加载；即使widht和height属性值设置得很小，图像也不会加载很快。

例子4-3
在【例子4-1】和【例子4-2】的基础上，使用width属性规定图像的宽度，高度会等比进行缩放，图像的长度不变，在浏览器中显示效果。

<!DOCTYPE html>
<html>
  <head>
     <meta charset="UTF-8">
     <title></title>
  </head>
  <body>
    <img src="img/kitty1.jpg" alt="这是一张小猫咪的照片" width="500px">
  </body>
</html>

4.6 图像的超链接

除了文字可以添加超链接之外，图像也可以设置超链接属性。同一张图像的不同部分也可以设置链接到不同的文档，这就是热区链接。

4.6.1 图像的超链接

1.图像的链接和文字的链接方法是一样的，都是用a标签来完成，只要将img标签放在a和/a之间就可以了。
2.语法：
a href=“链接地址”
img src=“图像文件的地址” alt=" "
/a
3.说明：
在该语法中，href参数用来设置图像的链接地址。

例子4-4
在超链接中嵌入一个图像元素，在浏览器中预览，当鼠标指针放置在链接的图像上时，鼠标指针会显示为超链接特有的“小手”样式。单击图像时，网页将跳转到超链接指向的W3school官网。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
  <a href="https://www.w3school.com.cn/index.html">
     <img src="img/cat.jpg" alt="喵喵" width="500px">
  </a>
  </body>
</html>

4.6.2 图像热区链接

1.在HTML中可以把图像划分成多个热点区域（简称热区），每一个热区链接到不同的网页。这种效果的实质是把一张图像划分成不同的热区，再让不同的区域进行超链接，这就是映射地图。图像映射用到了3种标签:img ,map,area.
2.语法：
img src=“图像地址” alt=" usemap=" 映射图像名称 "
map name=“映射图像名称”
area shape=“热区形状” coords=“热区坐标” href=“链接地址”
/map
3.说明：在该语法中要先定义映射图像的名称，然后再引用这个映射图像。在area标签中定义了热区的位置和链接，其中shape参数用来定义热区形状，coords参数则用来设置区域坐标，对于不同形状来说，coords设置的方式也不同。

例子4-5
图4-6是一副天空和大海的图像，为它设置图像热区链接后，单击天空的部分，跳转到新页面"天空.html",如图4-7所示；单击大海的部分，跳转到新页面"大海.html"

<!DOCTYPE html>
<html>
  <head>
     <meta charset="UTF-8">
     <title></title>
  </head>
  <body>
    <img src="img/大海和天空.jpg" alt="大海和天空"usemap="#map" width="800px" height="600px">
    <map name="#map">
       <area shape="react" coords="0,0,800,300" href="天空.html">
       <area shape="react" coords="0,300,800,600" href="大海.html">
   </map>
   </body>
 </html>

4.7 练习题

填空题
（1）网页中图像的格式通常有3种，即GIF,JPEG和PNG.
（2）图像是网页构成中最重要的元素之一，美观的图像会为网站增添生命力，同时也可加深用户对网站风格的印象。在网站中插入图像可以起到美化的作用，插入图像的标签只有一个，那就是img标签。
（3）提示文字的作用是，如果图像没有被正确加载，在图像的位置上就会显示提示文字。图像的提示文字用alt标签来实现的。
（4）实现图像映射用到了3种标签，即img,map,area.

4.8章节任务

设置图像的超链接，图像的宽度为800px，高度保持比例自动缩放。要求单击图像的时候，跳转到百度首页。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <a href="http://www.baidu.com.cn/index.html">
       <img src="img/cat.jpg" alt="喵喵" width="800px">
       </a>
  </body>
 </html>