1200字范文 > Web前端技术开发学习笔记(HTML标记语言篇)——第6章图片标记

Web前端技术开发学习笔记(HTML标记语言篇)——第6章图片标记

时间：2023-05-16 13:09:41

第6章图片标记

6.1 网页常见图片格式6.2 插入图片6.2.1 设置图片大小6.2.2 设置图片文本6.2.3 设置图片与周围对象的间距6.2.4设置图片的对齐方式6.2.5设置图片的边框

6.1 网页常见图片格式

目前，图片格式有GIF、JPEG、PNG、BMP、TIF等多种格式，在我们制作网页时，不同格式的图片的浏览速度是不一样的。

从浏览速度的角度来看，目前适合在网上浏览的图片格式主要有JPEG、GIF和PNG3种。

JPEG格式

JPEG(Joint Photographic Experts Group,联合图像专家组标准)，又称JPG，支持数百万种色彩主要用于显示照片等颜色丰富的精美图像。JPEG是质量有损耗的格式，这意味着在压缩时会丢失一些数据，因而降低了最终文件的质量，然而由于数据丢失得很少，因此在质量上不会差很多。

GIF格式

GIF (Graphics lnterchange Format，图形交换格式），是网页图像中很流行的格式。它最多使用256种色彩，最适合显示色调不连续或具有大面积单一颜色的图像。此外，GIF 还可以包含透

明区域和多帧动画，所以GIF常用于卡通、导航条、Iogo、带有透明区域的图形和动画等。

PNG格式

PNG（Portable Network Graphics，可移植网络图形）既融合了GIF格式透明显示的颜色，又具有JPEG处理精美图像的优势，是逐新流行的网络图像格式，但目前测览器对其支持并不一致。

6.2 插入图片

在网页中插入图片，需要使用< img>标记。

基本语法

<img src=“图片文件路径”>

语法说明

src属性指定需要插入的图片文件路径，这是一个必设属性。< img>标记除了src属性外，还有一些常用的属性。通过这些属性可以获得插入的图片的不同表现效果。

6.2.1 设置图片大小

使用< img>标记插入图片，默认情况下将插入原始大小的图片，如果想在插入时修改图片的大小，可以使用height和width属性来实现。

基本语法

在这里插入代码片

语法说明

宽度和高度可以是像素值也可以是百分数，如果是像素值，则直接写一个数值即可，而百分数是相对于浏览器窗口的一个比例。

eg.

<!doctype html><html><head><meta charset="utf-8"><title>设置图片大小</title></head><body><img src="C:\Users\ASUS\Desktop\大草莓王嘉尔\little ga.jpg" width="160" height="30%"><img src="C:\Users\ASUS\Desktop\大草莓王嘉尔\little ga.jpg"></body></html>

6.2.2 设置图片文本

有时为了对网页上的图片做某些方面的描述说明，或者是当网页图片无法下载时，能让用户了解图片内容，我们在制作网页时可以通过图片的alt属性对图片设置提示文本。当鼠标移至图片位置时，会自动弹出文本描述提示框。

基本语法

<img src="图片文件路径" alt="提示文本">

语法说明

提示文本中的内容可以包括空格、标点以及一些特殊的字符。

eg.

<!doctype html><html><head><meta charset="utf-8"><title>设置提示文本</title></head><body><img src="C:\Users\ASUS\Desktop\大草莓王嘉尔\little ga.jpg" width="160" alt="嘉宝童年照，宽度为160像素值"></body></html>

6.2.3 设置图片与周围对象的间距

基本语法

默认情况下，图片与周围对象的水平间距和垂直间距都为0，对这样的一个间距，很多时候都不符合我们的设计需要。使用图片的hspace和vspace属性可以分别设置图片与周围对象的间距。

<img src="图片文件路径" hspace="水平间距" vspace="垂直间距">

语法说明

可以根据需要只设置水平间距或是垂直间距，间距的单位是像素。

<!doctype html><html><head><meta charset="utf-8"><title>设置图片与周围对象的路径</title></head><body topmargin="0" leftmargin="0"><img src="C:\Users\ASUS\Desktop\大草莓王嘉尔\little ga.jpg" width="160" ><br/><img src="C:\Users\ASUS\Desktop\大草莓王嘉尔\little ga.jpg" width="160" vspace="2" height="5">You don't call me baby,You call me my name.But I keep on hoping,Nothing has changed.We keep on touching,But we don't.feel.Feels like you're letting,Your hands off the wheel.What if I just hold on for a while.Baby there's no d**g quite like denial.Ooh my If this is goodbye.Don't leave me loving you,Whatever you do.Don't leave me loving you</body></html>