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="这个是一个图片" />

  • 相关阅读:
    CSRF 攻击
    PHP中HTTP_X_FORWARDED_FOR 和 REMOTE_ADDR的使用
    PHP PDO函数库详解
    STK基础
    opnet统计结果的采集模式——capture mode
    一个博客园代码高亮的方案
    博客园TinyMCE编辑器中插入的代码块使用HTML编辑器再编辑
    local statistics和global statistics的区别
    opnet的函数中FIN、FRET和FOUT
    福昕阅读器默认打开pdf文件视图大小
  • 原文地址:https://www.cnblogs.com/JasperZhao/p/12922728.html
Copyright © 2011-2022 走看看