zoukankan      html  css  js  c++  java
  • HTML基础——网站图片显示页面

    1、图片标签

      <img />

      属性:
        src:指的是图片显示的路径(位置)
          绝对路径:D:PicturesSaved Pictures
          相对路径:
              ①同一级:直接写文件名称或者./文件名称
              ②上一级:../文件名称
              ③下一级:写上目录名称/文件名称
          指定图片的宽度,取值可以是像素值,也可以是百分比
          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里的内容,如下:

  • 相关阅读:
    Git_创建版本库
    Git_安装Git
    Git_集中式vs分布式
    Git_git的诞生
    echartShow
    微信小程序红包开发 小程序发红包 开发过程中遇到的坑 微信小程序红包接口的
    vue2.0 $router和$route的区别
    vue移动端开发全家桶
    干货分享:vue2.0做移动端开发用到的相关插件和经验总结
    优秀的基于VUE移动端UI框架合集
  • 原文地址:https://www.cnblogs.com/cxq1126/p/7366522.html
Copyright © 2011-2022 走看看