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. DevOps 在公司项目中的实践落地

    原文出处:https://www.cnblogs.com/beef/p/7743594.html ref: [DevOps]团队敏捷开发系列--开山篇 https://www.cnblogs.com/ ...

  2. C#学习-const和readonly

    const是表示为常量的关键字,一旦赋值就不能改变了.是程序编译时候CLR就将const的值编译到IL代码中了. readonly也是常量的关键的字: 所以,有了这两个关键字的比较.readonly肯 ...

  3. explicit specialization 显式指定

    //explicit specialization 显式指定 #include "stdafx.h" #include <iostream> #include < ...

  4. Spring boot+CXF开发WebService Demo

    最近工作中需要用到webservice,而且结合spring boot进行开发,参照了一些网上的资料,配置过程中出现的了一些问题,于是写了这篇博客,记录一下我这次spring boot+cxf开发的w ...

  5. ajax后台输出有红点

    转自 百度了很多,说有utf8的bom头,通过dw,sublime软件,各种清除格式无果. 后来直接在返回结果之前,执行一下ob_clean(); 完美解决问题

  6. ipython启动 自动导入模块 自动%logstart

    1. 参考 启动ipython或python解释器自动导入组件(例如:numpy) http://ipython.org/ipython-doc/stable/config/intro.html#se ...

  7. 一起学Hadoop——文件的上传、分发与打包

    如果我们想把文件上传到Hadoop集群中,使用put命令即可.下面的语句是将本地文件上传到hadoop集群的/目录下. hadoop fs -put fruit.txt /   下面介绍通过脚本将文件 ...

  8. 聊聊Docker数据卷和数据卷容器

    当程序在容器运行的时候,特别是需要与其他容器中的程序或容器外部程序进行沟通交流,这时需要进行数据交换,作为常用的两种沟通数据的方式,网络通信与文件读写是需要提供给程序的支持, [数据卷] 文件是数据持 ...

  9. Cookies 和 Session的区别

    1.cookie 是一种发送到客户浏览器的文本串句柄,并保存在客户机硬盘上,可以用来在某个WEB站点会话间持久的保持数据. 2.session其实指的就是访问者从到达某个特定主页到离开为止的那段时间. ...

  10. ES6新特性：使用export和import实现模块化（转载）

    在ES6前, 前端就使用RequireJS或者seaJS实现模块化, requireJS是基于AMD规范的模块化库,  而像seaJS是基于CMD规范的模块化库,  两者都是为了为了推广前端模块化的工 ...