<!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>HTML:基础img标签 做一个图库</title>

 </head>

 <body>

  <h1>收藏的图片</h1>

  <img src="1.jpg" width="200" height="200">

  <img src="2.jpg" width="200" height="200">

  <img src="3.jpg" width="200" height="200">

  <img src="4.jpg" width="200" height="200">

  <img src="5.jpg" width="200" height="200">

  <img src="6.jpg" width="200" height="200">

  <img src="7.jpg" width="200" height="200">

  <img src="8.jpg" width="200" height="200">

  <img src="9.jpg" width="200" height="200">

  <img src="10.jpg" width="200" height="200">

  <img src="11.jpg" width="200" height="200">

  <img src="12.jpg" width="200" height="200">

  <img src="13.jpg" width="200" height="200">

  <img src="14.jpg" width="200" height="200">

  <img src="15.jpg" width="200" height="200">

  <img src="16.jpg" width="200" height="200">

 </body>

 </html>

打开浏览器显示:

 // 源码讲解

 src:图片的路径

 width:设置图片的宽度

 height:设置图片的高度

 alt:图片无法显示则显示描述文字（图库例子中并没有用这个属性）

 关于路径分为相对路径和绝对路径
 但有盘符的就是绝对路径 比如:file:///C:/Users/windows/Desktop/html/index.html(我的文件放到了桌面html文件夹的地方)





这就是绝对路径,但只能在你的电脑上打开能正常显示,如果别人的文件夹没有放到桌面则不能正常打开页面


所以推荐使用相对路径,相对路径是相对你的HTML页面所在位置


举例:




页面和图片是同一目录下：就是这样




相对路径就是  <img src="1.jpg"> 这样就可以取到图片


2.图片和html文件没在同级目录怎么引入？




则这样引入


<img src="data:images/1.jpg">


3.html文件在header文件夹下的情况呢？如何引入在images下的文件？




则这样引入：


<img src="../images/1.jpg">


../ 表示的是上一级目录


.../就是上上级目录
												


											
HTML基础 img标签 做一个图库的更多相关文章
	

    
								
  1. 用HTML5的Audio标签做一个歌词同步的效果
		
    HTML5出来这么久了,但是关于它里面的audio标签也就用过那么一次,当然还仅仅只是把这个标签插入到了页面中.这次呢就刚好趁着帮朋友做几个页面,拿这个audio标签来练练手. 首先你需要向页面中插入 ...
    
		
    2. 
						
  2. 用struts2标签如何从数据库获取数据并在查询页面显示。最近做一个小项目，需要用到struts2标签从数据库查询数据，并且用迭代器iterator标签在查询页面显示，可是一开始，怎么也获取不到数据，想了许久，最后发现，是自己少定义了一个变量，也就是var变量。
		
    最近做一个小项目,需要用到struts2标签从数据库查询数据,并且用迭代器iterator标签在查询页面显示,可是一开始,怎么也获取不到数据,想了许久,最后发现,是自己少定义了一个变量,也就是var变 ...
    
		
    3. 
						
  3. 【 D3.js 入门系列 --- 5.1 】 做一个带坐标轴和标签的图表
		
    前面几节讲解了图标.坐标轴.比例等等,这一节整合这些内容做一个实用的图表.结果图如下: 代码如下所示: <html> <head> <meta charset=" ...
    
		
    4. 
						
  4. “医疗信息化行业之中的联发科”- 我们在医疗行业中的定位及目标 想做一个面对中小企业的专业上游软件供应商 台湾联发科技颠覆掉的是一个封闭的手机产业系统 解决方案，即AgileHIS.NET数字化医院基础方案
		
    “医疗信息化行业之中的联发科”- 我们在医疗行业中的定位及目标   我们做中国医疗信息化行业之中的联发科 ---我们在医疗行业中的定位及目标 从我个人来讲,我从2001年到现在这10年之间基本上一直在 ...
    
		
    5. 
						
  5. 今天做一个项目的时候，要在一个编辑的jsp页面的textarea标签设置value属性，结果发现他没有value属性，但是是编辑页面又必须要回显要修改的内容，所以在参考了w3cschool之后很轻松的解决了这个问题。
		
    今天做一个项目的时候,要在一个编辑的jsp页面的textarea标签设置value属性,结果发现他没有value属性,但是是编辑页面又必须要回显要修改的内容,所以在参考了w3cschool之后很轻松的 ...
    
		
    6. 
						
  6. 用vue的抽象组件来做一个防止img标签url为空或url地址出错的验证
		
    看了网上文章学习了下vue的抽象组件,感觉就跟react的高阶组件一样的使用场景,只是更加面向vue的底层编程 ,网上介绍的抽象组件一般有2种用法,1 用来加防抖和节流 2 用来控制按钮是否允许点击做 ...
    
		
    7. 
						
  7. 【云开发】10分钟零基础学会做一个快递查询微信小程序，快速掌握微信小程序开发技能（轮播图、API请求）
		
    大家好,我叫小秃僧 这次分享的是10分钟零基础学会做一个快递查询微信小程序,快速掌握开发微信小程序技能. 这篇文章偏基础,特别适合还没有开发过微信小程序的童鞋,一些概念和逻辑我会讲细一点,尽可能用图说 ...
    
		
    8. 
						
  8. TTS-零基础入门-10分钟教你做一个语音功能
		
    在本片博客正式開始之前,大家先跟我做一个简单的好玩的 小语音. 新建一个文本文档,然后再文档里输入这样 一句话  CreateObject("SAPI.SpVoice").Spea ...
    
		
    9. 
						
  9. C#基础---Attribute(标签） 和 reflect（反射) 应用二
		
    以前我有写过一篇有关,打标签和反射的应用,主要用于类中字段的验证.下面是连接 C#基础---Attribute(标签) 和 reflect(反射) 应用. 这个项目迭代发现公司项目里面发现老代码对业务 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 对webpack的初步研究2
			
    Entry Points 如“ 入门”中所述,有多种方法可以entry在webpack配置中定义属性.我们会告诉你,你的方法可以配置的entry属性,除了解释为什么它可能对你有用 Single Ent ...
    
			
    2. 
						
  2. 帝国CMS编辑器粘贴Word图片
			
    图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码 目前限chrome浏览器使用,但是项目要求需要支持所有的浏览器,包括Windows和macOS系统.没有办 ...
    
			
    3. 
						
  3. Centos7卸载FastDFS6.1卸载(六)
			
    今天由于安装了高版本的fastdfs,与nginx不兼容,因此要卸载掉,重新安装. 转载:http://www.leftso.com/blog/244.html ) 停止服务 [root@bogon  ...
    
			
    4. 
						
  4. Python_009(函数,命名空间)
			
    一.函数 1.函数格式: #定义函数: def function(): 函数体 return 返回值 #调用函数: function() ret = function() 这是得到返回值. 这里是用关 ...
    
			
    5. 
						
  5. [CSP-S模拟测试]:飞(fly)（数状数组+简单几何）
			
    题目描述 $liu\_runda$决定提高一下知识水平,于是他去请教郭神.郭神随手就给了$liu\_runda$一道神题,$liu\_runda$并不会做,于是把这个题扔到联考里给高二的做.郭神有$n ...
    
			
    6. 
						
  6. VBox 启动虚拟机失败 - NtCreateFile(\Device\VBoxDrvStub)
			
    在Vbox(5.0.8 版本)启动Ubuntu的虚拟机时,遇到错误信息: NtCreateFile(\Device\VBoxDrvStub) failed: 0xc000000034 STATUS_O ...
    
			
    7. 
						
  7. SqlServer 查看缓存 并合理设置最大内存
			
    SqlServer 服务器运行一段时间发现内存逐渐增长 飙升到98%了 解决方法: 重启主机 重启SqlServer服务 设置最大内存 前两种方法不太适合线上环境 且指标不治本 建议用设置最大内存 如 ...
    
			
    8. 
						
  8. MySQL工作中遇到的问题记录
			
    1:log_slave_updates: 从库1搭建级联从库2,从库1需要开启log_slave_updates,修改/etc/my.cnf,增加一行log_slave_updates=1,重启数据库 ...
    
			
    9. 
						
  9. zabbix 接入钉钉机器人报警
			
    import requests import json import sys import os headers = {'Content-Type': 'application/json;charse ...
    
			
    10. 
						
  10. 【SpringBoot】 Java中如何封装Http请求，以及JSON多层嵌套解析
			
    前言 本文中的内容其实严格来说不算springboot里面的特性,属于JAVA基础,只是我在项目中遇到了,特归纳总结一下. HTTP请求封装 目前JAVA对于HTTP封装主要有三种方式: 1. JAV ...
    
			
    11.