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>

原文地址:https://www.cnblogs.com/haoyp/p/7060653.html