码迷,mamicode.com
首页 > Web开发 > 详细

HTML基础——网站图片显示页面

时间:2017-08-15 18:50:21      阅读:172      评论:0      收藏:0      [点我收藏+]

标签:save   效果   路径   tle   版本   信息   pictures   http   内容   

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里的内容,如下:

技术分享

HTML基础——网站图片显示页面

标签:save   效果   路径   tle   版本   信息   pictures   http   内容   

原文地址:http://www.cnblogs.com/cxq1126/p/7366522.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!