[HTML]图像标签<img>的用法、属性及路径问题

  • 图像标签:<img>        用法:<img src = "图像地址">

  • 图像标签的属性
属性 说明
src 指明图像的地址(分为相对路径和绝对路径两种写法)
alt 替换文本,当图片不能正常显示时出现文字(十分重要)
title 提示文本,鼠标放到图像上显示的文字
width 像素值,设置图像的宽度
height 像素值,设置图像的高度
border 像素值,设置图像的边框粗细
  • src属性的路径问题
相对路径(相对于当前HTML文件)
类型 写法 说明
同一级路径 无符号,如<img src="image.jpg"> 引入与当前HTML文件同级的image.jpg图片
下一级路径 符号:/,如<img src="images/logo.jpg"> 引入与当前HTML文件同级的images文件夹下的logo.jpg图片
上一级路径 符号:../,如<img src="../image.jpg"> 引入在当前HTML文件上一级目录下的image.jpg图片
绝对路径(图片完整地址)
类型 写法 说明
本地路径 如<img src="C:\Users\wkb\Desktop\logo.jpg"> 引入"C:\Users\wkb\Desktop"路径下的logo.jpg图片
网络路径 如<img src="图片网络地址"> 引入某一网络地址下的图片文件
posted @   叶疏鸿  阅读(1583)  评论(0编辑  收藏  举报
编辑推荐:
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行:
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· 字符编码:从基础到乱码解决
· Open-Sora 2.0 重磅开源!
点击右上角即可分享
微信分享提示