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. Spring MVC基础知识整理➣国际化和异常处理

    概述 Spring框架为WEB项目提供了国际化以及异常处理机制.所谓的国际化也就是不同国籍,显示不同国籍的语言与符号.异常处理,也就是能够捕获WEB项目下的所有异常信息,并能处理记录这些异常信息机制. ...

  2. RequireJS跨域加载html模版后被转成JS问题分析及解决

    问题描述 RequireJS跨域加载HTML模版失败,例如: 在a.com域名下请求CDN域名下的模版,text.js插件会把html文件转成html.js文件去加载,由于并没有生成html.js文件 ...

  3. 【AtCoder】AGC031

    A - Colorful Subsequence 答案是 \(\prod_{c = 'a'}^{'z'} (cnt[c] + 1)\) #include <bits/stdc++.h> # ...

  4. pyqt5界面使用

    安装配置了pyuic和pyrcc后再进行下面操作 1.打开:       位置(我的):C:\Users\AppData\Roaming\Python\Python35\site-packages\p ...

  5. 计划任务_crontab

    1. crontab原理和使用 Cron 实际上是两个独立的程序.Cron damon, 或者叫做cron ,crond 它是伴随系统一起启动的常驻程序 来检查是否cron 在系统上运行, 用ps 命 ...

  6. Python自用笔记

    函数:raw_input()和input() 注意:在python3.x中,已经删除raw_input(),取而代之的是input(),当然这仅仅是重命名,用法还是一样.因此在这里介绍的是python ...

  7. Codeforces 986D Perfect Encoding FFT 分治 高精度

    原文链接https://www.cnblogs.com/zhouzhendong/p/9161557.html 题目传送门 - Codeforces 986D 题意 给定一个数 $n(n\leq 10 ...

  8. 解决Ubuntu中Unable to acquire the dpkg frontend lock (/var/lib/dpkg/lock-frontend), is another proce...

    解决Ubuntu中Unable to acquire the dpkg frontend lock (/var/lib/dpkg/lock-frontend), is another proce... ...

  9. POJ 2112 Optimal Milking (二分+最短路+最大流)

    <题目链接> 题目大意: 有K台挤奶机和C头奶牛,都被视为物体,这K+C个物体之间存在路径.给出一个 (K+C)x(K+C) 的矩阵A,A[i][j]表示物体i和物体j之间的距离,有些物体 ...

  10. 003.Ceph扩展集群

    一 基础准备 参考<002.Ceph安装部署>文档部署一个基础集群. 二 扩展集群 2.1 扩展架构 需求:添加Ceph元数据服务器node1.然后添加Ceph Monitor和Ceph ...