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. 三种启动SQLSERVER服务的方法(启动sqlserver服务器,先要启动sqlserver服务)

    1.后台启动 计算机-管理-服务和应用程序 2.SQL SERVER配置管理器 3.在运行窗口中使用命令进行启动:

  2. 【SQL优化】SQL优化工具

    SQLAdvisor 是由美团点评公司北京DBA团队开发维护的 SQL 优化工具:输入SQL,输出索引优化建议. 它基于 MySQL 原生词法解析,再结合 SQL 中的 where 条件以及字段选择度 ...

  3. 手机号获取省份,城市api的使用

    function get_mobile_area($mobile){ header('Content-Type:text/html;charset=gbk'); $url = 'http://life ...

  4. iOS的流畅性

    1优先级别不同:iOS最先响应屏幕 优先级别不同:iOS最先响应屏幕 当我们使用iOS或者是Android手机时,第一步就是滑屏解锁找到相应程序点击进入.而这个时候往往是所有操控开始的第一步骤,iOS ...

  5. Unity 三维软件单位导入资源单位比例

    三维软件 内部米制尺寸/m 默认设置导入unity中的尺寸/m 与unity单位比例 Maya 1 100 1:100 3DS MAX 1 0.01 100:1 Cinema 4D 1 100 1:1 ...

  6. zookeeper+kafka集群搭建

    一.ZK集群安装. 解压安装包后进入conf目录,conf/zoo_sample.cfg拷贝一份命名为zoo.cfg,同时也放在conf下面. zookeeper配置文件: # The number ...

  7. hdu2614 Beat

    题意: 有n个问题. 给出你解决完第i个问题之后解决j问题所花的时间,花的时间越多表示难度越大,每次只能解决难度大于或等于上个题难度的问题.问你最多能解决多少问题. 他妈的,第一次做想半天想不出来如何 ...

  8. 《Exception》第八次团队作业:Alpha冲刺(第二天)

    一.项目基本介绍 项目 内容 这个作业属于哪个课程 任课教师博客主页链接 这个作业的要求在哪里 作业链接地址 团队名称 Exception 作业学习目标 1.掌握软件测试基础技术.2.学习迭代式增量软 ...

  9. HDU 1348 Wall ( 凸包周长 )

    链接:传送门 题意:给出二维坐标轴上 n 个点,这 n 个点构成了一个城堡,国王想建一堵墙,城墙与城堡之间的距离总不小于一个数 L ,求城墙的最小长度,答案四舍五入 思路:城墙与城堡直线长度是相等的, ...

  10. 洛谷P5239 回忆京都

    和 NOIP2016TG 组合数问题 差不多是一样的-- 首先要知道杨辉三角和组合数之间的关系 看一下数据范围,很明显要避免重复计算,而且查询的复杂度要非常小 一看n, m <= 1000 这明 ...