2021-01-31

HTML的图像标记

1、常用图像格式
（1）GIF格式
GIF最突出的地方就是它支持动画，同时GIF也是一种无损的图像格式，也就是说修改图片之后，图片质量几乎没有损失。再加上GIF支持透明（全透明或全不透明），因此很适合在互联网上使用。但GIF只能处理256种颜色。在网页制作中，GIF格式常常用于Logo、小图标及其他色彩相对单一的图像。
（2）PNG格式
PNG包括PNG-8和真色彩PNG（PNG-24和PNG-32）。相对于GIF，PNG最大的优势是体积更小，支持alpha透明（全透明，半透明，全不透明），并且颜色过渡更平滑，但PNG不支持动画。同时需要注意的是IE6是可以支持PNG-8的，但在处理PNG-24的透明时会显示为灰色。通常，图片保存为PNG-8会在同等质量下获得比GIF更小的体积，而半透明的图片只能使用PNG-24。
（3）JPG格式
JPG所能显示的颜色比GIF和PNG要多的多，可以用来保存超过256种颜色的图像，但是JPG是一种有损压缩的图像格式，这就意味着每修改一次图片都会造成一些图像数据的丢失。JPG是特别为照片图像设计的文件格式，网页制作过程中类似于照片的图像比如横幅广告（banner）、商品图片、较大的插图等都可以保存为JPG格式。
2、图像标记
HTML网页中任何元素的实现都要依靠HTML标记，要想在网页中显示图像就需要使用图像标记，接下来将详细介绍图像标记以及和它相关的属性。其基本语法格式如下：

<img src="图像URL" />

该语法中src属性用于指定图像文件的路径和文件名，它是img标记的必需属性。
2、图像标记—属性
|
（1）图像的替换文本属性alt
由于一些原因图像可能无法正常显示，比如网速太慢，浏览器版本过低等。因此为页面上的图像加上替换文本是个很好的习惯，在图像无法显示时告诉用户该图片的内容。这就需要使用图像的alt属性，接下来通过一个案例来演示alt属性的用法。
注意：
各浏览器对alt属性的解析不同，使用不同浏览器，显示效果可能存在一定的差异。
多学一招：使用title属性设置提示文字
图像标记<img/ >有一个和alt属性十分类似的属性title，title属性用于设置鼠标悬停时图像的提示文字，下面来演示title属性的使用。
3、相对路径与绝对路径
（1）绝对路径
绝对路径一般是指带有盘符的路径。
例如“D:\HTML5+CSS3\images\logo.gif”，或完整的网络地址，例如“http://www.itcast.cn/images/logo.gif”。
网页中不推荐使用绝对路径，因为网页制作完成之后我们需要将所有的文件上传到服务器，这时图像文件可能在服务器的C盘，也有可能在D盘、E盘，可能在aa文件夹中，也有可能在bb文件夹中。也就是说，很有可能不存在“D:\HTML5+CSS3\images\logo.gif”这样一个路径。
（2）相对路径
相对路径不带有盘符，通常是以HTML网页文件为起点，通过层级关系描述目标图像的位置。
例如：

<img src="images/logo.gif" alt="传智播客-专业的java培训,.net培训,php培训,网页培训,平面培训,iOS培训机构" />

相对路径的设置分为以下3种：
图像文件和html文件位于同一文件夹：只需输入图像文件的名称即可，如mg src=“logo.gif” /。
图像文件位于html文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如img src=“img/img01/logo.gif” /。
图像文件位于html文件的上一级文件夹：在文件名之前加入“…/” ，如果是上两级，则需要使用 “…/ …/”，以此类推，如img src="…/logo.gif" /。