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

最新推荐文章于 2022-05-13 16:24:17 发布

余神

最新推荐文章于 2022-05-13 16:24:17 发布

阅读量220

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_48101294/article/details/110789373

版权

HTML学习专栏收录该内容

11 篇文章 0 订阅

订阅专栏

返回目录

常见的图像格式

属性	属性值	说明
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://img-blog.csdnimg.cn/20201206235748120.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODEwMTI5NA==,size_16,color_FFFFFF,t_70”>

余神

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
3
评论
HTML图像标签————小白篇(3)

常见的图像格式JPGGIFPNGBMP…案例< img src(图像地址) =“位置” alt(图像代替文字)= “文字” title鼠标悬停文字= “文字” width(宽度)=“6” height(高度)=“9” />< !DOCTYPE html>< html lang=“en”>< head>< meta charset=“UTF-8”>< title>图片标签< /title>
复制链接

扫一扫