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

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

基本構文:

XML/HTML コードコンテンツをクリップボードにコピー

1. <img src="url" />

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

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

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

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

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

XML/HTML コードコンテンツをクリップボードにコピー

1. <h3>記事タイトルh3 >
2. <p>記事の詳しい内容 p>
3. <p><img src="images/flower_1.jpg" alt= 「花」 />p>

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

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

XML/HTML コードコンテンツをクリップボードにコピー

1. <img src="images/flower_1.jpg " alt="flower" width= "350" 身長="270" />

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

詳細な読み方
ピクセル: たとえば、よく言われる画面の解像度は 1024*768 であると考えられます。画面には横に 1024 (ピクセル) のドット、縦に 768 (ピクセル) のドットがあります。単位として使用する場合、通常はデフォルトで pix と表記されます。