HTML之图片元素

Myth丶恋晨 2023-02-10 14:29 144阅读 0赞

### 文章目录 ###

*  图片元素
 *   *  img元素
     *  和a元素联用
     *  和map元素
     *  和figure元素

# 图片元素 #

## img元素 ##

image缩写，空元素

src属性： source

alt属性：当图片资源失效时，将使用该属性的文字替代图片

## 和a元素联用 ##

## 和map元素 ##

map：地图

map的子元素：area

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

px、pxcook

## 和figure元素 ##

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

子元素描述标题：figcaption

> 界面没有改变，但是加上后有利于搜索引擎优化

<figure>
            <img usemap="#solarMap" src="./img/timg.jpg" alt="这是一张太阳系的图片">
            <figcaption>
                <h2>太阳系</h2>
            </figcaption>
            <p>
                太阳系（Solar System），是质量很大的太阳，以其巨大的引力维持着周边行星、卫星、小行星和彗星绕其运转的天体系统 [1] 。
                太阳位于距银河系中心（银心）约2.7万光年、距边缘2.3万光年的地方。而银河系直径约有10万光年，包含1500亿颗恒星，太阳只是其中之一。太阳以250千米/秒的速度绕银心运动，大约2.5亿年绕行一周，地球气候及整体自然界也因此发生2.5亿年的周期性变化
                [1] 。
                截至2019年10月，太阳系包括太阳、8个行星、205个卫星和至少50万个小行星，还有矮行星和少量彗星。若以海王星作为太阳系边界，则太阳系直径为60个天文单位，即约90亿千米。若将彗星轨道计算在内，则太阳系的直径可达6-8万个天文单位，即0.9-1.2万亿千米
                [1] 。
            </p>
        </figure>