ページレイアウトでは必ず写真が使われますが、写真と言えばimgタグのalt属性とtitle属性がどのような場面で使われるかご存知ですか?この記事では、img タグ の alt 属性と title 属性の違いについて説明します。興味のある方は以下を読み続けてください。
alt 属性と title 属性の類似点と相違点
類似点: どちらも、画像に関連するコンテンツを表示するための小さなフローティング レイヤーを持ちます。
違いは以下のとおりです。
alt 属性の特徴:
① 画像が正常に読み込まれず表示できない場合、画像が表示されていない部分にテキストが表示されます。この機能は、アンロードされた画像の情報を提供することで、ユーザーが Web ページを閲覧しやすくするとともに、開発者が Web ページを保守しやすくすることを目的としています。
② 検索エンジンは、この属性のテキスト記述を通じて画像を取得できます。
title 属性の特徴:
title 属性は、ユーザーが任意の要素で使用できます。マウスを要素に移動すると、タイトルの内容が表示されます。これは、画像の説明として機能します。平たく言えば、alt 属性の本質は画像を置き換えることです。コンテンツ、タイトル属性の本質は画像の説明またはコメントです。
デモの例alt 属性の効果は次のとおりです:
<img src="/static/imghw/default1.png" data-src="img/frui.jpg" class="lazy" alt="图片未显示出来时,提醒你这是一张图片"/>
タグのalt属性とtitle属性の違いを図で詳しく説明"/>画像が正常に表示されない場合は図のようになり、altで設定した内容のみが表示されます。
title 属性の効果は次のとおりです:
<img src="/static/imghw/default1.png" data-src="img/fruit.jpg" class="lazy" title="介绍这张图片是创意水果图片"/ alt="<img>タグのalt属性とtitle属性の違いを図で詳しく説明" >
レンダリング:
#画像に示すように、この画像は正常に表示されます。マウスを画像の上に置くと、画像を説明するタイトルの内容が表示されます。 タグのalt属性とtitle属性の違いを図で詳しく説明"/>
以上がタグのalt属性とtitle属性の違いを図で詳しく説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。