8、HTML基础——图片元素

lvh98

已于 2022-08-02 16:15:32 修改

阅读量924

点赞数

分类专栏： web前端学习笔记（HTML+CSS篇）文章标签： css html html5

于 2021-10-12 14:25:30 首次发布

本文链接：https://blog.csdn.net/lvh98/article/details/120722528

版权

web前端学习笔记（HTML+CSS篇）专栏收录该内容

38 篇文章 1 订阅

订阅专栏

图片元素

文章目录

图片元素

1. img元素

image缩写，空元素

src属性：source资源

alt属性：当图片资源失效时，将使用该属性的文字替代图片

<img src="./11.jpg" alt="该图片已失效">

若src中的地址有效，则正常显示图片；若地址已失效，则显示一个图片失效的logo和alt属性中设置的文本。

img元素src地址失效

2. img元素与其他元素的联用

2.1 与a元素联用

将图片作为a元素的内容，效果就是点击图片后会跳转到a元素href属性的跳转地址。

<a target="_blank" href="https://baike.baidu.com/item/%E5%A4%AA%E9%98%B3%E7%B3%BB/173281" title="太阳系百度百科">
    <img src="./src=http___2c.zol-img.com.cn_product_136_1200x900_368_ceRX1B3jHUyLw.gif&refer=http___2c.zol-img.com.jpg" alt="图片已找不到">
</a>

2.2 与map元素联用

实现功能：设置图片的

1.map：地图，定义一个客户端图像映射，图像映射（image-map）指带有可点击区域的一幅图像。

map元素和a元素的联用：img元素的usemap属性可引用map中的id或name属性，所以我们应该同时向map添加id和name属性。

2.map子元素：area，空元素。area元素永远嵌套在map元素的内部。area元素可定义图像映射中的区域。

area相关属性：

shape：形状
- circle圆形
- rect矩形
- poly多边形
coords：坐标，以图片的左上角为坐标系原点，原点往右为x轴坐标，往下为y轴坐标，单位为像素px，坐标间用逗号隔开。
- circle: 圆心坐标+半径，例如coords="453,531,31"，表示以像素点(453，531)为圆心，31px为半径的圆形；
- rect: 左上角坐标+右下角坐标，例如coords="247,663,374,710"，表示左上角为像素点(247,663)，右下角为像素点(374,710)的矩形；
- poly: 各个点的坐标，多边形则需要提供每个点的坐标以确定形状；
href：超链接
alt：当图片显示不出来时显示的文本
target：跳转窗口位置

<a target="_blank" href="https://baike.baidu.com/item/%E5%A4%AA%E9%98%B3%E7%B3%BB/173281" title="太阳系百度百科">
    <img usemap="#solarMap" src="./src=http___2c.zol-img.com.cn_product_136_1200x900_368_ceRX1B3jHUyLw.gif&refer=http___2c.zol-img.com.jpg" alt="图片已找不到">
</a>

<map name="solarMap">
    <area shape="circle" coords="453,531,31" href="https://baike.baidu.com/item/%E5%9C%B0%E7%90%83/6431?fr=aladdin" target="_blank" title="地球百度百科">
    <area shape="rect" coords="247,663,374,710" href="https://baike.baidu.com/item/%E6%9C%A8%E6%98%9F/222105" target="_blank" title="木星百度百科">
</map>

衡量坐标时，为了避免衡量误差，需要使用专业的衡量工具： PS，pxcook等.

2.3 和figure元素联用

figure: 指代、定义。标签规定独立的流内容（图像、图表、照片、代码等等）。元素的内容应该与主内容相关，同时元素的位置相对于主内容是独立的。如果被删除，则不应对文档流产生影响。

出于语义化，通常用于把图片、图片标题、描述包裹起来。

子元素：figcaption，定义figure元素的标题。

应用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <figure>
        <a target="_blank" href="https://baike.baidu.com/item/%E5%A4%AA%E9%98%B3%E7%B3%BB/173281" title="太阳系百度百科">
            <img usemap="#solarMap" src="./src=http___2c.zol-img.com.cn_product_136_1200x900_368_ceRX1B3jHUyLw.gif&refer=http___2c.zol-img.com.jpg" alt="图片已找不到">
        </a>

        <figcaption>
            <h1>太阳系</h1>
        </figcaption>

        <p>太阳系（英文：Solar system）是一个以太阳为中心，受太阳引力约束在一起的天体系统，包括太阳、行星及其卫星、矮行星、小行星、彗星和行星际物质。 [1]  太阳系位于距银河系中心大约2.4~2.7万光年的位置（银河系的恒星数量约在1000亿到4000亿之间，太阳只是其中之一 [2]  ）。太阳以220千米/秒的速度绕银心运动，大约2.5亿年绕行一周，地球气候及整体自然界也因此发生2.5亿年的周期性变化。太阳运行的方向基本上是朝向织女座，靠近武仙座的方向。 [3] </p>
    </figure>
    

    <map name="solarMap">
        <area shape="circle" coords="453,531,31" href="https://baike.baidu.com/item/%E5%9C%B0%E7%90%83/6431?fr=aladdin" target="_blank" title="地球百度百科">
        <area shape="rect" coords="247,663,374,710" href="https://baike.baidu.com/item/%E6%9C%A8%E6%98%9F/222105" target="_blank" title="木星百度百科">
    </map>


</body>
</html>

效果就是将下面的图片放到了网页上面，并且点击图片会跳转太阳系的百度百科，点击地球区域会跳转地球百度百科，点击木星区域会跳转木星百度百科。
这里重点体现出了与map元素联用的效果。
在这里插入图片描述

lvh98

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
8、HTML基础——图片元素

图片元素img元素image缩写，空元素src属性：source资源alt属性：当图片资源失效时，将使用该属性的文字替代图片与a元素联用与map元素联用map：地图map子元素：area，空元素area相关属性：shape：形状，circle圆形（圆心坐标+半径），rect矩形（左上角坐标+右下角坐标），poly多边形（各个点的坐标）coords：坐标href：超链接alt：当图片显示不出来时显示的文本target：跳转窗口位置衡量坐标时，为了避免衡量误差，需要使用专业的衡量工
复制链接

扫一扫