ToB企服应用市场:ToB评测及商务社交产业平台

标题: 前端必知必会-html图片设置 [打印本页]
作者: 十念    时间: 2024-11-23 19:09
标题: 前端必知必会-html图片设置
HTML 图片

图片可以改善网页的计划和外观。
示例
  1. <img src="xxx.jpg" alt="xxx">
复制代码
HTML 图片语法

HTML <img> 标签用于将图片嵌入网页。
从技能上讲，图片并非插入网页；图片链接到网页。<img> 标签为引用的图片创建了一个保存空间。
<img> 标签为空，仅包含属性，没有结束标签。
<img> 标签有两个必须属性：
src - 指定图片的路径 (URL)。
alt - 指定图片的替换文本.假如用户由于某种原因无法检察图片（由于连接速度慢、src 属性错误或用户使用屏幕阅读器）。
语法
  1. <img src="url" alt="图片的替代文本">
复制代码
留意：当网页加载时，浏览器会从 Web 服务器获取图片并将其插入到页面中。因此，请确保图片实际上停留在与网页相关的同一位置，否则您的访问者将看到一个断开的链接图标。假如浏览器找不到图片，则会表现断开的链接图标和替换文本。
图片大小 - 宽度和高度

可以使用 style 属性指定图片的宽度和高度。
示例
  1. <img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
复制代码
或者，您可以使用 width 和 height 属性：
示例
  1. <img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
复制代码
width 和 height 属性始终以像素为单位界说图片的宽度和高度。
留意：始终指定图片的宽度和高度。假如未指定 width 和 height，则网页大概会在图片加载时闪烁。
使用宽度和高度，还是样式？

width、height 和 style 属性在 HTML 中均有效。
发起使用 style 属性。它可防止样式表更改图片的大小：
示例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. img {
  6. width: 100%;
  7. }
  8. </style>
  9. </head>
  10. <body>
  12. <img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
  14. <img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
  16. </body>
  17. </html>
复制代码
其他文件夹中的图片

假如您的图片位于子文件夹中，则必须在 src 属性中包含文件夹名称：
示例
  1. <img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
复制代码
其他服务器/网站上的图片

某些网站指向其他服务器上的图片。
要指向另一台服务器上的图片，您必须在 src 属性中指定绝对（完备）URL：
示例
  1. <img src="https://www.xxx.com/xxx.jpg" alt="W3Schools.com">
复制代码
关于外部图片的留意事项：外部图片大概受版权掩护。假如您未得到使用许可，则大概违反版权法。此外，您无法控制外部图片；它们大概会突然被删除或更改。
动画图片

HTML 允许动画 GIF：
示例
  1. <img src="xxxx.gif" alt="Computer Man" style="width:48px;height:48px;">
复制代码
图片作为链接

要使用图片作为链接，请将 <img> 标签放在 <a> 标签内：
示例
  1. <a href="default.html">
  2. <img src="html.gif" alt="HTML" style="width:42px;height:42px;">
  3. </a>
复制代码
图片浮动

使用 CSS float 属性让图片浮动到文本的右侧或左侧：
示例
  1. <p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
  2. 图片将浮动到文本的右侧。</p>
复制代码
  1. <p><img src="smiley.gif" alt="笑脸" style="float:left;width:42px;height:42px;">
  2. 图片将浮动到文本左侧。</p>
复制代码
常见图片格式

以下是最常见的图片文件类型，所有浏览器（Chrome、Edge、Firefox、Safari、Opera）均支持这些类型：
缩写文件格式文件扩展名APNG动画便携式网络图形.apngGIF图形互换格式.gifICOMicrosoft 图标.ico、.curJPEG联合图片专家组图片.jpg、.jpeg、.jfif、.pjpeg、.pjpPNG便携式网络图形.pngSVG可缩放矢量图形.svg 留意：加载大型图片必要时间，并且会低落网页速度。请审慎使用图片。
HTML 图像映射

使用 HTML 图像映射，您可以在图像上创建可点击区域。
HTML <map> 标签界说图像映射。图像映射是具有可点击区域的图像。这些区域由一个或多个  标签界说。
示例
  2. <img src="workplace.jpg" alt="Workplace" usemap="#workmap">
  3. <map name="workmap">
  4.         <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  5.         <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  6.         <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
  7. </map>
复制代码
图像舆图背后的想法是，您应该可以或许根据单击图像中的位置实行不同的操作。
要创建图像映射，您必要一个图像和一些描述可点击区域的 HTML 代码。
图像映射与其他图像的唯一区别是您必须添加 usemap 属性：
  1. <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 个像素处：
示例
  1. <area shape="rect" coords="34, 44, 270, 350" href="xxx.html">
  2. 这是可点击的区域，并将用户发送到页面“xxx.html”：
复制代码
Shape=“circle”
要添加圆形区域，首先找到圆心的坐标：
337,300
然后指定圆的半径：
44 像素
示例
  1. <area shape="circle" coords="337, 300, 44" href="coffee.htm">
复制代码
这是可点击的区域，并将用户发送到页面“coffee.htm”：
Shape=“poly”
shape=“poly” 包含多个坐标点，创建由直线形成的形状（多边形）。这可用于创建任何形状。
示例
  1. <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 函数：
  1. <map name="workmap">
  2. <area shape="circle" coords="337,300,44" href="coffee.htm" onclick="myFunction()">
  3. </map>
  5. <script>
  6. function myFunction() {
  7. alert("您单击了咖啡杯！");
  8. }
  9. </script>
复制代码
总结

本文先容了的使用，如有问题接待私信和批评

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4