HTML 中的 Alt 标签

PHPz
发布: 2024-09-04 16:33:17
原创
931 人浏览过

HTML img 标签包含 alt 属性。该属性指定有关图像的信息,如图像名称、图像链接、图像作者、图像规范等。该属性的主要目的是当互联网连接速度较慢时,图像可能无法加载,但可以正常加载。因此,如果用户将光标从页面上移开,它会显示一些有关图像的文本,而不是用户从它们那里返回;因此,他可以理解该页面上有一些内容,并等待一段时间直到页面加载。

实时场景:当我们在网络上显示任何图像时,在不知道图像内容的情况下对最终用户来说是不公平的。所以我们必须使用 alt 属性为图像指定一些内容。

Alt 属性在 HTML 中如何工作?

Alt 属性为图像提供替代信息以识别图像的含义。该属性仅允许文本。此属性在标签中可用:

这 3 个标签 alt 属性仅用于在图像顶部显示文本。

语法 #1 – HTML 中的 Alt 标签;标签

<img src="image%20resource" alt="HTML 中的 Alt 标签">
登录后复制

语法 #2 – 标签

<img src="image%20resource" alt="HTML 中的 Alt 标签" usemap="#name">
//usemap name and map name attribute name must be same
<map name="name">
<area coords="specify 4 coordinates" href="file.htm" alt="HTML 中的 Alt 标签">
</map>
<input> tag
登录后复制

语法 #3 – ;标签

<input type="image" src="image%20resource" alt="HTML 中的 Alt 标签">
登录后复制

在 HTML 中实现 Alt 标签的示例

以下是提到的示例:

示例#1

代码:



<meta charset="ISO-8859-1">
<title>Alt Attribute</title>
<style type="HTML 中的 Alt 标签/css">
h1 {
color: blue;
HTML 中的 Alt 标签-align: center;
}
p {
color: fuchsia;
font-size: 20px;
border: 2px solid red;
}
/*Aligning images side by side*/
* {
box-sizing: border-box;
}
.column {
width: 33.33%;
padding: 5px;
float: left;
}
.row::after {
clear: both;
display: table;
content: "";
}
</style>


<h1>Alt Attribute Introduction</h1>
<p>HTML img tag contains alt attribute. This attributes specifies
the information about the image like image name, image link, image
author, image specification etc. The main purpose of this attribute is
when the internet connection is slow the image may not load but is
loaded without any problem. So instead of user go back from the if
user moved his cursor from the page it will display some HTML 中的 Alt 标签
regarding image therefore he can understand that there is some content
in this page and wait for some time until page is loaded.</p>
<h1>Images with img tag and alt attribute</h1>
<div class="row">
<div class="column">
<img src="3.jpg" alt="First Bird"   style="max-width:90%">
</div>
<div class="column">
<img src="4.jpg" alt="Second Bird"   style="max-width:90%">
</div>
<div class="column">
<img src="5.jpg" alt="Third Bird"   style="max-width:90%">
</div>
</div>

登录后复制

输出:

如果图片资源可用:

HTML 中的 Alt 标签

如果图片资源不可用:

HTML 中的 Alt 标签

示例#2

代码:



<meta charset="ISO-8859-1">
<title>Alt Attribute</title>
<style type="HTML 中的 Alt 标签/css">
h1 {
color: green;
HTML 中的 Alt 标签-align: center;
}
p {
color: navy;
font-size: 20px;
border: 2px solid orange;
}
</style>


<h1>Alt Attribute Introduction</h1>
<p>HTML img tag contains alt attribute. This attributes specifies
the information about the image like image name, image link, image
author, image specification etc. The main purpose of this attribute is
when the internet connection is slow the image may not load but is
loaded without any problem. So instead of user go back from the if
user moved his cursor from the page it will display some HTML 中的 Alt 标签
regarding image therefore he can understand that there is some content
in this page and wait for some time until page is loaded.</p>
<h1>Images with area tag and alt attribute</h1>
<img src="d2.jpg"    style="max-width:90%"  style="max-width:90%" alt="HTML 中的 Alt 标签" usemap="#dog">
<map name="dog">
<area shape="rect" coords="0,0,81,125" href="https://www.educba.com/category/software-development/software-development-tutorials/python-tutorial/" alt="Python">
<area shape="circle" coords="91,59,4" href="https://www.educba.com/category/software-development/software-development-tutorials/java-tutorial/" alt="Java">
<area shape="circle" coords="125,59,9" href="https://www.educba.com/category/software-development/software-development-tutorials/bootstrap-tutorial/" alt="Bootstrap">
</map>

登录后复制

输出:

如果图片资源可用:

HTML 中的 Alt 标签

HTML 中的 Alt 标签

如果图片资源不可用:

HTML 中的 Alt 标签

HTML 中的 Alt 标签

示例 #3

代码:



<meta charset="ISO-8859-1">
<title>Alt Attribute</title>
<style type="HTML 中的 Alt 标签/css">
h1 {
color: green;
HTML 中的 Alt 标签-align: center;
}
p {
color: navy;
font-size: 20px;
border: 2px solid orange;
}
label, input {
color: green;
font-size: 20px;
}
</style>


<h1>Alt Attribute Introduction</h1>
<p>HTML img tag contains alt attribute. This attributes specifies
the information about the image like image name, image link, image
author, image specification etc. The main purpose of this attribute is
when the internet connection is slow the image may not load but is
loaded without any problem. So instead of user go back from the if
user moved his cursor from the page it will display some HTML 中的 Alt 标签
regarding image therefore he can understand that there is some content
in this page and wait for some time until page is loaded.</p>
<h1>Images with input tag and alt attribute</h1>
登录后复制

输出:

如果图片资源可用:

HTML 中的 Alt 标签

如果图片资源不可用:

HTML 中的 Alt 标签

结论

Alt是area、img和input标签中可用的属性。此 alt 属性用于提供有关图像的信息,例如什么是图像或图像坐标、图像作者等。

以上是HTML 中的 Alt 标签的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!