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

最新推荐文章于 2022-05-07 12:58:37 发布

Dragon水魅

最新推荐文章于 2022-05-07 12:58:37 发布

阅读量556

点赞数

分类专栏：零基础学习Web开发文章标签： html

本文链接：https://blog.csdn.net/qq_43650934/article/details/108953784

版权

零基础学习Web开发专栏收录该内容

45 篇文章 2 订阅

订阅专栏

注：学习笔记基于小甲鱼学习视频，官方论坛：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>

在这里插入图片描述

Dragon水魅

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
零基础学习HTML(24)——map标签、area标签、picture标签、figure标签

注：学习笔记基于小甲鱼学习视频，官方论坛：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.htmlarea标签：https://man.
复制链接

扫一扫