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

返回目录

常见的图像格式

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

图片标签< img src>

  1. 图像标签可以写多个属性，必须写在标签后面。
  2. 属性不分先后顺序，以空格分开。
 <!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>

网页显示

在这里插入图片描述

路径了解

  1. 网页中的图片我们会新建一个文件存放，就需要路径来找到图片。
  • 路径分为：
  1. 相对路径
  2. 绝对路径
相对路径分类符号
同一级路径图像文件位于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”>