HTML教程 HTML教程HTML是什么HTML 代码编辑器HTML 基础标签HTML 元素HTML 属性HTML 标题HTML 段落HTML 文本格式化HTML CSSHTML 头部HTML链接HTML 图像HTML 区块和行内元素HTML 表格HTML 列表HTML 引用和定义元素HTML 计算机代码元素HTML 布局HTML 框架HTML 脚本/JavaScriptHTML 文件路径HTML 颜色HTML 字符(编码)和实体HTML URL(网址)HTML XHTMLHTML - Web服务器HTML表单 HTML 表单HTML 表单属性HTML 表单元素HTML 表单input类型HTML 表单input属性

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>

效果如下:

图像映射

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

图像地图

HTML图像标签
标签描述
<img>定义图像
<map>定义图像地图
<area>定义图像地图中的可点击区域