图片标签的路径和属性标签

最新推荐文章于 2022-12-25 14:13:53 发布

南城以南1

最新推荐文章于 2022-12-25 14:13:53 发布

阅读量350

点赞数

分类专栏：大前端文章标签： html5 前端 html 开发语言

本文链接：https://blog.csdn.net/qq_36242554/article/details/125615009

版权

大前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

路径分类：

绝对路径和相对路径

1.绝对路径

1.绝对路径是指文件在硬盘真正存在的路径。

注意：在实际开发中很少使用，使用绝对路径只能在自己的电脑上浏览一切正常

2.相对路径

相对路径就是指由这个文件所在的路径引起的跟其它文件（或文件夹）的路径关系。

<!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>图片路径和属性标签</title>
</head>
<body>
    <!-- 
        同级目录
        1.code.jpg
        2. ./code.jpg
     -->
    <img src="./1656487548968.jpg" alt="">
    <img src="1656487548968.jpg" alt="">

    <!-- 不同级目录
     2 ../code.jpg
    -->
    <img src="../1656487548968.jpg" alt="">
</body>
</html>

图片属性标签

<!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>图片属性</title>
</head>
<body>
    <img src="code.jpg" alt="提示图片信息" title="描述图片的作用">
    <img src="cede" width="200" height="200">
</body>
</html>

练习：写一个简单的网页

<!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>简单网页练习</title>
</head>
<body>
    <h1>采花蜂</h1>
    <P><strong>作者: 林清玄</strong>  &emsp;
        <strong>来源:美文阅读网</strong>&emsp;
        <strong> 发表于2016-03-08</strong>&emsp;
        <strong>被阅读18646次<strong> </P>
    <p>我坐在院子里，正欣赏着一朵刚开放的朱模花，正是清晨，朱模花还带着昨夜的露水，在晨曦中微笑。</p>
    <p>这时候，一只蜜蜂从阳光里穿行而来，它几乎毫不犹豫的，就停在那一朵朱槿花上，那样投入、专注而忘情地吸着花蜜。微笑、带着露水的朱模花；专注、浑然忘我的蜜蜂，看起来就如同在亲吻一样</p>
    <img src="1.jpg" alt="1.jpg" width="400" height="300">
    <p>但是，朱槿花与采花蜂是带着什么爱情而在城市的阳台上会合的呢？这时空的无限与广大，使我感到一只蜜蜂找到一朵朱槿花就是奇迹！连结着它们因缘的线不是偶然的！</p>
    <p>但是，朱槿花与采花蜂是带着什么爱情而在城市的阳台上会合的呢？这时空的无限与广大，使我感到一只蜜蜂找到一朵朱槿花就是奇迹！连结着它们因缘的线不是偶然的！</p>
   
</body>
</html>

南城以南1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
图片标签的路径和属性标签

绝对路径和相对路径1.绝对路径1.绝对路径是指文件在硬盘真正存在的路径。注意：在实际开发中很少使用，使用绝对路径只能在自己的电脑上浏览一切正常2.相对路径相对路径就是指由这个文件所在的路径引起的跟其它文件（或文件夹）的路径关系。图片属性标签练习：写一个简单的网页...
复制链接

扫一扫