HTML 图像

图像在HTML中显示，是使用<img>标签，<img>无闭标签，可包含属性。

案例

<img src="/Template/Test/img/icon.ico" >

插入图像

注意图像的文件大小页面会影响页面完成加载的时间，如果图像过大或者过多会造成页面的打开速度。

src属性

src属性是图像必要属性，表示图像URL地址。

<img src="图像url" />

Alt属性

替换文本属性，在图像无法正常加载时显示。

<img src="xxx.jpg" alt="替换字符">

图像的高度与宽度

img的width和height属性定义图像的高度和宽度。加高度和宽度的好处是在页面加载时会为图像预留位置，不会破坏html布局。

<img src="/Template/Test/img/icon.ico" width="16" height="16">

值为16： 值为32：值为42：

图像边框

img标签用border属性来定义边框大小，默认为0代表无边框。

<img src="/Template/Test/img/icon.ico" border="1">

无边框: 边框为1：边框为2：

图像对齐

图像周围元素(文本文字等)的对齐方式，可通过align属性来改变。middle（居中）、right（右对齐）、left（左对齐）

<img src="/Template/Test/img/icon.ico" align="right">

更多案例

图像背景

向 HTML页面添加背景图片。

背景图像

图像连接

通过点击图像跳转到指定页面。

<a href="/index.html" target="_blank">
    <img src="/Template/Test/img/logo.png" />
</a>

效果如下:

图像映射

可供点击区域的图像地图。其中的每个区域都是一个超级链接。

图像地图