HTML基础 img标签 做一个图库
2024-10-07 13:18:37
<!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">
../ 表示的是上一级目录
.../就是上上级目录
最新文章
- JVM内存简单理解
- 3.2---最小栈（CC150）
- ML 01、机器学习概论
- JavaScript高级程序设计40.pdf
- Android的移动存储之SharedPreferences
- linux sendmail 邮件服务器架设(fedora 8)
- 【原创】抓个Firefox的小辫子，围观群众有：Chrome、Edge、IE8-11
- 2015 多校联赛 ——HDU5316（线段树）
- Mybatis 笔记
- MATLAB accumarray
- go 闭包程序解读
- TortoiseGit push免输密码
- Hibernate 配置文件hibernate.cfg.xml的详细
- db2 v11 安装测试
- python Console menu
- 关于2013年1月21日的DNS故障分析文章
- 常用数据结构的功能及复杂度总结(OI)
- 微信小程序开发4-JSON
- 7.spring:SpringAOP（配置文件）
- CMD命令不完全版