分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 教程案例

Html图像标签、绝对路径和相对路径:

发布时间:2023-09-06 02:08责任编辑:赖小花关键词:暂无标签
Html图像标签:

<img>标签可以在网页上插入一张图片,它是独立使用的标签,它的常用属性有:

(1)src 属性 定义图片的引用地址

(2)alt 属性 定义图片加载失败时显示的文字,搜索引擎会使用这个文字收录图片、盲人读屏软件会读取这个文字让盲人识别图片,所以此属性非常重要。(图片的文字说明)

<img src=”images/pic.jpg” alt=”产品图片” />

绝对路径和相对路径:

像网页上插入图片这种外部文件,需要定义文件的引用地址,引用外部文件还包括引用外部样式表、javascript等等,引用地址分为绝对地址和相对地址。

绝对地址:相对于磁盘的位置去定位文件的地址

相对地址:相对于引用文件本身去定位被引用的文件地址

代码:

<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>网页插入图片</title></head><body> ???<h1>图片</h1> ???<h2>相对路径</h2> ???<!-- 网页和images在同一目录 --> ???<!-- 完整的写法是:./images/我是仙女.jpg ?./ 表示当前目录,可以省略 --> ???<img src="./images/我是仙女.jpg" alt="做个优雅的女人" /> ???<img src="images/loading.gif" alt="加载中" /><!-- 网页所在的目录和images 在同一目录 --><!-- 图片并没有展示出来 --> ???<img src="../images/哥总是这么迷人.jpg" alt="哥总是这么迷人" /><h2>绝对路径,不建议使用</h2><!-- 图片并没有展示出来 --> ???<img src="C:\Users\Ren\Desktop\img\5.jpg" alt="生无可恋" /></body></html>

页面显示效果:

Html图像标签、绝对路径和相对路径:

原文地址:https://www.cnblogs.com/reyinever/p/10549854.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved