HTML之4.4 图像标记

最新推荐文章于 2024-09-22 01:16:28 发布

爱吃冰粉

最新推荐文章于 2024-09-22 01:16:28 发布

阅读量1k

点赞数 1

分类专栏：前端文章标签： html 图像处理前端

本文链接：https://blog.csdn.net/m0_52148779/article/details/128460914

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

4.4 图像标记

4.4.1 图像格式（3种）

（1）GIF格式

定义：支持动画，无损、支持透明（全透或不透）

特点：只能处理256种颜色

用途：用于Logo，小图标……

（2）PNG格式

定义：包括PNG-8和真色彩（PNG-24）和（PNG-32）

特点：体积小、支持alpha透明（全透、半透、不透）、颜色过渡平滑

注意：IE6支持PNG-8，处理PNG-24的透明时会显示灰色，半透明图片只能使用PNG-24

（3）JPG格式

定义：能显示的颜色多、保存超过256种颜色的图像

特点：有损（数据丢失）

应用：为照片设计的文件格式

4.4.2 图像标记

格式：<img />

<img src = "图像URL"/>

src:图像文件的路径和文件名（必须属性）

其他属性：

属性	属性值	描述
src	URL	路径
alt	文本	图像不能显示替换的文本
title	文本	鼠标悬浮显示的内容
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	数字	设置图像边框的宽度
vspace	像素	设置图像顶部和底部的空白（垂直边距）
hspace	像素	设置图像左侧和右侧的空白（水平边距）
	left	图像对齐到左边
	right	图像对齐到右边
	top	图像顶端和文本的第一行文字对齐，其他文字居图像下方
align	middle	图像水平中线和文本的第一行文字对齐，其他文字居图像下方
	bottom	图像的底部和文本的第一行文字对齐，其他文字居图像下方

1.图像的替换文本属性alt

由于一些原因图像无法显示，因此使用替换文本

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图像标记img的alt属性</title>
	</head>
	<body>
		<img src="1.png" alt="这是一张替换的图片"/>
	</body>
</html>

正常显示

不正常显示

在这里插入图片描述

2.使用title属性设置提示文字

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图像标记img的title属性</title>
	</head>
	<body>
		<img src="1.png" alt="这是一张替换的图片" title="鼠标悬停"/>
	</body>
</html>

用于设置鼠标悬停时图像提示的文字
在这里插入图片描述

3.图像的宽度、高度属性（width，height）

通常情况下，如果不设置高度宽度，图像按照原尺寸显示，通过这两个属性可以设置图片大小，

我们只需要设置其中一个，另一个会等比例放大和缩小

如果设置两个属性，比例与原图不一致，则会导致图片失真

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图像标记img的title属性</title>
	</head>
	<body>
		<img src="1.png" width="100px"/>
	</body>
</html>

在这里插入图片描述

设置两个属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图像标记img的title属性</title>
	</head>
	<body>
		<img src="1.png" width="100px" height="200px"/>
	</body>
</html>

在这里插入图片描述

4.图像的边框属性border

默认情况下，图像没有边框，border可以设置边框和宽度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<img src="1.png" border="8"/>
	</body>
</html>

在这里插入图片描述

5.图像的边距属性vspace（垂直）和hspace（水平）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<img src="1.png" vspace="20" hspace="30" />
	</body>
</html>

在这里插入图片描述

6.图像的对齐属性align

eg：文字居右

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<img src="1.png" vspace="20" hspace="30" align="left" />
		文字居右的效果
	</body>
</html>

在这里插入图片描述

注意：文字居右使用left，文字居左使用right 是相反的

4.4.3 绝对路径和相对路径

绝对路径：真正的路径，刨根究底

相对路径：相对于当前文件的路径，不带有盘符

相对路径的设置：

图像文件和html文件在同一文件夹，只需要输入图像文件的名称即可
图像文件位于html文件在下一级文件夹：输入文件名和文件夹名，用/隔开
图像文件位于html文件在上一级文件夹：在文件名之前加入“…/"

如果是上两级：../../,以此类推

4.5 超链接标记

4.5.1 创建超链接

格式：<a href = "跳转目标" target = "目标窗口弹出的方式">文本或图像</a>

<a>用于定义超链接

href：用于指定链接目标的URL地址

target：用于指定链接页面打开方式

_self：默认值，原窗口打开
_blank:新窗口打开

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<a href="http://www.baidu.com" target="_blank">百度超链接</a>
		
		
	</body>
</html>

在这里插入图片描述

页面左下方会显示链接页面的地址

注意:

暂时没有决定链接地址，可以定义 href=# 表示该链接暂时为一个空链接
图像、音频中也可以设置超链接
链接图像在低版本的IE浏览器中会带边框效果，去掉边框只需要将边框定义为0即可

4.5.2 锚点链接

锚点链接，快速定位内容

创建锚点：

使用 <a href="#id名"链接文本</a>创建链接文本
使用相应的id进行跳转

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ul>
			<li><a href="#one">百度网址</a></li>
			<li><a href="#two">蓝桥杯</a></li>
		</ul>
		
		<h3 id="one">百度网址</h3>
		<p>
			http:/www.baidu.com
		</p>
		<br />
		<h3 id="two">蓝桥杯官网</h3>
		<p>lanqiao.cn</p>
		<br />
	</body>
</html>