图像标记img的alt属性

最新推荐文章于 2024-10-11 20:59:50 发布

已转行@

最新推荐文章于 2024-10-11 20:59:50 发布

阅读量6k

点赞数 12

分类专栏：从零学习HTML5 文章标签： html html5

原文链接：https://www.ptpress.com.cn

版权

从零学习HTML5 专栏收录该内容

57 篇文章 13 订阅

订阅专栏

想要在网页中显示图像就需要使用图像标记，接下来我将详细介绍图像标记及和它相关的属性。

这次和以往不大一样，先上代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图像标记img的alt属性</title>
</head>
<body>
<img src="logo.jpg" alt="传智播客-专业的Java培训，.NET培训，PHP培训，网页培训，平面培训，iOS培训机构 "/>
</body>
</html>

首先先把logo.jpg的图像放在当前HTML网页文件所在的文件夹中，

正常显示如下：

1-12

如果图像链接错误（或者其他原因），则会显示文字如下：

1-12-2

什么原因呢？

恭喜你猜对了！alt属性主要用于使看不到图像的用户了解图像内容，指定图像不能显示时的代替文本。

重点：

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