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回忆录之英勇黄铜V

    说实话最近心好累,就因为一个混合app开发贼简单的一个功能.我本以为很简单,做起来却发现需要很多知识面.麻雀虽小五脏俱全,即使再小的一个功能实现起来也需要很全面的知识来担保.要想盖高楼大厦啊必定要有坚 ...

  2. iproute2+tc notes

    iproute2+tc notes The iproute2+tc package allows access to the variety of neat new networking featur ...

  3. Oracle的分页查询及内联视图和函数处理

    1.Oracle的分页常用方式: select * from(select * ,ROWNUM num from table where ROWNUM<=20 ) where num>0; ...

  4. pythone 学习笔记（粗略）

    文档目录 概述 安装 基本语法 数据结构 4.1 数字和字符串类型 4.2 元祖 4.3 列表 4.4 字典 流程语句 5.1 分支结构 5.2 逻辑运算符(if) 5.3 循环 5.3.1 for ...

  5. CodeForces-366C Dima and Salad 对01背包的理解 多个背包问题

    题目链接:https://cn.vjudge.net/problem/CodeForces-366C 题意 给出n个水果和一个常数k,其中每个水果都有两种性质ai, bi(美味度,卡路里量). 要保证 ...

  6. BZOJ 3676 [Apio2014]回文串 (后缀自动机+manacher/回文自动机)

    题目大意: 给你一个字符串,求其中回文子串的长度*出现次数的最大值 明明是PAM裸题我干嘛要用SAM做 回文子串有一个神奇的性质,一个字符串本质不同的回文子串个数是$O(n)$级别的 用$manach ...

  7. 紫书 例题7-14 UVa 1602（搜索+STL+打表）

    这道题想了很久不知道怎么设置状态,怎么拓展,怎么判重, 最后看了这哥们的博客 终于明白了. https://blog.csdn.net/u014800748/article/details/47400 ...

  8. Spring Security中的MD5盐值加密

    在 spring Security 文档中有这么一句话: "盐值的原理非常简单,就是先把密码和盐值指定的内容合并在一起,再使用md5对合并后的内容进行演算,这样一来,就算密码是一个很常见的字 ...

  9. Tomcat远程代码执行漏洞(CVE-2017-12615)修复

    一.漏洞介绍 2017年9月19日,Apache Tomcat官方确认并修复了两个高危漏洞,其中就有Tomcat远程代码执行漏洞,当存在漏洞的Tomcat运行在Windwos主机上,且启用了HTTP ...

  10. 程序猿的量化交易之路（21）--Cointrader之Currency货币实体（9）

    转载须注明出自:http://blog.csdn.net/minimicall? viewmode=contents,http://cloudtrader.top 货币,Cointrader中基本实体 ...