HTML5超详细知识点笔记5---图像使用知识点总结

最新推荐文章于 2025-11-24 20:52:15 发布

原创最新推荐文章于 2025-11-24 20:52:15 发布 · 513 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #笔记 #前端

HTML从入门到精通专栏收录该内容

5 篇文章

订阅专栏

图像使用知识点总结

文章目录

图像使用知识点总结

1. 图像基础

常用图像格式及特点：

**GIF 格式：**采用 LZW 压缩（通过压缩相同颜色色块减小图像大小，无品质损失，压缩效率高），支持跨平台使用，仅能处理 256 色，适用于商标、新闻式标题等需求小于 256 色的图像场景。
**JPEG 格式：**适用于照片等全彩图像（支持超过 256 色），压缩过程会损失部分视觉不易觉察的图像数据；合理剔除数据可在保证视觉可接受的同时提高压缩效率、减小文件大小，剔除过多则会导致图像过度失真。
**PNG 格式：**非破坏性网页图像格式，压缩时无图像失真；具备 GIF 的大部分优点，还支持 48-bit 色彩、更快的交错显示、跨平台图像亮度控制、更多层透明度设置。

2. 图像标签 `<img>`

基本语法：<img src="图像文件的路径">

图像属性:

图像高度、宽度和边框
- 语法：
```
<img src="图像文件的地址" height="图像的高度" width="图像的宽度" border="图像边框宽度">
```
- **说明：**属性值单位均为像素；默认情况下，单独改变宽度或高度，图像会按等比例调整；border 属性用于为图像添加边框。
图像水平间距和垂直间距
- 语法：
```
<img src="图像文件的地址" hspace="水平间距" vspace="垂直间距">
```
- **说明：**属性值单位为像素，通过调整间距可使文字与图像显示更协调。

图像相对于文字基准线的对齐方式

语法：

<img src="图像文件的地址" align="相对文字的对齐方式">

align属性值:

top	图像顶部与同行最高部分（文本顶部或其他图像顶部）对齐
middle	图像中部与同行中部（通常是文本行基线，非实际行中部）对齐
bottom	图像底部与同行文本底部对齐
texttop	图像顶部与同行最高文本的基线对齐
absmiddle	图像中部与同行最大项的中部对齐
baseline	图像底部与文本基线对齐
absbottom	图像底部与同行最低项对齐
left	图像与左边界对齐，文本环绕图像
right	图像与右边界对齐，文本环绕图像

4.图像的提示文字和替换文字

语法：

<img src="图像文件的地址" title="提示文字" alt="替换文字">

说明：
- 提示文字在鼠标置于图像上时显示，用于说明或描述图像；
- 替换文字在图像无法显示时显示；提示文字和替换文字均可为中文或英文。

3. 图像超链接

设置图像的超链接
- 语法：
```
<a href="链接地址" target="目标窗口的打开方式"><img src="图像文件的地址"></a>
```
- target属性值：
  - _blank：新窗口打开
  - _self：当前窗口打开（默认）
  - _parent：父框架打开
  - _top：整个窗口打开
设置图像热区链接
- **概念：**将图像划分成不同区域（热区），为每个热区单独设置超链接，包含热区的图像称为映射图像。
- 语法：
```
<img src="图像地址" usemap="#映射图像名称">
<map name="映射图像名称"><area shape="热区形状" coords="热区坐标" href="链接地址" /></map>
```
- 实现步骤：
  1. 使用<img>标签的 usemap 属性关联映射图像，映射图像名称前需加 #
  2. 通过<map>标签和<area>标签定义映射图像及热区，<map>标签的 name 属性需与 usemap 属性中的映射图像名称一致
- <area>标签属性：
  - **shape：**定义热区形状，取值有 rect（矩形区域）、circle（圆形区域）、poly（多边形区域）。
  - **coords：**设置热区坐标，不同形状取值不同
    - **rect：**取值为 left、top、right、bottom（矩形两个对角的点坐标）
    - **circle：**取值为 center - x、center - y、radius（圆形的圆心坐标与半径）
    - **poly：**按顺序（逆时针或顺时针）取多边形各个点的 x、y 坐标值
  - **href：**设置热区的链接地址。