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>