zoukankan      html  css  js  c++  java
  • html图像

    <img> 即图像标签
    需要设置其属性 src指定图像的路径

    示例 1 : 

    显示图像

    <img src="https://how2j.cn/example.gif"/>

    示例 2 : 

    同级目录图像

    如果是本地文件,只需把图片放在同一个目录下即可
    src直接使用文件名,不需要/

    示例 3 : 

    上级目录图像

    图片在上级目录,则在src上加上 ../,即可访问上级目录的图片
    如果是在上级目录的上级目录,则使用 ../../

     示例 4 : 

    其他目录图像

    src使用图片所在的绝对路径,并在前面加上file://

    示例 5 : 

    设置图像的大小

    如果设置的大小比原图片大,则会产生失真效果

    <img width="200" height="200" src="https://how2j.cn/example.gif"/>

     示例 6 : 

    图像居中

    img不能够自己居中,需要放在其他能够居中的标签中实现这个效果,比如h1标签,p标签.
    经常采用的手段是放在div中居中

    <div align="left">
      <img src="https://how2j.cn/example.gif"/>
    </div>
     
    <div align="center">
      <img src="https://how2j.cn/example.gif"/>
    </div>
     
    <div align="right">
      <img src="https://how2j.cn/example.gif"/>
    </div>

     示例 7 : 

    替换图片上的文字

    如果图片不存在,默认会显示一个缺失图片,这是不友好的
    所以可以加上alt属性。
    当图片存在的时候,alt是不会显示的
    当图片不存在的时候,alt就会出现

    <img src="https://how2j.cn/example_not_exist.gif" />
     
    <br/>
     
    <img src="https://how2j.cn/example.gif" alt="这个是一个图片" />
     
    <br/>
    <img src="https://how2j.cn/example_not_exist.gif" alt="这个是一个图片" />

  • 相关阅读:
    吴恩达 — 神经网络与深度学习 — L1W3练习
    吴恩达 — 神经网络与深度学习 — L1W2练习
    吴恩达 — 神经网络与深度学习 — L1W1练习
    Scala基础编程
    HDFS常用命令介绍与使用
    关于Eureka客户端连接服务端报错问题Cannot execute request on any known server
    Spring Cloud_Ribbon
    Spring Cloud_eureka组件
    CAS单点登录入门
    Spring Boo数据访问JDBC
  • 原文地址:https://www.cnblogs.com/JasperZhao/p/12922728.html
Copyright © 2011-2022 走看看