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>

  • 相关阅读:
    HBase常用Shell命令
    在Eclipse中创建Maven多模块项目
    在IntelliJ IDEA中创建Maven多模块项目
    在IntelliJ IDEA中创建Web项目
    【Python】如何安装easy_install?
    RabbitMQ从入门到精通
    Erlang语言入门
    Eclipse背景颜色改动
    导出Excel1
    计算机概述
  • 原文地址:https://www.cnblogs.com/haoyp/p/7060653.html
Copyright © 2011-2022 走看看