HTML/XHTMLにおけるimgイメージタグの基本的な使い方を詳しく解説

imageタグはWebページに画像を表示するために使用されます。

HTML/XHTML 画像
XHTML では、表示する画像を定義するために タグが使用されます。 はペアになっていないタグです。

基本構文:

<img  src="/static/imghw/default1.png"  data-src="url"  class="lazy"   / alt="HTML/XHTMLにおけるimgイメージタグの基本的な使い方を詳しく解説" >

タグは src 属性を通じて画像のソースを決定し、URL は相対または絶対画像アドレスです。

画像タグ属性:
src: 画像ソース、必須。表示される画像のソース アドレスを相対アドレスまたは絶対アドレスで指定します。
alt: 代替テキスト。省略可能。画像が表示できない場合やブラウザが画像をブロックした場合に表示されるテキストを置き換えるのに使用されます。
タイトル: 画像プロンプトテキスト。省略可能。マウスを画像の上に置くと、関連するテキストが表示されます。
width: 画像表示の幅、省略可能。単位はピクセルです。
height: 画像表示の高さ。省略可能。単位はピクセルです。

テキスト置換属性(alt)
画像タグaltのテキスト置換属性 必須属性ではありませんが、非常に重要な属性です。ブラウザが何らかの理由で画像の読み取りに失敗した場合、この代替テキストが表示されて、元の画像が置き換えられ、失われた関連画像情報が提供されます。この属性は、テキスト専用ブラウザを使用しているユーザーが Web ページのコンテンツを理解するのにも役立ちます。
そのため、各画像に意味のある代替テキスト置換属性を追加することをお勧めします。

タグの使い方の練習
e:html フォルダーの下に画像フォルダーを作成して、画像ファイルを保存します。下の画像を右クリックし、[名前を付けて画像を保存] を選択して、後で使用できるように画像を画像フォルダーに保存します。

小さな XHTML サンプル 1.html を編集し、id="main-content" を使用して p タグに次の変更を加えます:

<h3 id="文章题目">文章题目</h3>  
<p>文章具体内容</p>  
<p><img src="/static/imghw/default1.png"  data-src="images/flower_1.jpg"  class="lazy"   alt="花朵" /></p>

このようにして、Web ページに画像を表示します。

画像の表示サイズを指定します
幅または高さの属性を タグに追加して、画像の表示サイズを手動で指定できます:

<img src="/static/imghw/default1.png"  data-src="images/flower_1.jpg"  class="lazy"   alt="花朵"    style="max-width:90%"  style="max-width:90%" />

ヒント
一般に、画像サイズ属性は無視され、デフォルトでは、元の画像サイズが表示されるか、ブラウザに適応したサイズが表示されます。不適切な画像表示サイズを指定すると、画像が乱れて表示される場合があります。
画像の読み込みにはある程度の時間がかかるため、良好なユーザーアクセスエクスペリエンスを実現するには、画質を確保しながら画像のサイズを削減するように努める必要があります。

詳しい読み方
ピクセル: ピクセルとは、コンピューターが表示できる最小のドットであるとよく考えられます。たとえば、画面の解像度は 1024*768 であり、画面全体に 1024 個のピクセルがあることを意味します。 .(ピクセル)ドット、縦に768(ピクセル)ドットあります。単位として使用する場合、通常はデフォルトで pix と表記されます。

HTML/XHTML での img 画像タグの基本的な使用方法の詳細な説明については、PHP 中国語 Web サイトに注目してください。