html学习-图片元素

基本用法

<img src="image-source.jpg" alt="替代文本">

属性详解

1. src (必填)
   • 定义图像的URL（统一资源定位符）。
2. alt (必填)
   • 提供替代文本，当图像无法显示时，浏览器会显示这段文本。它对于屏幕阅读器用户和搜索引擎优化（SEO）也很重要。
3. width
   • 设置图像的宽度。可以设置为像素值（如200px）或相对于父元素的百分比（如50%）。
4. height
   • 设置图像的高度。同样可以设置为像素值或百分比。
5. title
   • 当用户将鼠标悬停在图像上时，会显示这段文本。
6. crossorigin (HTML5)
   • 配置图像的CORS（跨源资源共享）设置。其值可以是anonymous或use-credentials。
7. loading (HTML5)
   • 控制图像的懒加载。其值可以是lazy（懒加载）或eager（立即加载）。
8. ismap (不推荐使用)
   • 将图像定义为服务器端图像映射。
9. usemap (不推荐使用)
   • 将图像定义为客户端图像映射。
10. srcset (HTML5)
    • 定义不同屏幕分辨率或设备像素比下图像的源。
11. sizes (HTML5)
    • 定义一系列媒体条件，并指明对应的srcset中的图像尺寸。

示例代码

<img src="image-source.jpg" alt="描述性文本" width="200" height="150" title="悬停文本" loading="lazy">

注意事项

• alt属性应始终提供，即使没有特定的替代文本，也应留空（alt=""）。
• 调整图像的宽度和高度时，应保持其宽高比，以避免图像变形。
• 使用srcset和sizes属性可以实现响应式图像，为不同设备提供不同分辨率的图像。
  使用这些属性，你可以有效地在网页上嵌入和管理图像，同时确保良好的用户体验和搜索引擎优化。

map元素

HTML中的<map>元素与<img>元素配合使用，可以创建图像映射（image map），它允许用户将多个超链接与单个图像的不同区域关联起来。以下是<map>元素及其相关元素的详细说明：

基本用法

<img src="image-source.jpg" alt="替代文本" usemap="#mapName">
<map name="mapName">
  <area shape="rect" coords="x1, y1, x2, y2" href="url" alt="替代文本">
  <!-- 可以有多个<area>元素 -->
</map>

<map>元素属性

• name：定义图像映射的名称，该名称必须与<img>元素的usemap属性值相匹配（去掉#符号）。

<area>元素属性

• shape：定义区域的形状。可能的值有rect（矩形）、circle（圆形）、poly（多边形）等。
• coords：定义区域的坐标。对于不同的shape值，坐标的格式也不同。
  • 对于rect，格式是x1, y1, x2, y2，其中x1, y1是矩形左上角的坐标，x2, y2是矩形右下角的坐标。
  • 对于circle，格式是x, y, r，其中x, y是圆心的坐标，r是圆的半径。
  • 对于poly，格式是x1, y1, x2, y2, ..., xn, yn，定义多边形的顶点坐标。
• href：定义当用户点击该区域时，浏览器应该导航到的URL。
• alt：提供替代文本，当图像无法显示或用户使用屏幕阅读器时，会显示这段文本。

示例代码

<img src="image-source.jpg" alt="替代文本" usemap="#exampleMap">
<map name="exampleMap">
  <area shape="rect" coords="50, 100, 200, 200" href="link1.html" alt="区域1">
  <area shape="circle" coords="150, 250, 50" href="link2.html" alt="区域2">
  <area shape="poly" coords="100, 100, 200, 50, 300, 100, 200, 150" href="link3.html" alt="区域3">
</map>

在这个示例中，图像被划分成了三个区域，每个区域都有对应的链接和替代文本。当用户点击图像的不同区域时，他们将被导航到不同的网页。

注意事项

• 图像映射的坐标是基于图像左上角的像素位置。
• 使用图像映射时，应确保替代文本（alt属性）清晰描述了每个区域的含义，以便于屏幕阅读器用户理解。
• 图像映射在移动设备上可能不太适用，因为触摸屏幕上很难精确点击小区域。

与figure联用

在HTML中，<img>元素用于插入图像，而<figure>元素通常用于表示独立的流内容，比如图像、图表、照片、代码示例等。<figure>元素通常与<figcaption>元素一起使用，<figcaption>用于提供关于<figure>内容的描述或标题。
以下是如何将<img>元素与<figure>元素联用的示例：

<figure>
  <img src="image.jpg" alt="描述性文本" />
  <figcaption>这是图片的标题或描述</figcaption>
</figure>

在这个例子中：

• <img>元素用于指定图像的路径（src属性）和替代文本（alt属性）。
• <figure>元素包裹了<img>元素，表明这是一个独立的图像单元。
• <figcaption>元素提供了图像的标题或描述，它通常放置在<figure>元素的内部，紧跟在<img>元素之后。
  这样的结构有助于屏幕阅读器等辅助技术更好地理解图像内容，并且可以让你在文档流中更好地组织图像及其相关的文本描述。这是HTML5引入的一种更语义化的方式来处理图像及其描述。