zoukankan      html  css  js  c++  java
  • img标签及属性

    一、img标签

    1、img标签的作用:用来告诉浏览器我们需要显示一张图片

    2、img标签格式:<img src = " xxx.jpg">

         -- img标签中的src是英文source的缩写,src 是用来告诉img标签,需要显示的图片名称

    3、注意点:

      -- 和H系列标签、P标签、Hr标签不一样,img标签不会独占一行

    4、img标签的属性

    width:宽度

    height:高度 

      --  img标签中的width和height 这两个属性的作用:是用来告诉标签将来需要显示的图片的宽和高

      --  如果 img 标签没有指定需要现实的图片宽高,那么系统会按照图片默认的宽高显示

      -- 如果img 标签指定了宽高,那么系统会按照指定的宽高显示 

      --  如果我们手动指定了img标签的宽高,有可能导致图片变形;如果想指定宽高的图片不变形,可以指定宽度或高度的其中一个值即可,只要指定其中一个值(高 / 宽 ),系统会自动根据该值计算出对应的宽 / 高,并且等比拉伸,不会变形

    title:用来告诉浏览器,当鼠标悬停在图片时显示的内容

    alt  :是英文alternate的缩写,用来告诉浏览器当需要显示的图片找不到时显示的内容

    二、img标签路径问题:想给src属性赋值有2种方式

    1、通过相对路径赋值:

       --  相对路径就是每次都是从.html文件所在文件夹开始查找

    1.1 同级:是图片存放的位置和.html文件存储在同一个文件夹中,

          格式:src = "Figure_1.png"

          含义:在.html文件所在的文件夹中查找名称叫做Figure_1.png的图片

    1.2 下级 :是存储图片的文件夹和.html文件在同一个文件夹中

          格式:src = "Images/Figure_1.png"

          含义:在.html文件所在的文件夹中查找名称叫做Images的文件夹中找到名称叫做Figure_1.png的图片

    1.3上级:存储图片的位置在存储.html的文件夹的上一级

          格式:src = "../Figure_1.png"

          含义:在.html文件所在的文件夹中查找这个文件夹的上一级文件夹,然后再在这个上一级文件夹中找到名称叫做Figure_1.png的图片

    2、通过绝对路径赋值

      -- 绝对路径就是每次都从指定的盘符开始查找

    三、br标签

    1、作用:用来换行

    2、格式:<br>

    3、注意点:

     -- 多个br标签可以连续使用,使用了多少个br标签就会换多少行

     -- 由于html的作用是用来给文本添加语义,而br标签的语义是不另外起一个段落换行,在企业开发中,一般情况下,需要换行都是因为需要另外起一个段落,所以企业开发中很少用br标签

    代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>百度一下,你就知道了</title>
    </head>
    <body>
    <!--只设置了img标签的src属性,其他默认-->
        <img src="Figure_1.png"><br>
        <p>设置了img标签的src、width、height属性,但宽高不是等比拉伸</p>
        <p><img src="Figure_1.png" width="300" height="478"></p>
        <P>设置了img标签的src、width</P>
        <P><img src="Figure_1.png" width="100"></P>
        <P>设置了img标签的src、height属性</P>
        <P><img src="Figure_1.png" height="178"></P>
        <P>设置了img标签的src、height属性</P>
        <P><img src="Figure_1.png" height="178" title="这是随便找的图片"></P>
    
        <P><img src="Figure_12.png" width="100" alt="你找的图片去到外太空了"></P>
    
    </body>
    </html>
  • 相关阅读:
    关于使用JavaMail注册激活邮箱的注意点
    Maven Web报错:org.apache.jasper.JasperException: Unable to compile class for JSP
    IDEA的中文乱码问题
    深入了解Java动态代理与反射机制
    String、StringBuffer和StringBuilder的区别
    Java中HashCode()和equals()的关系
    Java中向下转型的意义
    局部内部类访问局部变量的问题
    Java内部类的应用场景
    Python os.rmdir() 方法
  • 原文地址:https://www.cnblogs.com/wodexk/p/10279643.html
Copyright © 2011-2022 走看看