路径的书写&&图片标签

路径的书写

站内资源和站外资源

站内资源：当前网站的资源
站外资源：非当前网站的资源

相对路径和绝对路径

站外资源：绝对路径
站内资源：相对路径（或绝对路径）

1. 绝对路径

绝对路径的书写格式：
url地址：

协议名://主机名:端口号/路径

schema://host:port/path

协议名：http(小),https,file(本地）
主机名：域名（购买），IP地址
端口号：如果协议是http协议，默认端口号80；
如果协议是https协议，默认端口号为443

http://www.renren.com/（端口省略）
https://www.baidu.com/s（端口省略）
file:///C:/Users/86187/Documents/
http://127.0.0.1:5500/index.html(IP地址)

当跳转目标和当前页面的协议相同时，可以省略协议

2.相对路径

以./开头，./表示当前资源所在的目录，可以书写…/表示返回上一级目录
相对路径中：./可以省略.

图片标签

img标签

image缩写，空标签
src属性：source
alt属性：当图片资源失效时，将使用该属性的文字代替图片。

<img src="https://imgjjjj-s-msn-com.akamaized.net/tenant/amp/entityid/BB10cV4O.img?h=749&w=1438&m=6&q=60&u=t&o=f&l=f"alt="zjajsxqs">
    <img src="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB10cV4O.img?h=749&w=1438&m=6&q=60&u=t&o=f&l=f" >

和a标签连用

点击图片跳到某页面

 <a target="-blank" href="https://baike.baidu.com/item/%E6%A2%85%E8%8A%B1%E9%B9%BF/53120?fr=aladdin">
    <img src="https://gimg2.baidu.com/igmage_search/src=http%3A%2F%2Fa2.att.hudong.com%2F27%2F81%2F01200000194677136358818023076.jpg&refer=http%3A%2F%2Fa2.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1614608194&t=2069657d6c33977b501eba967b16bf0a" alt="这是小鹿">
    </a>

和map标签连用

点击图片某一部分跳到某页面
map:地图
map的子标签：area(空标签)
命名：第一个小写，后一个大写，
2.用短横杠xiaoli-map

<a target="-blank"href="https://baike.baidu.com/item/%E6%A2%85%E8%8A%B1%E9%B9%BF/53120?fr=aladdin">
        <img usemap="#xaioluMap"src="https://gimg2.baidu.com/igmage_search/src=http%3A%2F%2Fa2.att.hudong.com%2F27%2F81%2F01200000194677136358818023076.jpg&refer=http%3A%2F%2Fa2.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1614608194&t=2069657d6c33977b501eba967b16bf0a" alt="这是小鹿">
        </a>
        <map name="xiaoluMap">
         <area shape="circle" coords="399,223,48" href="https://baike.baidu.com/item/%E6%A2%85%E8%8A%B1%E9%B9%BF/53120?fr=aladdin" alt="hhAHHH"targrt="-blank">
        </map>

图片的原点在左上角
圆形，圆心，半径，跳转网址，代替，新窗口打开，
矩形：rect，告诉左上角和右下角
多边形：poly，依次描述每一个点的位置
衡量坐标时，为了避免衡量误差，需要使用专业的衡量工具：ps,pxcook,cutpro,alt+c(测量）

和figure标签连用

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

<figure>
    <a target="-blank"href="https://baike.baidu.com/item/%E6%A2%85%E8%8A%B1%E9%B9%BF/53120?fr=aladdin">
        <img src="http://pic18.nipic.com/20111227/9136445_060347610132_2.jpg" alt="这是小鹿">
        </a>
        <h2>小鹿</h2>
        <p>
            梅花鹿（学名：Cervus nippon）是一种中小型鹿，体长125至145厘米，尾长12至13厘米，肩高70至95厘米，体重70至100千克。毛色夏季为栗红色，有许多白斑，状似梅花；冬季为烟褐色，白斑不显著。颈部有鬣毛。雄
        </p>
</figure>

子标签;figcaption

<figure>
    <a target="-blank"href="https://baike.baidu.com/item/%E6%A2%85%E8%8A%B1%E9%B9%BF/53120?fr=aladdin">
        <img src="http://pic18.nipic.com/20111227/9136445_060347610132_2.jpg" alt="这是小鹿">
        </a>
        <figcaption>
            <h2>小鹿</h2>
        </figcaption>
        
        <p>
            梅花鹿（学名：Cervus nippon）是一种中小型鹿，体长125至145厘米，尾长12至13厘米，肩高70至95厘米，体重70至100千克。毛色夏季为栗红色，有许多白斑，状似梅花；冬季为烟褐色，白斑不显著。颈部有鬣毛。雄
        </p>
</figure>