HtmlCss学习笔记-07 图片元素

最新推荐文章于 2024-04-28 07:02:17 发布

dark_tone

最新推荐文章于 2024-04-28 07:02:17 发布

阅读量163

点赞数

分类专栏： HtmlCss

本文链接：https://blog.csdn.net/dark_tone/article/details/102644071

版权

本文详细介绍了HTML中的<img>元素，包括src和alt属性的使用，如何与<a>元素结合实现图片链接，与<map>元素配合创建可点击的图像区域，以及如何利用<figure>元素组织图片及其相关描述。通过实例展示了如何精确设置坐标以确保多边形区域的正确划分，同时强调了<figure>和<figcaption>在语义化网页结构中的作用。

摘要由CSDN通过智能技术生成

img空元素

有两个属性，src是资源，根据站外资源和站内资源使用绝对或相对路径。
alt属性，当图片资源失效时，将使用该属性的文字替代图片。

与a元素连用

a元素的内容可以是文字，也可以是图片。

 <a href="https://www.baidu.com/baidu?word=%E7%9A%84&ie=utf-8&tn=myie2dg&ch=6">
   <img src="/mxcp_1571495154705_u=2350302849,3323337377&fm=26&gp=0.jpg" alt="">
</a>

在这里插入图片描述

与map元素连用

当我们需要点击图片上的某一部分，根据位置不同跳转到不同的网页。
就需要map元素划分区域。
首先给map取一个名字，有点类似id，属性是name，配对写法：
在这里插入图片描述
和锚链接很像，也要加#号，也要取名字，这样就把img元素与map元素链接起来。
往map中添加子元素area，使用area来具体划分区域与超链接。