HTML~学习笔记1——图片标签

最新推荐文章于 2024-08-15 11:09:53 发布

芒芒小媛☞Fighting༂

最新推荐文章于 2024-08-15 11:09:53 发布

阅读量254

点赞数 8

分类专栏：前端基础HMTL 文章标签： html 前端 html5

本文链接：https://blog.csdn.net/weixin_62120946/article/details/140517271

版权

前端基础HMTL 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.相对路径：以当前位置作为参考点，去建立路径。

若后期调整了文件位置，那么文件中的路径也要作相应修改。

同级目录：	./图片名.jpg ( ./ 也可省略，即直接src=xxx.jpg）
下一级：	./文件夹名/图片名.jpg
上一级：	../文件夹名/图片名.jpg

2.绝对路径：以根位置作为参考点，去建立路径。

绝对路径分为：本地绝对路径和网络绝对路径

注：使用本地绝对路径，一旦更换设备，路径处理起来比较麻烦（所以很少使用）；

使用网络绝对路径，方便但是要注意，若服务器开启了防盗链，会造成图片引入失败。

代码示例：

目录结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HTML图片标签</title>
</head>
<body>
    <!--src:图片路径  alt:图片描述  width:图片宽度，单位是像素  height:图片高度，单位是像素 -->
    <img src="1.jpg" alt="花" width="300" height="350"  >

    <!--相对路径-->
    <!--1.同级-->
    <img src="./1.jpg" alt="花花" width="300" >

    <!--2.下一级  -->
    <img src="./image/2.jpg" alt="天空" width="300" >

    <!--3.上一级  -->
    <img src="../image2/3.jpg" alt="贝壳" width="300" >


    <!-- 绝对路径，分为两类：本地绝对路径、网络绝对路径-->
    <!-- 本地绝对路径 -->
    <img src="D:\Chromedownload\26.png" width="300" >

    <!--网络绝对路径 -->
    <img src="https://i0.hdslb.com/bfs/archive/77c9304d7e040b72e1ec24c33175b47ece9c3b6b.jpg"  width="400" alt="网上随便搜的壁纸">
</body>
</html>