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. Personal小金库(避免遗忘，优秀的网址会保存于此方便自己查看)

    由于记性不好,~.~,所以整理了一下一些自己经常看的网址或者博客......不断更新中,如果对您造成了侵权,我立马删除.谢谢~.~ 1:个人的一些link~.~ 博客园名称:别先生 博客园网址:htt ...

  2. asp.net core 创建允许跨域请求的api, cors.

    配置应用方域名. 在webapi中引用cors包,在startup的Configure\ConfigServices中增加启动项配置,在api中增加EnableCors的Attribute属性.即可. ...

  3. Quartz.net 2.4.1 使用记录

    项目需要开发一个调度任务工具,用于

  4. drone的pipeline原理与代码分析

    最近的一个项目,需要实现一个工作任务流(task pipeline),基于之前CICD的经验,jenkins pipeline和drone的pipeline进入候选. drone是基于go的cicd解 ...

  5. 向Spark集群提交任务

    1.启动spark集群. 启动Hadoop集群 cd /usr/local/hadoop/ sbin/start-all.sh 启动Spark的Master节点和所有slaves节点 cd /usr/ ...

  6. 利用Flume将MySQL表数据准实时抽取到HDFS

    转自:http://blog.csdn.net/wzy0623/article/details/73650053 一.为什么要用到Flume 在以前搭建HAWQ数据仓库实验环境时,我使用Sqoop抽取 ...

  7. docker保存、载入、导出、导入

    保存和载入 拿到CONTAINER ID docker ps -a 通过容器id生成镜像dockerlinuxdemoweb:update docker commit b33633d12871 doc ...

  8. lamp源码安装

    先从Apache开始装->MySQL->PHP PHP在编译的时候需要用到MySQL的一些参数,需要用到Apache的参数. 准备工作: 1.查看系统中是否有自带的Apache 如果提示你 ...

  9. 00-JAVA语法基础--动手动脑

    1.运行EnumTest.java,并分析结果,得出结论. 其源代码以及运行结果截图如下: 枚举类型的常量以字符串的形式顺序储.源代码中s和t不是原始数据类型.getCLass():取得当前对象所属的 ...

  10. 解决java编译错误：编码GBK的不可映射字符

    新建java文件,存储时Encoding选择了UTF-8, 由于语句中包含中文,javac编译时报错,提示"编码GBK的不可映射字符": 解决办法: 1.使用javac -enco ...