1、图片标签

　　<img />

　　属性：
　　　　src:指的是图片显示的路径(位置)
　　　　　　绝对路径：D:\Pictures\Saved Pictures
　　　　　　相对路径：
　　　　　　　　　　①同一级：直接写文件名称或者./文件名称
　　　　　　　　　　②上一级：../文件名称
　　　　　　　　　　③下一级：写上目录名称/文件名称
　　　　　　width:指定图片的宽度，取值可以是像素值，也可以是百分比
　　　　　　height：指定图片的高度，取值可以是像素值，也可以是百分比
　　　　　　alt：当图片无法正常显示的时候给出的提示信息(该属性的显示效果与浏览器以及浏览器版本有关)

2、首先准备两张图片放在img文件夹下，如图：

代码如下：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>网页图片显示页面</title>

     </head>

     <body>

         <img src="../img/logo2.png" width="260px" height="45px" alt="logo图片"/>

         <img src="../img/header.png" width="300px" height="45px" alt="header图片"/>

     </body>

 </html>

运行效果如下：

3、如果图片放在案例二：网站图片信息文件夹下，相对路径直接写路径名，src="logo2"

如果图片位置和路径不一致，图片则不能正常显示，会显示alt里的内容，如下：

HTML基础——网站图片显示页面的更多相关文章

  1. HTML基础——网站首页显示页面

    1.表格标签: border设置边框,align设置位置(居中等),bgcolor设置背景颜色,cellspacing设置边框之间的空隙,cellpadding设置边框与里面内容的间距. table表 ...

  2. HTML基础——网站后台显示页面

    1.框架集标签:(作用:将页面进行区域的划分) <frameset rows="" cols=""> <frame src="&qu ...

  3. ubuntu下Chrome谷歌浏览器部分网站图片显示不正常的解决方法

    title: ubuntu下Chrome谷歌浏览器部分网站图片显示不正常的解决方法 toc: false date: 2018-09-02 14:37:26 categories: methods t ...

  4. WordPress基础：wp_list_pages显示页面信息列表

    函数:wp_list_pages($args) 作用:列出某个分类下的分类项目 常见参数说明: 参数 用途  值   sort_column  排序方式 post_title 按标题排序 [默认] m ...

  5. HTML基础——网站友情链接显示页面

    1.列表标签 有序列表:type默认是1,2,3……,reserved指降序排列 <ol type="I" start="" reversed=" ...

  6. 【js】【图片显示】js控制html页面显示图片方式

    js控制html页面显示图片方式,只需要引入“jquery-1.11.2.min.js” js: /* 引用 <script src="jquery-1.11.2.min.js&quo ...

  7. 手机浏览PC版页面出现背景图片显示不全的问题解决方案

    手机浏览PC版页面出现背景图片显示不全 给定宽高的值

  8. 4.C#WinForm基础图片(显示和隐藏)

    要求: 软件上有一张图片,默认是隐藏的.用户在文本框中输入身份证号(131226198105223452),点击按钮,如果年龄大于18岁,则显示图片. 知识点: 取当前年份,Date Time Now ...

  9. 记一次ios下h5页面图片显示问题

    刚入职公司时做了一个移动端图片预览的组件,之前也有业务组用过,没发现什么问题,但是这次有两个很诡异的问题. 一个是老数据的图不显示,另一个是图片点击预览只显示一部分加载不全.之所以诡异是所有设备都没问 ...

随机推荐

  1. Java 系列之spring学习--springmvc搭建（四）

    一.建立java web 项目 二.添加jar包 spring jar包下载地址http://repo.spring.io/release/org/springframework/spring/ 2. ...

  2. struts2学习之基础笔记1

    第6章 Strusts 2框架 1  引出 Web App  àà MVC  àà View 视图(jsp,html,JS) | C(Servlet)Filter,Listneer | M(数据bea ...

  3. 洛谷P3704 [SDOI2017]数字表格

    题目描述 Doris刚刚学习了fibonacci数列.用f[i]f[i] 表示数列的第ii 项,那么 f[0]=0f[0]=0 ,f[1]=1f[1]=1 , f[n]=f[n-1]+f[n-2],n ...

  4. Android设计模式—— 观察者模式(以及EventBus的简单使用)

    1.概述 观察者模式最常用的地方是GUI系统.订阅-发布系统.观察者模式的一个重要作用就是解耦,将观察者和被观察者解耦,使得他们之间的依赖性更小. 2.定义 定义对象间的一种一对多依赖关系,使得每当一 ...

  5. CDR 2017版本LiveSketch工具是什么，怎么用？

    LiveSketch 工具在提供手绘草图的简便性和速度的同时,结合了智能笔触调整和向量绘图.在您绘制草图时,CorelDRAW 2017会分析您输入笔触的属性.时序和空间接近度,对其进行调整并将其转换 ...

  6. 工作流Activiti学习地址

    http://blog.csdn.net/xnf1991/article/details/52610277

  7. 获得a-b的差[返回BigDecimal 类型]

    /*** * 返回 a-b 的差 [返回 BigDecimal 类型] * @param a 被减数 * @param b 减数 * @return */ public static BigDecim ...

  8. linux 源码包安装拾遗

    源码包安装和apt-get/yum的区别 安装前的区别:概念上的区别 rpm和dpkg包是经过编译过的包,并且其安装位置由厂商说了算,厂商觉得安装在哪里合适,就会装在哪里,而源码包则是没有经过编译的文 ...

  9. CF487E Tourists（圆方树+堆+链剖）

    本题解并不提供圆方树讲解. 所以不会圆方树的出门右转问yyb 没有修改的话圆方树+链剖. 方点的权值为点双连通分量里的最小值. 然后修改的话圆点照修,每一个方点维护一个小根堆. 考虑到可能被菊花卡死. ...

  10. com.jasson.im.api.APIClient jar包 下载

    包名:ImApi2.3.jar 链接: https://pan.baidu.com/s/1SgeufcaH6y_K-AJEKDZDtw 提取码: 3v78 复制这段内容后打开百度网盘手机App,操作更 ...