HTML/XHTML における img 画像タグの基本的な使用法の詳細な説明

HTML/XHTML における img 画像タグの基本的な使用法の詳細な説明

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

基本的な構文:

XML/HTML コードコンテンツをクリップボードにコピー
  1. <画像  src = "URL"   />   

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

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

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

<img /> タグの使用例
画像ファイルを保存するために、e:html フォルダーの下に images フォルダーを作成します。下の画像を右クリックし、「名前を付けて画像を保存」を選択して、画像を画像フォルダに保存し、後で使用できるようにします。
201636120500949.jpg (350×318)

XHTML example1.html を編集し、id="main-content" の div タグに次の変更を加えます。

XML/HTML コードコンテンツをクリップボードにコピー
  1. < h3 >記事のタイトル</ h3 >   
  2. < p >記事の内容</ p >   
  3. < p > <画像  src = "images/flower_1.jpg"   alt = "花"   </p>   

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

画像の表示サイズを指定する
<img /> タグに width 属性または height 属性を追加して、画像の表示サイズを手動で指定できます。

XML/HTML コードコンテンツをクリップボードにコピー
  1. <画像  src = "images/flower_1.jpg"   alt = "花"  = "350"  高さ= "270"   />   

ヒント
通常、画像サイズ属性は無視され、デフォルトで元の画像サイズが表示されるか、ブラウザの適応サイズが表示されます。不適切な画像表示サイズを指定すると、画像が歪む可能性があります。
画像の読み込みにはある程度の時間がかかるため、優れたユーザーエクスペリエンスを実現するために、画像の品質を確保しながら画像のサイズを縮小するようにしてください。

さらに読む
ピクセル: ピクセルは、コンピューターが表示できる最小のドットと比喩的に考えることができます。たとえば、よく言われる画面解像度は 1024*768 ですが、これは画面に水平方向に 1024 (ピクセル) のドット、垂直方向に 768 (ピクセル) のドットがあることを意味します。単位として使用する場合、通常はデフォルトで pix と表記されます。

<<:  フレックスレイアウトを使用してページレイアウトを簡単に実装するためのサンプルコード

>>:  ウェブページ内の 2 つのボックス モデル (W3C ボックス モデル、IE ボックス モデル)

推薦する

HTMLのmarquee属性でテキストを踊らせる

構文: <marquee> …</marquee>モバイル属性マーキーを使用...

nginx での書き換えジャンプの実装

1. 新旧ドメイン名のジャンプ適用シナリオ: ドメイン名ベースのリダイレクト。会社の古いドメイン名は...

jsを使用してスライダーをドラッグする効果を実現します

この記事では、jsでスライダーをドラッグする方法の具体的なコードを参考までに共有します。具体的な内容...

CSS シャドウアニメーションの最適化のヒント

このテクニックは、この記事から来ています - シルキーでスムーズなパフォーマンスでボックスシャドウを...

Vue で Baidu Map を呼び出して経度と緯度を取得する

プロジェクトでは、現在地の緯度経度を取得したり、場所を検索して緯度経度情報を取得したりする必要があり...

設定ファイルを書いてMyBatisを簡単に使う方法

設定ファイルを書いてMyBatisを簡単に使う方法マイバティス3.xここでは MyBatis につい...

MySQL 5.7.18 リリース インストール ガイド (bin ファイル バージョンを含む)

インストール プロセスは、コンパイル手順を除いて、基本的にソース バージョンと同じです。この記事では...

Docker はすべてのコンテナをバッチ起動して閉じます

Dockerの場合すべてのコンテナコマンドを開始する docker を起動します $(docker ...

MySQL の CPU 負荷が高い問題のトラブルシューティング

MySQL による CPU 負荷の上昇今日の午後、MySQL によってサーバーの負荷が高くなる問題を...

MySQL XA で分散トランザクションを実装する方法

目次序文XA プロトコルMySQL XA で分散トランザクションを実装する方法序文MySQL が単一...

SQL インジェクションのある Web サイトを見つける方法 (必読)

方法 1: Google の詳細検索を使用します。たとえば、次に示すように.asp?id=9などの ...

JavaScript におけるさまざまなバイナリオブジェクトの関係の詳細な説明

目次序文さまざまなオブジェクト間の関係配列バッファ型付き配列Uint8ClampedArray文字間...

MIME タイプの完全なリスト

MIME タイプとは何ですか? 1. まず、ブラウザがコンテンツを処理する方法を理解する必要がありま...

一般的な HBase 運用および保守ツール 10 個の概要

概要: HBase には、ユーザーに管理、分析、修復、デバッグ機能を提供するための多くの操作および保...

Xampp サーバーで MySQL パスワードを変更する方法 (画像付き)

今日、PHP で作業しているときに、Xampp サーバーに付属の mysql データベースを使用する...