<img>图像标记
使用方法
<img src=”路径/文件名.图片格式” width=”属性值” height=”属性值” border=”属性值” alt=”属性值”>
注意
- <img>为但标记,不需要使用</img>闭合
- 在加载图像文件的时候,文件的路径或者文件名格式错误,将无法加载文件。
<img>标记的属性
src属性
指定我们要加载图片的路径和图片的名称以及图片的格式。
代码1:图片位置与.html文件在一个文件夹下
<body>
<img src="airetv_camera.png">
</body>
代码2:图片位置在.html文件夹中src文件夹中
<body>
<img src="src/airetv_camera.png">
</body>
代码3:图片位置在.html文件夹的上一级中
<body>
<img src="../airetv_camera.png">
</body>
显示结果:
width属性
指定图片的宽度 单位px,em,cm,mm
height属性
指定图片的高度 单位px, em,cm,mm
代码:以px为单位
<body>
<img src="../airetv_camera.png" >
<img src="../airetv_camera.png" width="10px" height="10px">
<img src="../airetv_camera.png" width="100px" height="100px">
</body>
显示结果:
代码:可以用百分比
<body>
<img src="../airetv_camera.png" width="50%" height="50%">
</body>
显示结果
百分比为占有父布局的百分比
border属性
指定图标的边框昆都,单位px,em,cm,mm
代码:
<body>
<img src="../airetv_camera.png" width="10%" height="10%" border="4px">
</body>
显示结果
alt属性
当王爷上的图片架子完成后,鼠标移动上面去,会显示这个图片的属性。
浏览器版本原因,无法演示。
如果图形没有下载或者加载失败,会用文字来代替图像显示
代码:
<body>
<img alt="cmera" src="./airetv_camera.png" width="10%" height="10%" border="4px">
</body>
显示结果: