<!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. 用struts2标签如何从数据库获取数据并在查询页面显示。最近做一个小项目,需要用到struts2标签从数据库查询数据,并且用迭代器iterator标签在查询页面显示,可是一开始,怎么也获取不到数据,想了许久,最后发现,是自己少定义了一个变量,也就是var变量。

    最近做一个小项目,需要用到struts2标签从数据库查询数据,并且用迭代器iterator标签在查询页面显示,可是一开始,怎么也获取不到数据,想了许久,最后发现,是自己少定义了一个变量,也就是var变 ...

  3. 【 D3.js 入门系列 --- 5.1 】 做一个带坐标轴和标签的图表

    前面几节讲解了图标.坐标轴.比例等等,这一节整合这些内容做一个实用的图表.结果图如下: 代码如下所示: <html> <head> <meta charset=" ...

  4. “医疗信息化行业之中的联发科”- 我们在医疗行业中的定位及目标 想做一个面对中小企业的专业上游软件供应商 台湾联发科技颠覆掉的是一个封闭的手机产业系统 解决方案,即AgileHIS.NET数字化医院基础方案

    “医疗信息化行业之中的联发科”- 我们在医疗行业中的定位及目标   我们做中国医疗信息化行业之中的联发科 ---我们在医疗行业中的定位及目标 从我个人来讲,我从2001年到现在这10年之间基本上一直在 ...

  5. 今天做一个项目的时候,要在一个编辑的jsp页面的textarea标签设置value属性,结果发现他没有value属性,但是是编辑页面又必须要回显要修改的内容,所以在参考了w3cschool之后很轻松的解决了这个问题。

    今天做一个项目的时候,要在一个编辑的jsp页面的textarea标签设置value属性,结果发现他没有value属性,但是是编辑页面又必须要回显要修改的内容,所以在参考了w3cschool之后很轻松的 ...

  6. 用vue的抽象组件来做一个防止img标签url为空或url地址出错的验证

    看了网上文章学习了下vue的抽象组件,感觉就跟react的高阶组件一样的使用场景,只是更加面向vue的底层编程 ,网上介绍的抽象组件一般有2种用法,1 用来加防抖和节流 2 用来控制按钮是否允许点击做 ...

  7. 【云开发】10分钟零基础学会做一个快递查询微信小程序,快速掌握微信小程序开发技能(轮播图、API请求)

    大家好,我叫小秃僧 这次分享的是10分钟零基础学会做一个快递查询微信小程序,快速掌握开发微信小程序技能. 这篇文章偏基础,特别适合还没有开发过微信小程序的童鞋,一些概念和逻辑我会讲细一点,尽可能用图说 ...

  8. TTS-零基础入门-10分钟教你做一个语音功能

    在本片博客正式開始之前,大家先跟我做一个简单的好玩的 小语音. 新建一个文本文档,然后再文档里输入这样 一句话  CreateObject("SAPI.SpVoice").Spea ...

  9. C#基础---Attribute(标签) 和 reflect(反射) 应用二

    以前我有写过一篇有关,打标签和反射的应用,主要用于类中字段的验证.下面是连接 C#基础---Attribute(标签) 和 reflect(反射) 应用. 这个项目迭代发现公司项目里面发现老代码对业务 ...

随机推荐

  1. javaSE之运行时异常和编译时异常

    运行时异常继承自RuntimeException; package foundationEnhance; public class Person { private int age; public P ...

  2. http各个状态码的含义

    http各个状态码的含义:由三位数字组成,第一位定义了状态码的类型 常见状态码及解决方法 404:找不到,地址错误 500:逻辑错误 400:一般是入参不匹配 504:超时 2开头:(请求成功)表示成 ...

  3. service pom

    <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> &l ...

  4. nginx配置虚拟主机-端口号区分/域名区分

    Nginx实现虚拟机 可以实现在同一台服务运行多个网站,而且网站之间互相不干扰.同一个服务器可能有一个ip,网站需要使用80端口.网站的域名不同. 区分不同的网站有三种方式:ip区分.端口区分.域名区 ...

  5. WinForm、WPF、ASP.NET窗口生命周期

    https://blog.csdn.net/s_521_h/article/details/73826928

  6. 前端通过axios和FormData实现文件上传功能遇到的坑

    使用element-ui中的upload上传组件,前端上传数据参数已经传过去了,但是后端 (java) 接不到数据 (null) [解决方案] html部分: <el-button type=& ...

  7. oracle sqldeveloper选择性复制备份数据库

    有时需要复制的数据库比较大,复制太慢,或容易出错. 数据库小,简单的 就没这么复杂了,直接导出dmp或用工具都可以.这篇是针对比较大,选择性复制,且复制总是失败的情况. 方法如下. 工具 sqldev ...

  8. Log4j log for java(java的日志) 的使用

    log4j的使用,Log4j log for java(java的日志) 是java主流的日志框架,提供各种类型,各种存储,各种格式,多样化的日志服务. 可以再Apache官网下载得到. 我们下载lo ...

  9. 第 12 章 python并发编程之协程

    一.引子 主题是基于单线程来实现并发,即只用一个主线程(很明显可利用的cpu只用一个)情况下实现并发,并发的本质:切换+保存状态 cpu正在运行一个任务,会在两种情况下切走去执行其他的任务(切换由操作 ...

  10. DbWrench001--简介

    DbWrench--简介 mac下载地址:http://www.dbwrench.com/ DbWrench 工具等价于powerdesigner 均为数据库原型设计工具 DbWrench 详细介绍 ...