前端必知必会-html图片设置

最新推荐文章于 2024-09-16 14:51:13 发布

编程岁月

最新推荐文章于 2024-09-16 14:51:13 发布

阅读量1.3k

点赞数 25

分类专栏：前端必知必会文章标签：前端

本文链接：https://blog.csdn.net/qq_24018193/article/details/140571606

版权

前端必知必会专栏收录该内容

184 篇文章 2 订阅

订阅专栏

文章目录

HTML 图片
HTML 图片语法
图片大小 - 宽度和高度
使用宽度和高度，还是样式？
其他文件夹中的图片
其他服务器/网站上的图片
动画图片
图片作为链接
图片浮动
常见图片格式
HTML 图像映射
图像地图和 JavaScript
总结

HTML 图片

图片可以改善网页的设计和外观。

示例

<img src="xxx.jpg" alt="xxx">

HTML 图片语法

HTML <img> 标签用于将图片嵌入网页。

从技术上讲，图片并非插入网页；图片链接到网页。<img> 标签为引用的图片创建了一个保存空间。

<img> 标签为空，仅包含属性，没有结束标签。

<img> 标签有两个必需属性：

src - 指定图片的路径 (URL)。
alt - 指定图片的替代文本.如果用户由于某种原因无法查看图片（由于连接速度慢、src 属性错误或用户使用屏幕阅读器）。
语法

<img src="url" alt="图片的替代文本">

注意：当网页加载时，浏览器会从 Web 服务器获取图片并将其插入到页面中。因此，请确保图片实际上停留在与网页相关的同一位置，否则您的访问者将看到一个断开的链接图标。如果浏览器找不到图片，则会显示断开的链接图标和替代文本。

图片大小 - 宽度和高度

可以使用 style 属性指定图片的宽度和高度。

示例

<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">

或者，您可以使用 width 和 height 属性：

示例

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

width 和 height 属性始终以像素为单位定义图片的宽度和高度。

注意：始终指定图片的宽度和高度。如果未指定 width 和 height，则网页可能会在图片加载时闪烁。

使用宽度和高度，还是样式？

width、height 和 style 属性在 HTML 中均有效。
建议使用 style 属性。它可防止样式表更改图片的大小：

示例

<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>

<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

</body>
</html>

其他文件夹中的图片

如果您的图片位于子文件夹中，则必须在 src 属性中包含文件夹名称：

示例

<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

其他服务器/网站上的图片

某些网站指向其他服务器上的图片。

要指向另一台服务器上的图片，您必须在 src 属性中指定绝对（完整）URL：

示例

<img src="https://www.xxx.com/xxx.jpg" alt="W3Schools.com">

关于外部图片的注意事项：外部图片可能受版权保护。如果您未获得使用许可，则可能违反版权法。此外，您无法控制外部图片；它们可能会突然被删除或更改。

动画图片

HTML 允许动画 GIF：

示例

<img src="xxxx.gif" alt="Computer Man" style="width:48px;height:48px;">

图片作为链接

要使用图片作为链接，请将 <img> 标签放在 <a> 标签内：

示例

<a href="default.html">
<img src="html.gif" alt="HTML" style="width:42px;height:42px;">
</a>

图片浮动

使用 CSS float 属性让图片浮动到文本的右侧或左侧：

示例

<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
图片将浮动到文本的右侧。</p>

<p><img src="smiley.gif" alt="笑脸" style="float:left;width:42px;height:42px;">
图片将浮动到文本左侧。</p>

常见图片格式

以下是最常见的图片文件类型，所有浏览器（Chrome、Edge、Firefox、Safari、Opera）均支持这些类型：

缩写	文件格式	文件扩展名
APNG	动画便携式网络图形	.apng
GIF	图形交换格式	.gif
ICO	Microsoft 图标	.ico、.cur
JPEG	联合图片专家组图片	.jpg、.jpeg、.jfif、.pjpeg、.pjp
PNG	便携式网络图形	.png
SVG	可缩放矢量图形	.svg

注意：加载大型图片需要时间，并且会降低网页速度。请谨慎使用图片。

HTML 图像映射

使用 HTML 图像映射，您可以在图像上创建可点击区域。

HTML <map> 标签定义图像映射。图像映射是具有可点击区域的图像。这些区域由一个或多个标签定义。

示例


<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
<map name="workmap">
	<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
	<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
	<area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>

图像地图背后的想法是，您应该能够根据单击图像中的位置执行不同的操作。
要创建图像映射，您需要一个图像和一些描述可点击区域的 HTML 代码。

图像映射与其他图像的唯一区别是您必须添加 usemap 属性：

<img src="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 个像素处：

示例

<area shape="rect" coords="34, 44, 270, 350" href="xxx.html">
这是可点击的区域，并将用户发送到页面“xxx.html”：

Shape=“circle”
要添加圆形区域，首先找到圆心的坐标：
337,300
然后指定圆的半径：
44 像素
示例

<area shape="circle" coords="337, 300, 44" href="coffee.htm">

这是可点击的区域，并将用户发送到页面“coffee.htm”：

Shape=“poly”
shape=“poly” 包含多个坐标点，创建由直线形成的形状（多边形）。这可用于创建任何形状。
示例

<area shape="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 函数：

<map name="workmap">
<area shape="circle" coords="337,300,44" href="coffee.htm" onclick="myFunction()">
</map>

<script>
function myFunction() {
alert("您单击了咖啡杯！");
}
</script>