零基础学习HTML(24)——map标签、area标签、picture标签、figure标签

Dragon水魅

发布于 2026-01-23 14:49:06

1060

注：学习笔记基于小甲鱼学习视频，官方论坛：https://fishc.com.cn/forum.php

官方资料

鱼C课程案例库：https://ilovefishc.com/html5/ html5速查手册：https://man.ilovefishc.com/html5/ css速查手册：https://man.ilovefishc.com/css3/

学习正文

map标签：https://man.ilovefishc.com/pageHTML5/map.html area标签：https://man.ilovefishc.com/pageHTML5/area.html picture标签：https://man.ilovefishc.com/pageHTML5/picture.html figure标签：https://man.ilovefishc.com/pageHTML5/figure.html

picture 标签用于为其内部特定的 img 元素提供多样的 source 元素：

<!DOCTYPE html>
<html>
<head>
    <title>图像适配</title>
    <meta charset="utf-8">
</head>
<body>
    <picture>
        <source media="(min-width: 1024px)" srcset="big.jpg">
        <source media="(min-width:512px)" srcmet="small.jpg">
        <img src="normal.jpg" alt="小姐姐" style="width:auto;">
    </picture>
</body>
</html>

该代码的意思是：当屏幕尺寸大于1024像素时，显示big.jpg；当尺寸大于512小于1024时显示small.jpg；当尺寸小于512或浏览器不支持 picture 标签时显示normal.jpg。

figure 标签用于规定独立的流内容（图像、图表、照片、代码等等），figcaption 标签为 figure 元素定义标题：

<!DOCTYPE html>
<html>
<head>
    <title>插图</title>
    <meta charset="utf-8">
</head>
<body>
    <figure>
        <img src="Pig.png" alt="猪">
        <figcaption>这是一只猪</figcaption>
    </figure>
</body>
</html>