Web前端------HTML多媒体标签之图片标签
一.图片标签介绍
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>三.效果呈现
原文地址：https://blog.csdn.net/2402_88282438/article/details/145136305
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！