浅谈HTML图片元素

Cyyy11.

于 2022-11-20 14:26:21 发布

阅读量174

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/m0_74482399/article/details/127948659

版权

图片元素

img元素

image缩写，空元素

src属性：source

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

和a元素联用(跳转到某个链接地址)

和map元素

map:地图
map属性name命名方法:小写字母＋大写字母或者字母间用短横线连接

划分区域，使用map的字元素：area

shape:形状 circle：圆形 rect:矩形 poly:多边形

coords:坐标衡量坐标时，为了避免衡量误差，需要使用专业的衡量工具如：PS PXCOOK 使用截图工具时，屏幕可能被放大，造成数据不准确

和figure元素

指代，定义，通常用于把图片，图片标题，描述包裹起来,便于浏览器识别

子元素：figcaption 表示指代的东西的标题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <figure>

        <a href="https://www.baidu.com/s?tn=95834041_hao_pg&ie=utf-8&sc=UWY4PH61Pj0YnNqCmyqxTAThIjYkPWm3PW6vnjm3PHDdFhnqpA7EnHc1Fh7W5HDzn1mvrjDzPjm&ssl_sample=normal&srcqid=6919490120380897364&H123Tmp=nunew7&word=%E5%A4%AA%E9%98%B3%E7%B3%BB">

            <img usemap="#bJ" src="./img/太阳系.jpg" alt="这是太阳系的照片">
    
        </a>
    
<figcaption>
    <h2>太阳系</h2>
</figcaption>

        <p>
            太阳系（英文：Solar system）是一个以太阳为中心，受太阳引力约束在一起的天体系统，包括太阳、行星及其卫星、矮行星、小行星、彗星和行星际物质。 [1]  太阳系位于距银河系中心大约2.4~2.7万光年的位置（银河系的恒星数量约在1000亿到4000亿之间，太阳只是其中之一 [2]  ）。太阳以220千米/秒的速度绕银心运动，大约2.5亿年绕行一周，地球气候及整体自然界也因此发生2.5亿年的周期性变化。太阳运行的方向基本上是朝向织女座，靠近武仙座的方向。 [3] 
    截至2019年10月，太阳系包括太阳、8个行星、近500个卫星和至少120万个小行星 [4]  ，还有一些矮行星和彗星。若以海王星轨道作为太阳系边界，则太阳系直径为60个天文单位，即约90亿千米。若以日球层为界，则太阳距太阳系边界可达100个天文单位（最薄处）。若以奥尔特云为界，则太阳系直径可能有20万天文单位。 [5] 
    太阳系的形成大约始于46亿年前一个巨型星际分子云的引力坍缩。 [6]  太阳系内大部分的质量都集中于太阳，余下的天体中，质量最大的是木星。八大行星逆时针围绕太阳公转。此外还有较小的天体位于木星与火星之间的小行星带。柯伊伯带和奥尔特云也存在大量的小天体。还有很多卫星绕转在行星或者小天体周围。小行星带外侧的每颗行星都有行星环。
        </p>

    </figure>
    
    <map name="bJ">
        <area shape="circle" coords="123,456,78" href="https://www.baidu.com/s?tn=95834041_hao_pg&ie=utf-8&sc=UWY4PH61Pj0YnNqCmyqxTAThIjYkPWm3PW0vn1fknjfzFhnqpA7EnHc1Fh7W5HczP1DYP1cdP16&ssl_sample=normal&srcqid=6916750694542268500&H123Tmp=nunew7&word=%E5%8F%AF%E7%88%B1%E7%9A%84%E5%90%AB%E4%B9%89" target="_blank">
        <area shape="rect"   coords="67,78,56,90" href="https://www.baidu.com/s?tn=95834041_hao_pg&ie=utf-8&sc=UWY4PH61Pj0YnNqCmyqxTAThIjYkPWm3PW0vn1fknjfzFhnqpA7EnHc1Fh7W5HczP1DYP1cdP16&ssl_sample=normal&srcqid=6916750694542268500&H123Tmp=nunew7&word=%E5%8F%AF%E7%88%B1%E7%9A%84%E5%90%AB%E4%B9%89" target="_blank">2
    </map>
</body>
</html>