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

Html图像标签：

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

（1）src 属性定义图片的引用地址

（2）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="data: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图像标签、绝对路径和相对路径：的更多相关文章

[HTML]图像标签＜img＞的用法、属性及路径问题
图像标签:<img> 用法:<img src = "图像地址"> 图像标签的属性属性说明 src 指明图像的地址(分为相对路径和绝对路径两 ...
HTML标签的绝对路径和相对路径
我在javaweb中写json的Demo的时候遇到了这个问题,图片一一直取不出来,查了好久终于解决了,所以现在记录一下. 绝对路径: 其实很容易理解,如果你是一个普通的项目,那就是它在你电脑里真实存在 ...
html图像、绝对路径和相对路径，链接
html图像 <img>标签可以在网页上插入一张图片,它是独立使用的标签,通过"src"属性定义图片的地址,通过"alt"属性定义图片加载失败时显示 ...
PHP(一般标签介绍，标签特性，实体名称，绝对路径与相对路径）
h1:为标题 h1~h6 标题会逐渐变小需更换标签里面的数字如: <h1>这是标题123</h1>---标题 <h2>这是标题123</h2>-- ...
禁止手机页面中A标签长按弹出路径框
//禁止手机页面中A标签长按弹出路径框 window.onload=function(){ document.documentElement.style.webkitTouchCa ...
qt: 打不开png图像以及opencv加载中文路径问题；
经过亲测, QT(版本: 5.9.4)提供的QImageReader或者函数load在加载本地png图像时,均会提示失败, 按照网上的方法,将Qt plugins下的imageformats 拷贝到e ...
转.HTML中img标签的src属性绝对路径问题解决办法，完全解决！
HTML中img标签的src属性绝对路径问题解决办法,完全解决需求:有时候自己的项目img的src路径需要用到本地某文件夹下的图片,而不是直接使用项目根目录下的图片. 场景:eclipse,to ...
Servlet-base标签的作用（相对路径和绝对路径）
Web中的相对路径和绝对路径在javaWeb中,路径分为相对路径和绝对路径: 相对路径: . 表示当前目录 .. 表示上一级目录资源名表示当前目录/资源名绝对路径: http://ip ...
XHTML 相对路径与绝对路径
文件路径文件路径就是文件在电脑(服务器)中的位置,表示文件路径的方式有两种:相对路径和绝对路径. 路径标识: 标识符号说明 / 路径标识 . 当前目录 .. 上一层目录 "." ...

随机推荐

C#接口和泛型类
1.定义: 定义为一个约束,实现接口的类或者结构必须遵守该约定.借口是类之间交互的一个协议.定义了类之间的交互标准. 接口是类之间相互交互的一个抽象,把类之间需要交互的内容抽象出来定义成接口. 接口只 ...
mysql基本操作（一）
1.登录mysql mysql -h localhost -u root -p 登录mysql,其中 -h是指定要连接mysql服务器的主机名 -u是指定用户 -次数登录必须用-p输入密 ...
Ajax+PHP实现异步上传多张图片
Ajax+PHP实现异步上传多张图片 HTML代码  < ...
51Nod1675 序列变换数论莫比乌斯反演
原文http://www.cnblogs.com/zhouzhendong/p/8665675.html 题目传送门 - 51Nod1675 题意给定序列$a,b$,让你求满足$\gcd(x,y)= ...
UOJ#53. 【UR #4】追击圣诞老人树链剖分 k短路
原文链接https://www.cnblogs.com/zhouzhendong/p/UOJ53.html 题意给定一棵有 n 个节点的树. 每一个点有一个权值. 对于每一个 $i$ 给定三个参数 ...
BZOJ2553 [BeiJing2011]禁忌 AC自动机矩阵
原文链接http://www.cnblogs.com/zhouzhendong/p/8196279.html 题目传送门 - BZOJ2553 题意概括引用一下lych大佬的: 在字母只有前alph ...
linux系统虚拟机下安装jdk
首先需要得到可以创建文件和上传文件的权限 . 将下载好的jdk文件上传到指定的文件目录下. tar -zxvf jdk-8u60-linux-x64.tar.gz 解压到当前文件下会 ...
JavaEE-tomcat8.5的启动方法
首先: 了解我电脑中各类需要的软件的位置: 1.Java jdk1.8.0_191处在C盘目录下(C:\Program Files\Java\jdk1.8.0_191),Java jre1.8.0_1 ...
ZOJ 1940 Dungeon Master【三维BFS】
<题目链接> 题目大意: 在一个立体迷宫中,问你从起点走到终点的最少步数. 解题分析: 与普通的BFS基本类似,只需要给数组多加一维,并且走的时候多加上.下这两个方向就行. #inclu ...
Linux学习之源码包安装与脚本安装(十八)
Linux学习之源码包安装与脚本安装目录源码包与RPM包的区别源码包安装脚本安装源码包与RPM包的区别 1.区别安装之前的区别:概念上的区别安装之后的区别:安装位置不同源码包: 开源的 ...

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

Html图像标签：

绝对路径和相对路径：

Html图像标签、绝对路径和相对路径：的更多相关文章

随机推荐

热门专题