当前位置：首页 > article >正文

Web前端------HTML多媒体标签之图片标签

article 2025/1/16 14:28:41

一.图片标签介绍

        1.路径问题
            >.绝对路径
            从盘符开始的路径
            问题：改变了工程目录的位置后，绝对路径从盘符开始则不能使用了，考虑相对路径
            >.相对路径
                从当前位置（指从代码书写.html文件）开始
                如何表示当前位置------使用./
                如何表示上一级--------使用../

        2.图片标签的导入方式
        3.常见图片属性
            src：图片地址：1.网络路径 2.绝对路径 3.相对路径
            alt：图片加载失败时，提示信息
            width/height：图片的宽和高
            title：图片的标题
            vspace：垂直边距
            hspace：水平边距

二.代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片标签</title>
</head>
<body>
    <!-- 1.引入网络连接的方式 src：源 -->
    <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.HnSRdj_vv8H_wjD1ltRhfQHaEK?rs=1&pid=ImgDetMain" alt="">
    <hr>
    <!-- 2.绝对路径 引入 -->
     <img src="C:\Web前端\code\01.html\1.3块级和行内标签\OIP-C.jpg" alt="">
     <hr>
    <!-- 3.相对路径 引入 -->
     <img src="../1.3块级和行内标签/OIP-C.jpg" alt="">
    <!-- 4.常用属性 -->
     <img 
     src="https://file.moyublog.com/d/file/2024-08-21/6ed4c12307971f9ca047f381fa817904.jpg"
     alt="走丢了"
     width="300px"
     height="300px"
     title="陈平安"
     vspace="200px"
     hspace="350px"
     >
</body>
</html>