HTML 图片元素

图片元素

img元素 image缩写 空元素

<img src="url" alt="text" title="text">

1. src属性：图片地址(source)
2. alt属性：当图片资源失效式时，将使用该属性的文字替代图片
3. title属性：光标移动到图片上显示的文字

和a元素联用

<a><img src="url" alt="text" title="text" ></a>

和map(地图)元素

• 使用的方法是
  1. 在map元素中添加一个name属性
  2. 在整张地图添加一个属性usemap绑定一个id值（要与name属性为同一个值）
  3. 在map元素中使用子元素area绑定对应的坐标值（map的子元素(area)）

<a href="https://baike.baidu.com/item/%E5%A4%AA%E9%98%B3%E7%B3%BB/173281?fr=aladdin" target="_blank">
            <img usemap="#solarMap" style="width:1000px" src="./2019-12-08-15-18-29.png" alt="太阳系">
        </a>
        <map name="solarMap">
            <area shape="circle" coords="455,232,65"
                href="https://baike.baidu.com/item/%E6%9C%A8%E6%98%9F/222105?fr=aladdin" alt="木星" target="_blank">
            <area shape="rect" coords="531,354,746,411"
                href="https://baike.baidu.com/item/%E7%9F%AE%E8%A1%8C%E6%98%9F/7990374?fr=aladdin" alt="矮行星"
                target="_blank">
        </map>

• shape="形状"

  • 圆形
  • 矩形
  • 多边形

• coords="坐标"

• 坐标以图片左上角为原点，向右为X轴，向下为Y轴

• 圆形：circle，坐标前两位为圆心坐标后一位为圆心半径

• 矩形：rect，坐标两位为矩形左上角和右下角坐标

• 多边形：poly,坐标一次描述所有点的坐标

• href="超链接"

• alt="当图片显示不出来的时候的代替文字"

• target="跳转的位置 _blank:新窗口打开"

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

ps、pxcook，或者将笔记本更改文本、应用等项目的大小改为100%后用QQ截图

和figure元素

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

子元素：figcaption 通常用于包裹标题

<figure>
        <a href="https://baike.baidu.com/item/%E5%A4%AA%E9%98%B3%E7%B3%BB/173281?fr=aladdin" target="_blank">
            <img usemap="#solarMap" style="width:1000px" src="./2019-12-08-15-18-29.png" alt="太阳系">
        </a>
        <map name="solarMap">
            <area shape="circle" coords="455,232,65"
                href="https://baike.baidu.com/item/%E6%9C%A8%E6%98%9F/222105?fr=aladdin" alt="木星" target="_blank">
            <area shape="rect" coords="531,354,746,411"
                href="https://baike.baidu.com/item/%E7%9F%AE%E8%A1%8C%E6%98%9F/7990374?fr=aladdin" alt="矮行星"
                target="_blank">
        </map>
        <figcaption>
            <h2>
                太阳系
            </h2>
        </figcaption>
        <p>
            太阳系是以太阳为中心，和所有受到太阳的引力约束天体的集合体。包括八大行星（由离太阳从近到远的顺序：水星、金星、地球、火星、木星、土星、天王星、海王星）、以及至少173颗已知的卫星、5颗已经辨认出来的矮行星，包括四个柯伊伯带天体，和数以亿计的太阳系小天体,和彗星。
            太阳系的领域包括太阳，四颗像地球的内行星，由许多小行星组成的小行星带，四颗由气体组成的巨大外行星和充满冰冻小岩石被称为柯伊伯带的小天体区。太阳系有八大行星，分别是水星，金星，地球，火星，木星，土星，天王星，海王星。
        </p>
    </figure>