文章目录

图像

常见图像格式

JPG格式
GIF格式
BMP格式
PNG格式

图像标签的基本语法

超链接

超链接的基本用法
超链接的应用场合

页面间链接
锚链接
功能性链接

图像

常见图像格式

在日常生活中，使用比较多的图像格式有4中，即JPG格式、GIF格式、BMP格式、PNG格式。

JPG格式

JPG（JPEG）是在Internet上被广泛支持的图像格式，它是联合图像专家组（Joint Photographic Experts Group）的英文缩写。JPG格式采用的是有损压缩，会造成图像画面的失真，不过压缩之后的体积很小，而且比较清晰，所有比较适合在网页中使用。此格式最适合用于摄影或连续色调图像的高级格式，这是因为JPG文件可以包含数百万种颜色。随着JPG格式文件品质的提高，文件的大小和下载时间也会随之增加。通常可以通过压缩JPG格式文件在图像品质和文件大小之间达到良好的平衡。

GIF格式

GIF是网页中使用最广泛、最普遍的一种图像格式,它是图像交换格式(Graphics Interchange Format)的英文缩写。GIF格式文件支持透明色,使得GIF格式图像在网页的背景和一些多层特效的显示上用得非常多,还支持动画,这是它最突出的一个特点,因此GIF格式图像在网页中应用非常广泛。

BMP格式

BMP格式图像在Windows操作系统中使用得比较多,它是位图(Bitmap)的英文缩写。BMP格式图像文件与其他Microsoft Windows程序兼容,但它不支持文件压缩,也不适用于Web页面。

PNG格式

PNG格式是20世纪90年代中期开始开发的图像文件存储格式，它兼有GIF格式和JPG格式的优势，同时具备GIF格式不具备的特性。流式网络图形格式（Portable Network Graphic Format，PNG）名称来源于非官方的“PNG is not GIF”，是一种新兴的Web图像格式。

图像标签的基本语法

<img src="图片地址" alt="图像的替代文字" title="鼠标悬停提示文字" width="图片宽度" height="图片高度" />

src:设置图片的路径
- 绝对路径：磁盘路径或互联网路径
- 相对路径：同一级：直接调用；上一级：…/；下一级:img/a.jpg
width和height:设置图片的宽和高, 一般要么都不写，显示的是图片的真实大小，要么只是宽或者高，让图片等比例缩放，避免失真。
border : 设置图像的边框，以像素为单位。
alt:指定替代的文本，表示图像无法显示时（如图片路径错误或网速太慢等）用来替代显示的文本。这样，即使图像无法显示时，用户也可以看到网页丢失的信息内容。
title：提供额外的提示和帮助信息，当鼠标移至图片上时显示提示信息。

超链接

超链接的基本用法

超链接包含两部分内容，一是链接地址，即链接的目标，可以是某个网址或文件的路径，对应为<a>标签的href属性；二是链接文本或图像，单击该文本或图像，将跳转到href属性指定的连接地址。

<a href="链接地址" target="目标窗口位置">链接文本或图像</a>

href表示链接地址的路径

target:设置链接在哪个窗口打开，默认是在当前页打开。_blank:在一个新窗口打开，_self 在当前页打开。_top：最顶层框架；_parent：父框架_search：在浏览器的搜索区装载文档。

当超链接不需要到任何的地址，在href里面加#, <a href="#">这是一个超链接</a>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>超链接</title>
	</head>
	<body>
		<!--图像超链接-->
		<a href="https://www.baidu.com" target="_blank">
			<img src="https://www.baidu.com/img/baidu_jgylogo3.gif" alt="百度"/>
		</a><br />
		<!--文本超链接-->
		<a href="https://www.baidu.com">百度一下</a>
	</body>
</html>

base可以设置整体链接的打开状态。写在head标签里。

<head>
	<meta charset="UTF-8">
	<title>超链接</title>
	<base target="_blank">
</head>

超链接的应用场合

页面间链接

就是从一个页面链接跳转到另外一个页面。如A页到B页，最常用，用于网站导航。

锚链接

常用于目标页面内容很多，需定位到目标页面中的某个位置。如A页甲位置到A页乙位置，或者A页甲位置到B页乙位置。

如<a name="top" >顶部</a>

<a href="#top">回到顶部</a>

在页面的乙位置设置标记<a name="marker">目标位置乙</a>

设置甲位置的连接路径href属性值为“#标记名”，<a href="#marker">当前位置甲</a>

页面间的锚链接href属性值为“页面#标记名”，<a href="login.html#marker">当前位置甲</a>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>锚链接</title>
	</head>
	<body>
		<a href="#marker">当前位置甲</a>
		<p>《水浒传》是元末明初施耐庵（现存刊本署名大多有施耐庵、罗贯中两人中的一人，或两人皆有）编著的章回体长篇小说。</p><br /><br />
<p>全书通过描写梁山好汉反抗欺压、水泊梁山壮大和受宋朝招安，以及受招安后为宋朝征战，最终消亡的宏大故事，艺术地反映了中国历史上宋江起义从发生、
发展直至失败的全过程，
深刻揭示了起义的社会根源，满腔热情地歌颂了起义英雄的反抗斗争和他们的社会理想，
也具体揭示了起义失败的内在历史原因。</p><br /><br />
<p>《水浒传》是中国古典四大名著之一，问世后，在社会上产生了巨大的影响，成了后世中国小说创作的典范。</p><br /><br />
<p>《水浒传》是中国历史上最早用白话文写成的章回小说之一，流传极广，脍炙人口；</p><br /><br />
<p>同时也是汉语文学中具备史诗特征的作品之一，对中国乃至东亚的叙事文学都有极其深远的影响。</p><br /><br />
		<p>《水浒传》是元末明初施耐庵（现存刊本署名大多有施耐庵、罗贯中两人中的一人，或两人皆有）编著的章回体长篇小说。</p><br /><br />
<p>全书通过描写梁山好汉反抗欺压、水泊梁山壮大和受宋朝招安，以及受招安后为宋朝征战，最终消亡的宏大故事，艺术地反映了中国历史上宋江起义从发生、
发展直至失败的全过程，
深刻揭示了起义的社会根源，满腔热情地歌颂了起义英雄的反抗斗争和他们的社会理想，
也具体揭示了起义失败的内在历史原因。</p><br /><br />
<p>《水浒传》是中国古典四大名著之一，问世后，在社会上产生了巨大的影响，成了后世中国小说创作的典范。</p><br /><br />
<p>《水浒传》是中国历史上最早用白话文写成的章回小说之一，流传极广，脍炙人口；</p><br /><br />
<p>同时也是汉语文学中具备史诗特征的作品之一，对中国乃至东亚的叙事文学都有极其深远的影响。</p><br /><br />
		
		<a name="marker">目标位置乙</a>
		
		<p>《水浒传》是元末明初施耐庵（现存刊本署名大多有施耐庵、罗贯中两人中的一人，或两人皆有）编著的章回体长篇小说。</p><br /><br />
<p>全书通过描写梁山好汉反抗欺压、水泊梁山壮大和受宋朝招安，以及受招安后为宋朝征战，最终消亡的宏大故事，艺术地反映了中国历史上宋江起义从发生、
发展直至失败的全过程，
深刻揭示了起义的社会根源，满腔热情地歌颂了起义英雄的反抗斗争和他们的社会理想，
也具体揭示了起义失败的内在历史原因。</p><br /><br />
<p>《水浒传》是中国古典四大名著之一，问世后，在社会上产生了巨大的影响，成了后世中国小说创作的典范。</p><br /><br />
<p>《水浒传》是中国历史上最早用白话文写成的章回小说之一，流传极广，脍炙人口；</p><br /><br />
<p>同时也是汉语文学中具备史诗特征的作品之一，对中国乃至东亚的叙事文学都有极其深远的影响。</p><br /><br />
<p>《水浒传》是元末明初施耐庵（现存刊本署名大多有施耐庵、罗贯中两人中的一人，或两人皆有）编著的章回体长篇小说。</p><br /><br />
<p>全书通过描写梁山好汉反抗欺压、水泊梁山壮大和受宋朝招安，以及受招安后为宋朝征战，最终消亡的宏大故事，艺术地反映了中国历史上宋江起义从发生、
发展直至失败的全过程，
深刻揭示了起义的社会根源，满腔热情地歌颂了起义英雄的反抗斗争和他们的社会理想，
也具体揭示了起义失败的内在历史原因。</p><br /><br />
<p>《水浒传》是中国古典四大名著之一，问世后，在社会上产生了巨大的影响，成了后世中国小说创作的典范。</p><br /><br />
<p>《水浒传》是中国历史上最早用白话文写成的章回小说之一，流传极广，脍炙人口；</p><br /><br />
<p>同时也是汉语文学中具备史诗特征的作品之一，对中国乃至东亚的叙事文学都有极其深远的影响。</p><br /><br />
	</body>
</html>

功能性链接

在页面中调用其他程序功能，如电子邮件等。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>功能链接</title>
	</head>
	<body>
		<!--添加到压缩文件（下载压缩包）-->
		<a href="img/dog.zip">添加到压缩文件</a><br />
		<!--邮箱-->
		<a href="mailto:admin@baidu.com">联系百度邮箱</a><br />
		<!--跳转到图片-->
		<a href="https://www.baidu.com/img/baidu_jgylogo3.gif">百度</a><br />
		<!--点击下载-->
		<a href="https://www.baidu.com/img/baidu_jgylogo3.gif" download="baidulogo.gif">点击下载</a><br />
	</body>
</html>

来源：CSDN

作者：coy_done

链接：https://blog.csdn.net/coy_done/article/details/104301164

标签

gif动画

jpg

png

HTML2——图像、超链接