026 - 回眸一笑百媚生

不二如是

上一集：025 - 这终究是一个语义为王的时代

---

                               
登录/注册后可看大图

万众瞩目的零基础入门学习Web开发（H5&C3）开始更新了！！！

在Web新纪元 |【鱼C#视频课程】剧透这个系列的诞生，时间总是善待任何想拿它搞事情的存在体。

很幸运，一切就这样开始了，开局总会有些不足，但一切在慢慢变好，不是吗？

作为，吹水阁中最爱吹水（爱干无意义事情）的鱼油，整套教程的亮点（槽点）由我来承包～

关注本系列推送（最下方有订阅方式）的鱼油，会享受到一个福利：

会比正常推送，早一个时间节点，看到还未出炉的美味课程

哈哈，废话不多说了，#敲黑板时刻！

---

在线视频：传送门

---

课程思维导图

猛戳

                               
登录/注册后可看大图

超清

---

1、map + area 元素

通过 map 内嵌 area 元素，并结合 img 元素，我们可以实现在图片指定区域进行跳转的操作。

首先创建 img 元素，并创建 usemap 属性：

1. <img src="../img/pic.jpg"  usemap="#myImage">

复制代码

图片路径大家可以自行更换哦，注意usemap的值"#myImage"

# 必须要写，后面的值，就是 map 元素 name 属性的值：

1. <map name="myImage">
   
2. <!--内部包含area元素-->
   
3. </map>

复制代码

通过在 map 元素中添加 area 元素来指定跳转区域：

1. <map name="myImage">
   
2.     <area shape="circle" coords="784,241,163" alt="Cup of coffee" href="https://fishc.com.cn" target="_blank">
   
3.     <area shape="poly" coords="279,230, 867,549, 636,975, 46,655" alt="Book" href="https://item.jd.com/12573534.html" target="_blank">
   
4.     <area shape="rect" coords="710,818,886,1008" alt="Turtle" href="https://man.ilovefishc.com" target="_blank">
   
5. </map>

复制代码

关于属性的详细用法可以参看API宝典：传送门

现在有几个点要注意：

游客，如果您要查看本帖隐藏内容请回复

再次提醒，如果 area 元素使用了href 属性，那么 alt 属性一定要有值哦！

---

2、picture + source 元素

还记得我们在：004 - 一只特立独行的猪讲 style 元素的 media 属性玩法吗。

picture 元素和 source 元素组合使用，也能实现按照浏览器尺寸变化，加载不同的图片效果：

1. <picture>
   
2.     <source media="(min-width: 1024px)" srcset="big.jpg">
   
3.     <source media="(min-width: 512px)" srcset="small.jpg">
   
4.     <img src="normal.jpg" alt="小姐姐" style="width:auto;">
   
5. </picture

复制代码

当浏览器尺寸大于1024px，显示big.jpg图。

当浏览器尺寸大于512px并小于1024px，显示small.jpg。

当浏览器尺寸小于512px或者不支持picture元素时，就显示img元素。

---

3、figure + figcaption 元素

这两个元素的组合，常用于网页配图，略微有点点鸡肋，因为 img 元素用alt属性也可以实现。

还是属于“语义化”上的操作：

1. <figure>
   
2.         <figcaption>Three different breeds of dog.</figcaption>
   
3.         <img src="dog1.jpg" alt="Maltese Terrier">
   
4.         <img src="dog2.jpg" alt="Black Labrador">
   
5.         <img src="dog3.jpg" alt="Golden Retriever">
   
6. </figure>

复制代码

figcaption 元素代表了 figure 元素的一个标题或者说是其相关解释。

并不是每一个 figure 元素都需要一个 figcaption。

但是在使用 figcaption 时，它最好是 figure 块的第一个或者最后一个元素。

---

课后作业，完成了吗？

传送门

---

                               
登录/注册后可看大图

下一集：027 - 一个时代的结束(上)

---

如果有收获，别忘了评分 ：

                               
登录/注册后可看大图

这位鱼油，如果喜欢本系列学习笔记，请订阅 专辑&#9758;（传送门）（不喜欢更要订阅 ）

                               
登录/注册后可看大图

zyl125657

by2014

韩某人

SaaS

莫西莫西

药水哥

5555555555555555555555555555555

cc887498

注意

大风包子

康康

MYlindaxia

<img>的usemap要加#
area如果使用了href属性那么alt一定要有值

Fire4EVER

1

昵称_cwb

查看

ingram123

1

natapon

回复看看看

只想白嫖

11

Bright06

鱿鱼追不上我

O2H2O

要注意啥

心驰神往

看看

沈点心

归林22

26