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

  1. [HTML]图像标签＜img＞的用法、属性及路径问题

    图像标签:<img>        用法:<img src = "图像地址"> 图像标签的属性 属性 说明 src 指明图像的地址(分为相对路径和绝对路径两 ...

  2. HTML标签的绝对路径和相对路径

    我在javaweb中写json的Demo的时候遇到了这个问题,图片一一直取不出来,查了好久终于解决了,所以现在记录一下. 绝对路径: 其实很容易理解,如果你是一个普通的项目,那就是它在你电脑里真实存在 ...

  3. html图像、绝对路径和相对路径，链接

    html图像 <img>标签可以在网页上插入一张图片,它是独立使用的标签,通过"src"属性定义图片的地址,通过"alt"属性定义图片加载失败时显示 ...

  4. PHP(一般标签介绍，标签特性，实体名称，绝对路径与相对路径）

    h1:为标题  h1~h6 标题会逐渐变小 需更换标签里面的数字 如: <h1>这是标题123</h1>---标题 <h2>这是标题123</h2>-- ...

  5. 禁止手机页面中A标签长按弹出路径框

    //禁止手机页面中A标签长按弹出路径框    window.onload=function(){        document.documentElement.style.webkitTouchCa ...

  6. qt: 打不开png图像以及opencv加载中文路径问题；

    经过亲测, QT(版本: 5.9.4)提供的QImageReader或者函数load在加载本地png图像时,均会提示失败, 按照网上的方法,将Qt plugins下的imageformats 拷贝到e ...

  7. 转.HTML中img标签的src属性绝对路径问题解决办法，完全解决！

    HTML中img标签的src属性绝对路径问题解决办法,完全解决   需求:有时候自己的项目img的src路径需要用到本地某文件夹下的图片,而不是直接使用项目根目录下的图片. 场景:eclipse,to ...

  8. Servlet-base标签的作用（相对路径和绝对路径）

    Web中的相对路径和绝对路径 在javaWeb中,路径分为相对路径和绝对路径: 相对路径: .     表示当前目录 .. 表示上一级目录 资源名 表示当前目录/资源名 绝对路径: http://ip ...

  9. XHTML 相对路径与绝对路径

    文件路径 文件路径就是文件在电脑(服务器)中的位置,表示文件路径的方式有两种:相对路径和绝对路径. 路径标识: 标识符号 说明 / 路径标识 . 当前目录 .. 上一层目录 "." ...

随机推荐

  1. Echo（）、print（）、print_r（）区别

    echo可以一次输出多个值,多个值之间用逗号分隔.echo是语言结构(language construct),而并不是真正的函数,因此不能作为表达式的一部分使用.echo是php的内部指令,不是函数, ...

  2. Elasticsearch 备忘

    Elasticsearch7.0版本在查询时需要增加 “track_total_hits”:true 来强制进行准确的计数,默认为 “track_total_hits”:10000, 而且返回的hit ...

  3. Doracle.jdbc.J2EE13Compliant=true

    To make the Oracle driver behave in a Java EE-compliant manner, you must define the following JVM pr ...

  4. A - Points and Segments CodeForces - 429E

    题解: 方法非常巧妙的一道题 首先考虑要求全部为0怎么做 发现是个欧拉回路的问题(很巧妙) 直接dfs一遍就可以了 而这道题 要求是-1,1,0 我们可以先离散化 完了之后判断每个点被奇数还是偶数条边 ...

  5. 【前端基础系列】slice方法将类数组转换数组实现原理

    问题描述 在日常编码中会遇到将类数组对象转换为数组的问题,其中常用到的一种方式使用Array.prototype.slice()方法. 类数组对象 所谓的类数组对象,JavaScript对它们定义为: ...

  6. python全栈开发day51-jquery插件、@media媒体查询、移动端单位、Bootstrap框架

    一.昨日内容回顾 技术行业 (1)ajax技术 XMLHttpRequest() <1>创建XMLHttpRequest()对象 <2>检测状态(通过readyState的改变 ...

  7. vsftp为不同用户设置不同的ftp的根目录

    需求 要求ftp登录后的根目录是/var/test/,但是又不能影响其他用户的登录路径,因为有些程序是直接在根目录进行操作的,而没有目录切换的过程.操作过程新建用户 useradd test1user ...

  8. Python 携程

    一.协程 1.又称微线程,纤程.英文名Coroutine.一句话说明什么是协程:协程是一种用户态的轻量级线程(相当于操作系统不知道它的存在,是用户控制的). 2.协程拥有自己的寄存器上下文和栈(代码的 ...

  9. react添加样式的四种方法

    React给添加元素增加样式 第一种方法: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  10. Mysql8远程不能登录报错

    mysql8远程登录报错Client does not support authentication protocol requested by server; consider upgrading ...