HTML+CSS入门网站图片显示页面详解-职坐标

HTML+CSS入门网站图片显示页面详解

沉沙 2018-08-16 来源：阅读 543 评论 0

摘要：本篇教程介绍了HTML+CSS入门网站图片显示页面详解，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。

本篇教程介绍了HTML+CSS入门网站图片显示页面详解，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。

1、图片标签
　　<img />
　　属性：  　　　　src:指的是图片显示的路径(位置)   　　　　　　绝对路径：D:\Pictures\Saved Pictures   　　　　　　相对路径：    　　　　　　　　　　①同一级：直接写文件名称或者./文件名称    　　　　　　　　　　②上一级：../文件名称    　　　　　　　　　　③下一级：写上目录名称/文件名称  　　　　　　width:指定图片的宽度，取值可以是像素值，也可以是百分比  　　　　　　height：指定图片的高度，取值可以是像素值，也可以是百分比  　　　　　　alt：当图片无法正常显示的时候给出的提示信息(该属性的显示效果与浏览器以及浏览器版本有关)
2、首先准备两张图片放在img文件夹下，如图：

代码如下：

1 <!DOCTYPE html>
2 <html>
3     <head>
4         <meta charset="UTF-8">
5         <title>网页图片显示页面</title>
6     </head>
7     <body>
8         <img src="../img/logo2.png" width="260px" height="45px" alt="logo图片"/>
9         <img src="../img/header.png" width="300px" height="45px" alt="header图片"/>
10     </body>
11 </html>

运行效果如下：

3、如果图片放在案例二：网站图片信息文件夹下，相对路径直接写路径名，src="logo2"
如果图片位置和路径不一致，图片则不能正常显示，会显示alt里的内容，如下：