zoukankan      html  css  js  c++  java
  • HTML5——2图像标签

    1.HTML5的图像标签为<img/>是一个闭合的标签。

    2.<img/>所涉及的主要属性有

    src:图片的路径,要使用相对路径。

    alt:当图片无法打开时,显示的文字。

    title:鼠标悬停在图片上时,显示的文字。

    图片的宽。

    height:图片的高。

    宽高可以设置为固定的像素,也可以甚至称百分比,按电脑屏幕的百分比显示。

    最好设置宽高,避免因图片无法打开造成的错位等问题。

    height 和 width 属性有一种隐藏的特性,就是人们无需指定图像的实际大小,也就是说,这两个值可以比实际的尺寸大一些或小一些。

    浏览器会自动调整图像,使其适应这个预留空间的大小。使用这种方法就可以很容易地为大图像创建其缩略图,以及放大很小的图像。

    但需要注意的是:浏览器还是必须要下载整个文件,不管它最终显示的尺寸到底是多大,而且,如果没有保持其原来的宽度和高度比例,图像会发生扭曲。

    3.测试效果

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>图像标签测试</title>
    </head>
    <body>

    <!--src 图片路径 alt 无法打开时显示的文字 title 鼠标悬停时显示的文字 width height 宽高-->
    <img src="../doc/images/01.jpg" alt="汽车" title="树下的汽车" width="600" height="600"/>
    </body>
    </html>

  • 相关阅读:
    sqli-labs lexx25-28a(各种过滤)
    sqli-labs less-24(二次注入)
    sqli-labs less13-20(各种post型头部注入)
    sql注入之双查询注入
    sqli-labs less11-12(post型union注入)
    sqli-labs less8-10(布尔盲注时间盲注)
    sqli-labs less-7(文件读写)
    Vue ref childNode 坑
    Blob
    中文输入法不触发onkeyup事件的解决办法Script
  • 原文地址:https://www.cnblogs.com/haoyp/p/7060653.html
Copyright © 2011-2022 走看看