HTML基础——网站图片显示页面
2017-08-15 18:03
162 查看
1、图片标签
<img />
属性:
src:指的是图片显示的路径(位置)
绝对路径:D:\Pictures\Saved Pictures
相对路径:
①同一级:直接写文件名称或者./文件名称
②上一级:../文件名称
③下一级:写上目录名称/文件名称
width:指定图片的宽度,取值可以是像素值,也可以是百分比
height:指定图片的高度,取值可以是像素值,也可以是百分比
alt:当图片无法正常显示的时候给出的提示信息(该属性的显示效果与浏览器以及浏览器版本有关)
2、首先准备两张图片放在img文件夹下,如图:
代码如下:
运行效果如下:
3、如果图片放在案例二:网站图片信息文件夹下,相对路径直接写路径名,src="logo2"
如果图片位置和路径不一致,图片则不能正常显示,会显示alt里的内容,如下:
<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基础——网站友情链接显示页面
- HTML基础——网站后台显示页面
- HTML基础——网站首页显示页面
- javaEE01-使用很HTML的排版标签编写“网站信息页面”,使用图片标签编写“图面显示页面”,使用列表标签编写“友情链接页面”,使用表格标签编写“首页”,框架标签表现“后台页面”
- HTML基础——网站信息显示页面
- base64编码的图片字节流存入html页面中的显示
- html上面通过websocket接收二进制图片数据并显示在页面上
- HTML基础 img标签设置显示图片的宽度与高度
- 将图片的二进制字节 在HTML页面中显示
- JavaScript网站设计实践(五)编写photos.html页面,实现点击缩略图显示大图的效果
- html基础 提交按钮 数据重置按钮 带图片的按钮 普通按钮,点击关闭当前页面
- html基础 提交按钮 数据重置按钮 带图片的按钮 普通按钮,点击关闭当前页面
- javascript 基础--html页面反向显示
- 一个小型的网站,比如个人网站,可以使用最简单的html静态页面就实现了,配合一些图片达到美化效果,所有的页面均存放在一个目录下,这样的网站对系统架构、性能的要求都很简单,随着互联网业务的不断丰富,网站
- Servlet从本机读取一个图片,并显示在html页面
- html2canvas页面截图图片不显示
- Html显示图片时,超过规定尺寸大小,则同比缩放图片显示,保持页面不变形的方法
- JavaScript网站设计实践(四)编写about.html页面,利用JavaScript和DOM,选择性的显示和隐藏DIV元素
- 上传图片能在HTML页面显示预览
- JavaScript网站设计实践(五)编写photos.html页面,实现点击缩略图显示大图的效果