HTMl-img.jpg

图像的基本格式

网页中通常使用的图像格式有JPEG、PNG、GIF和WEBP。

色彩丰富选JPEG

需要输出透明度选PNG

需要动态图片选GIF

插入图像

插入图像标记img

img元素的属性定义:

属性描述
src图像的源文件
alt提示文字
width,height宽度和高度
border边框
vspace垂直间距
hspace水平间距
alighn排列
dynsrc设定AVI文件的播放
loop设定AVI文件的循环播放次数
loopdelay设定AVI文件的播放延迟
start设定AVI文件的播放方式
lowsrc设定低分辨率图片
usemap映像地图

图像源文件src

基本语法:<img src="图像文件的地址">

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="utf-8"> 
        <title>HTML图像的源文件src</title> 
    </head> 
    <body>
        <img src="https://joooqi.cn/usr/uploads/2021/05/1841202309.jpg">
    </body>
</html>

html-imgsrc.jpg

图像的提示文字和宽高

<img src="https://joooqi.cn/usr/uploads/2021/05/1841202309.jpg" alt="花" width="1280" height="auto">

设置alt属性可以当图像文件损坏或丢失时输出为文字。

img-alt.png

当然无论你的图像宽高设置的再小,图像文件也会被全部加载,不会提高加载速度。

图像超链接

基本语法:<a href="链接地址"><img src="图像文件的地址"></a>

通过标签的嵌套实现图像超链接的功能,点击图片后可以跳转到相应的网址。

图像热区链接

需要配合Dreamweaver使用,仅提供语法:

<img src="图片地址" usemap="映射图像名称(Map)">
在需要定义的热区图像以及热区属性如下:
<map name="映射图像名称(Map)">
    <area shape="热区形状(circle)" coords="热区坐标(由软件框选生成)" href="链接地址">