imgイメージタグの基本的な使い方を詳しく解説

この記事では主に HTML/XHTML における img 画像タグの基本的な使い方を紹介しますimg タグのよく使われる属性をリストしますので、必要な方は参考にしてください

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

基本構文:

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

1. <img src=" />

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

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

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

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

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

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

1. <h3>記事タイトルh3>

2. <p >記事の詳しい内容 p>

3. <p><img src="images/flower_1. jpg "alt= "flower"/>p>

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

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

XML/HTML コードコンテンツをクリップボードに保存します

1. <img src="images/flower_1.jpg" alt="花" 幅="350" 高さ= 「270」 />

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

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

   以上がimgイメージタグの基本的な使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。