文章目录
HTML 图片
图片可以改善网页的设计和外观。
示例
<imgsrc="xxx.jpg"alt="xxx">
HTML 图片语法
HTML
<img>
标签用于将图片嵌入网页。
从技术上讲，图片并非插入网页；图片链接到网页。
<img>
标签为引用的图片创建了一个保存空间。
<img>
标签为空，仅包含属性，没有结束标签。
<img>
标签有两个必需属性：
src - 指定图片的路径 (URL)。
alt - 指定图片的替代文本.如果用户由于某种原因无法查看图片（由于连接速度慢、src 属性错误或用户使用屏幕阅读器）。
语法
<imgsrc="url"alt="图片的替代文本">
注意：当网页加载时，浏览器会从 Web 服务器获取图片并将其插入到页面中。因此，请确保图片实际上停留在与网页相关的同一位置，否则您的访问者将看到一个断开的链接图标。如果浏览器找不到图片，则会显示断开的链接图标和替代文本。
图片大小 - 宽度和高度
可以使用 style 属性指定图片的宽度和高度。
示例
<imgsrc="img_girl.jpg"alt="Girl in a jacket"style="width:500px;height:600px;">
或者，您可以使用 width 和 height 属性：
示例
<imgsrc="img_girl.jpg"alt="Girl in a jacket"width="500"height="600">
width 和 height 属性始终以像素为单位定义图片的宽度和高度。
注意：始终指定图片的宽度和高度。如果未指定 width 和 height，则网页可能会在图片加载时闪烁。
使用宽度和高度，还是样式？
width、height 和 style 属性在 HTML 中均有效。
建议使用 style 属性。它可防止样式表更改图片的大小：
示例
<!DOCTYPEhtml><html><head><style>img{width: 100%;}</style></head><body><imgsrc="html5.gif"alt="HTML5 Icon"width="128"height="128"><imgsrc="html5.gif"alt="HTML5 Icon"style="width:128px;height:128px;"></body></html>
其他文件夹中的图片
如果您的图片位于子文件夹中，则必须在 src 属性中包含文件夹名称：
示例
<imgsrc="/images/html5.gif"alt="HTML5 Icon"style="width:128px;height:128px;">
其他服务器/网站上的图片
某些网站指向其他服务器上的图片。
要指向另一台服务器上的图片，您必须在 src 属性中指定绝对（完整）URL：
示例
<imgsrc="https://www.xxx.com/xxx.jpg"alt="W3Schools.com">
关于外部图片的注意事项：外部图片可能受版权保护。如果您未获得使用许可，则可能违反版权法。此外，您无法控制外部图片；它们可能会突然被删除或更改。
动画图片
HTML 允许动画 GIF：
示例
<imgsrc="xxxx.gif"alt="Computer Man"style="width:48px;height:48px;">
图片作为链接
要使用图片作为链接，请将
<img>
标签放在
<a>
标签内：
示例
<ahref="default.html"><imgsrc="html.gif"alt="HTML"style="width:42px;height:42px;"></a>
图片浮动
使用 CSS float 属性让图片浮动到文本的右侧或左侧：
示例
<p><imgsrc="smiley.gif"alt="Smiley face"style="float:right;width:42px;height:42px;">
图片将浮动到文本的右侧。</p>
<p><imgsrc="smiley.gif"alt="笑脸"style="float:left;width:42px;height:42px;">
图片将浮动到文本左侧。</p>
常见图片格式
以下是最常见的图片文件类型，所有浏览器（Chrome、Edge、Firefox、Safari、Opera）均支持这些类型：
缩写文件格式文件扩展名APNG动画便携式网络图形.apngGIF图形交换格式.gifICOMicrosoft 图标.ico、.curJPEG联合图片专家组图片.jpg、.jpeg、.jfif、.pjpeg、.pjpPNG便携式网络图形.pngSVG可缩放矢量图形.svg
注意：加载大型图片需要时间，并且会降低网页速度。请谨慎使用图片。
HTML 图像映射
使用 HTML 图像映射，您可以在图像上创建可点击区域。
HTML
<map>
标签定义图像映射。图像映射是具有可点击区域的图像。这些区域由一个或多个 标签定义。
示例
<imgsrc="workplace.jpg"alt="Workplace"usemap="#workmap"><mapname="workmap"><areashape="rect"coords="34,44,270,350"alt="Computer"href="computer.htm"><areashape="rect"coords="290,172,333,250"alt="Phone"href="phone.htm"><areashape="circle"coords="337,300,44"alt="Coffee"href="coffee.htm"></map>
图像地图背后的想法是，您应该能够根据单击图像中的位置执行不同的操作。
要创建图像映射，您需要一个图像和一些描述可点击区域的 HTML 代码。
图像映射与其他图像的唯一区别是您必须添加 usemap 属性：
<imgsrc="workplace.jpg"alt="Workplace"usemap="#workmap">
usemap 值以井号 # 开头，后跟图像映射的名称，用于创建图像与图像映射之间的关系。
提示：您可以将任何图像用作图像映射！
创建图像映射
然后，添加
<map>
元素。
<map>
元素用于创建图像映射，并使用必需的 name 属性链接到图像：
<map name="workmap">
name 属性必须具有与
<img>
的 usemap 属性相同的值。
然后，添加可点击区域。
使用
<area>
元素定义可点击区域。
定义可点击区域的形状，您可以选择以下值之一：
rect - 定义矩形区域
circle - 定义圆形区域
poly - 定义多边形区域
default - 定义整个区域
您还必须定义一些坐标，以便将可点击区域放置到图像上。
Shape=“rect”
shape=“rect” 的坐标成对出现，一个用于 x 轴，一个用于 y 轴。
因此，坐标 34,44 位于距左边距 34 个像素、距顶部 44 个像素处：
坐标 270,350 位于距左边距 270 个像素、距顶部 350 个像素处：
示例
<areashape="rect"coords="34, 44, 270, 350"href="xxx.html">
这是可点击的区域，并将用户发送到页面“xxx.html”：
Shape=“circle”
要添加圆形区域，首先找到圆心的坐标：
337,300
然后指定圆的半径：
44 像素
示例
<areashape="circle"coords="337, 300, 44"href="coffee.htm">
这是可点击的区域，并将用户发送到页面“coffee.htm”：
Shape=“poly”
shape=“poly” 包含多个坐标点，创建由直线形成的形状（多边形）。这可用于创建任何形状。
示例
<areashape="poly"coords="140,121,181,116,204,160,204,222,191,270,140,329,85,355,58,352,37,322,40,259,103,161,128,147"href="croissant.htm">
这是可点击的区域，并将用户发送到页面“croissant.htm”：
图像地图和 JavaScript
可点击区域也可以触发 JavaScript 函数。
向
<area>
元素添加单击事件以执行 JavaScript 函数：
示例
在这里，我们使用 onclick 属性在单击区域时执行 JavaScript 函数：
<mapname="workmap"><areashape="circle"coords="337,300,44"href="coffee.htm"onclick="myFunction()"></map><script>functionmyFunction(){alert("您单击了咖啡杯！");}</script>
总结
本文介绍了的使用，如有问题欢迎私信和评论
版权归原作者 编程岁月 所有， 如有侵权，请联系我们删除。