HTML的图文混排/常见的HTML图像格式/图像标签与属性/学习笔记

一、常见的图像格式

• GIF:支持动画，支持透明，无损格式的图像格式，常由于logo小图标等色彩单一的图像
• PNG：（PNG8和真色彩PNG）支持透明或半透明图像，体积小，不支持动画
• JPG：色域广，损压缩图像，不支持动画和透明

二、图像标签(单标签)

使用图像标签<img>用以插入图片，写法<img src = "图像url（路径/地址）"/>

常见的img标签的属性：

属性名	属性值	描述
src	URL	图像的路径
alt	文本	图像不能现实时的替换文本
title	文本	鼠标悬停时显示的内容
width	像素值	图像的宽度
height	像素值	图像的高度
border	数 字	图像的边框宽度
vspace	像素值	图像顶部和底部的空白（垂直）
hspace	像素值	图像的左右两侧的空白（水平）
align	left/right/top/middle/bottom	图像对齐方/式左/右/图像和文本第一行文字对齐/图像的水平中线和文本第一行文字对齐/图像的地步和文本第一行文字对齐

注意：实际开发过程中，不建议图像标签直接使用border/vspace/hspace等属性，一般直接使用CSS样式进行替代、而装饰性的图像不建议直接插入<img/>标签，最好通过CSS设置背景图像来实现。

三、相对路径和绝对路径

• 绝对路径就是文件存放的地址，绝对路径：带有盘符的路径，如D:/User/camara/logo.png/或者完整的图像网络地址
• 相对路径不带有盘符，通常是HTML文件所在位置为起点：

1、图像文件和html文件位于同一文件夹，只需要输入图像文件的名称即可

2、图像文件位于html文件的下一级文件夹，需要输入文件夹名和文件名，用/隔开

3、图像文件位于html文件的上一级文件夹，则在文件名之前加入“…/”如果上两级则输入“…/…/"如<img src = "../logo.png"/>

四、特殊字符标签

特殊字符标签可以用于显示特殊的字符，如数学公式等等，一般使用&开头，如“空格，对应的代码为&nbsp；。

详细特殊字符对应的代码只需要在使用的时候对照HTML的特殊字符表查找对应的代码使用即可。

###欢迎加入QQ群一同交流学习937864538