作者:多米音乐_34138178 | 来源:互联网 | 2023-06-26 16:15
图片标签概述:
场景:在网页显示图片
代码:
标签属性解释: src:图片地址(区分相对路径和绝对路径) alt(替换文本):图片加载失败显示内容 title:鼠标停留显示内容 width:图片宽度 height:图片高度 如果只设置宽或者高,图片将等比例调整(不会变形)
特点:
- 单标签
- img标签需要展示对应的效果,需要借助标签的属性进行设置。
![](https://img2.php1.cn/3cdc5/3beb/882/e5ed9a5263158873.png)
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=">
<title>康康打电动title>
head>
<body>
<img src="C:\Users\boki的jojo\Pictures\Screenshots/屏幕截图(2).png" alt="系统有什么大病" title="好康的">
body>
html>路径输入后再把图片的名称格式输入完整,如果图片就在工程文件夹下,直接输入--> ./(图片名称格式)
图片属性之---alt :
属性值:替换文本
当图片显示失败才会显示alt文本
图片加载成功不显示
图片属性之---title:(不止运用于图片标签,其他标签也可以设置)
属性值:提示文本
当鼠标悬停时显示文本
图片属性之---width和height:
属性值:宽度和高度(数字)
- 如果只设置其中一个,另一个会自动等比例放大缩小(图片不会变形)
- 如果同时设置两个,可能会因为设置不当导致图片变形