HTML02——图像标签_图像地图_图片类别_照片坐标地图册html-CSDN博客

本文链接：https://blog.csdn.net/qiao39gs/article/details/107674547

图像标签

<img />单标签
属性
- src "src" 属性的值是所要显示图像的URL
- width
- height
- alt
  给图像显示一个“交互文本”。一般用于图片加载失败时的文本提示。（对SEO有帮助）
- title 鼠标移过时显示的文字
- usemap="#name" 用于图像地图，可以和图像地图关联起来

图像地图

图像地图效果的实质是把一幅图片划分为不同的作用区域，再让不同的区域链接不同的地址

<map name="">
<area shape="" coords="" alt="" href="" target="" />
</map>

shape形状
- Rect 矩形 coords = 'x1,y1,x2,y2' x1和y1为一个顶点的坐标，x2和y2为其对角顶点的坐标
- Circle 圆形 coords='x,y,z' x和y为圆心坐标，z为半径
- Poly 不规则图形 coords="x1,y1,x2,y2,x3,y3,..."
coords 坐标
title 鼠标经过提示的文字
href 指向的链接
target 以哪种方式打开

判断图片坐标：x为左边到该点的距离，y为上边到该点的距离，在ps中用矩形选框从左上角拉到该点，按F8显示选区信息

测量半径：椭圆选区

eg:

点击左眼跳转到百度，点击右眼跳转到360

<!DOCTYPE html>
<html>
<head>
	<title>img</title>
</head>
<body>
	<img src="cat.jpg" title="我是title属性" alt="一只小猫" usemap="#catmap">
	<!-- 对图片的规划方案 -->
	<map name="catmap">
		<area shape="circle" coords="178,108,10" href="http://baidu.com" target="_blank">
		<area shape="circle" coords="227,111,10" href="http://360.com" target="_blank">
	</map>
</body>
</html>

显示效果

图片类别

格式	透明度	动画	特点	适用场景
JPG/JPEG	✖	✖	色彩丰富，压缩比高，画质损失小，体积小	色彩丰富、要求体积要小
PNG	✔	✖	色彩丰富，画质清晰，设置任意透明度，体积较小，但比jpg体积大些	对色彩有特殊要求、需要透明效果
GIF	✔	✔	仅支持256种颜色，体积小，只有透明和不透明两种效果	图片颜色少、需要透明效果
BMP	✖	✖	色彩丰富，画质清晰，但体积偏大	不推荐在网页中使用