HTML核心（7）- 图片元素

本系列笔记是基于【渡一教育】袁进老师的html+css基础课程而记录，仅作为个人记录以及阅读使用。

图片元素

img元素

image，空元素

src属性：source

alt属性：当图片资源失效时，将显示文字信息

和a元素联用

<a href="https://baike.baidu.com/item/%E5%8D%83%E4%B8%8E%E5%8D%83%E5%AF%BB/389041" target="_blank">
        <img src="./img/pic.jpg" alt="千与千寻">
</a>

和map元素联用

map：地图

map的子元素：area

衡量坐标时，为了避免衡量误差，需要使用专业的截图工具

和figure元素联用

指代、定义，通常用于把图片、图片标题、描述等包裹起来

子元素：figcaption

<figure>
        <a href="https://baike.baidu.com/item/%E5%8D%83%E4%B8%8E%E5%8D%83%E5%AF%BB/389041" target="_blank">
            <img usemap="#qianYuQianXun" src="./img/pic.jpg" alt="千与千寻">
        </a>
        <figcaption>
            <h2>千与千寻</h2>
        </figcaption>
        <p>宫崎骏导演的，很好看的动漫喔</p>

    </figure>

参考资料

1. 【渡一教育】袁进老师的html+css基础课程
2. 【渡一教育】袁进老师相关课程源代码