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. POJ 1414 暴搜

    题意比较复杂 (但是很好理解) 大概意思是给你等边三角形(详见题目中的图). 最后一行有n个数,下一次要填的数是c. 里面预先已经填好了数字.(0为未填) 得分的标准是这个分数的连通块周围没有空的地方 ...

  2. Spring《二》 Bean的生命周期

    Bean初始化 1.bean中实现public void init():方法,config.xml中增加init-method="init" 属性. 2.bean实现接口Initi ...

  3. APUE学习笔记2——文件I/O

    1 引言 本章首先讨论Unix系统中大多数文件I/O最常用的5个系统函数:open.read.write.lseek以及close. 本章所说明的函数又被成为不带缓冲的I/O,不带缓冲是指每个read ...

  4. LeetCode Golang 8. 字符串转换整数 (atoi)

    8. 字符串转换整数 (atoi) 首先,该函数会根据需要丢弃无用的开头空格字符,直到寻找到第一个非空格的字符为止. 当我们寻找到的第一个非空字符为正或者负号时,则将该符号与之后面尽可能多的连续数字组 ...

  5. hdu 1693 插头dp入门

    hdu1693 Eat the Trees 题意 在\(n*m\)的矩阵中,有些格子有树,没有树的格子不能到达,找一条或多条回路,吃完所有的树,求有多少种方法. 解法 这是一道插头dp的入门题,只需要 ...

  6. python中return和print的区别（详细）

    huskiesir最近在研究python哈,今天纠结一个问题,那就是return和print的区别,都是可以输出结果的,到底有啥区别呀?二话不多说,看下面的例子. #代码1: def break_wo ...

  7. 全面的framebuffer详解

    一.FrameBuffer的原理    FrameBuffer 是出现在 2.2.xx 内核当中的一种驱动程序接口.    Linux是工作在保护模式下,所以用户态进程是无法象DOS那样使用显卡BIO ...

  8. selenium+xpath获取href的坑

    先上HTML文档 <html> <body> <a href="http://www.example.com">Example</a> ...

  9. VUE：条件渲染和列表渲染

    条件渲染 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

  10. STM32 抢占优先级和响应优先级

    一.抢占优先级和响应优先级 STM32 的中断向量具有两个属性,一个为抢占属性,另一个为响应属性,其属性编号 越小,表明它的优先级别越高. 抢占,是指打断其他中断的属性,即因为具有这个属性会出现嵌套中 ...