HTML笔记7：HTML图片元素学习

清慕如眠

于 2023-03-05 13:56:09 发布

阅读量87

点赞数

分类专栏： HTML学习笔记文章标签：学习 html5

本文链接：https://blog.csdn.net/luoyao_/article/details/129345322

版权

HTML学习笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

图片元素

img元素

img元素是空元素，没有结束标签。

src属性:source
alt属性：当该图片失效时，将使用改属性的文字代替图片

和a元素连用

a元素与img元素套用

    <a href="">
        <img src="">
    </a>

和map元素

图片特殊位置链接
map，地图

子元素：area

shape(形状):圆形、矩形、多边形

圆形circle：圆形坐标、半径
矩形rect：左上角、右下角坐标
多边形poly：各点都要描述

coords(坐标地址):

衡量坐标时，为了避免衡量误差，需要使用专业的衡量工具：ps、pxcook、cutpro

href(链接):地址
alt(当该图片失效时，将使用改属性的文字代替图片):
target(新窗口还是原窗口):blank、

和figure元素

指代、定义，通常用于把图片、图片标题、描述包裹起来
子元素：figcaption

<body>

   <figure>
    <a target="_blank" href="https://baike.sogou.com/v58907.htm?ch=frombaikevr">
        <img usemap="#solarMap" src="./行星.jpg" alt="这是一张行星图片">
    </a>
    <figcaption>
        <h2>太阳系</h2>
    </figcaption>
    <p>
        太阳系是一个受太阳引力约束在一起的天体系统,包括太阳、行星及其卫星、矮行星、小行星、彗星和行星际物质,太阳系位于距银河系中心大约2.4~2.7万光年的位置。
    </p>
</figure>
    <map name="solarMap">
       <area shape="circle" coords="364,141,26" href="https://baike.sogou.com/v181522465.htm?fromTitle=木星&ch=frombaikevr" alt="木星信息" target="_blank">
       <area shape="rect" coords="429,227,505,281" href="https://baike.sogou.com/v181522465.htm?fromTitle=木星&ch=frombaikevr" alt=" " target="_blank">
    </map>
</body>