HTMLのimgタグにはalt屬性が含まれています。この屬性は、畫像名、畫像リンク、畫像作成者、畫像仕様などの畫像に関する情報を指定します。この屬性の主な目的は、インターネット接続が遅い場合、畫像が読み込まれないことがありますが、問題なく読み込まれることです。したがって、ユーザーがページから戻る代わりに、ユーザーがページからカーソルを移動すると、畫像に関するテキストが表示されます。したがって、彼はこのページに何らかのコンテンツがあることを理解し、ページがロードされるまでしばらく待つことができます。

リアルタイム シナリオ: Web 上に畫像を表示している間、その畫像が何であるかを知らずにエンドユーザーにとって不公平です。したがって、alt 屬性を使用して畫像にコンテンツを指定する必要があります。

HTML では Alt 屬性はどのように機能しますか?

Alt 屬性は、畫像の意図を認識するための代替情報を畫像に提供します。この屬性ではテキストのみが許可されます。この屬性はタグで使用できます:

この 3 つのタグの alt 屬性は、畫像の上にテキストを表示するためだけに使用されます。

構(gòu)文 #1 – タグ

<img src="/static/imghw/default1.png" data-src="3.jpg" class="lazy" alt="text">

構(gòu)文 #2 – タグ

<img src="/static/imghw/default1.png" data-src="3.jpg" class="lazy" alt="text" usemap="#name">
//usemap name and map name attribute name must be same
<map name="name">
<area coords="specify 4 coordinates" href="file.htm" alt="text">
</map>
<input> tag

構(gòu)文 #3 – タグ

<input type="image" alt="text">

HTML での Alt タグの実裝例

以下に挙げる例を示します:

例 #1

コード:

<meta charset="ISO-8859-1">
<title>Alt Attribute</title>
<style type="text/css">
h1 {
color: blue;
text-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 text
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="/static/imghw/default1.png" data-src="3.jpg" class="lazy" alt="First Bird"   style="max-width:90%">
</div>
<div class="column">
<img src="/static/imghw/default1.png" data-src="4.jpg" class="lazy" alt="Second Bird"   style="max-width:90%">
</div>
<div class="column">
<img src="/static/imghw/default1.png" data-src="5.jpg" class="lazy" alt="Third Bird"   style="max-width:90%">
</div>
</div>

??o???:

????????a????????1????????¨??ˉè????a??′???:

????????a????????1????????¨??§?????a?????′???:

??? #2

??3??????:

<meta charset="ISO-8859-1">
<title>Alt Attribute</title>
<style type="text/css">
h1 {
color: green;
text-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 text
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="/static/imghw/default1.png" data-src="d2.jpg" class="lazy"    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>

??o???:

????????a????????1????????¨??ˉè????a??′???:

????????a????????1????????¨??§?????a?????′???:

??? #3

??3??????:

<meta charset="ISO-8859-1">
<title>Alt Attribute</title>
<style type="text/css">
h1 {
color: green;
text-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 text
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>

??o???:

????????a????????1????????¨??ˉè????a??′???:

????????a????????1????????¨??§?????a?????′???:

?μ?è??

Alt ??ˉ???area???img???input ?????°??§?????¨??§???????±???§??§???????????? alt ?±???§??ˉ??????????????????????o§?¨???????????????????è????a???????????????é?￠???????????±?????????????????????????????¨???????????????

以上がHTMLのAltタグの詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。