HTML图像标签————小白篇(3)

最新推荐文章于 2023-06-16 13:33:38 发布

余神

最新推荐文章于 2023-06-16 13:33:38 发布

阅读量291

点赞数 1

分类专栏： HTML学习文章标签： html html5

本文链接：https://blog.youkuaiyun.com/weixin_48101294/article/details/110789373

版权

HTML学习专栏收录该内容

11 篇文章

订阅专栏

返回目录

常见的图像格式

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本。图像不能就显示的文字
title	文本	提示文本。鼠标放到图像上，显示的文字
width	像素	设置图像的宽度
height	像素	设置图像的高度
dorder	像素	设置图像的边框粗细

图片标签< img src>

图像标签可以写多个属性，必须写在标签后面。
属性不分先后顺序，以空格分开。

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>图像标签学习</title>
</head>
<body>
<!--图像标签学习 
img src:    表示图像地址后面等于图像路径
     alt：  表示图像代替
    title:    表示鼠标悬停
 width:    表示图片宽度
height：  表示图片高度
-->
< img src ="位置"  alt= "文字" title= "文字" width="6" height="9" />
</body>
</html>

网页显示

在这里插入图片描述

路径了解

网页中的图片我们会新建一个文件存放，就需要路径来找到图片。

路径分为：

相对路径
绝对路径

相对路径分类	符号
同一级路径		图像文件位于HTML文件同一级如< img src=“dog.gif”/>
下一级路径	/	图像文件位于HTML文件下一级如< img src=“images/dog.gif”/>
上一级路径	…/	图像文件位于HTML文件上一级如< img src="…/dog.gif"/>

同一级路径显示

在这里插入图片描述

下一级路径显示

在这里插入图片描述

上一级路径

在这里插入图片描述

绝对路径

绝对路径	说明
本机	从盘开始到图片例如：< img src=“C:\Users\余神\day2\余生.jpg” > .一旦离开本机就无法显示，不推荐。
网络	从网上图片路径例如：< img src=“https://i-blog.csdnimg.cn/blog_migrate/7e82fcd7aa6e05783878557eb9fbf2a5.png”>