HTML画像タグ

HTML は、複数の形式のプログラミング言語で Web ベースのアプリケーションを実装できるようにするプレーン テキスト ドキュメントであり、Web ページの機能を記述するためにタグを使用します。このような必須タグの 1 つは、開発者が画像ファイルをコードに組み込んで、Web ページ上にそれぞれの画像を表示できるようにする画像タグです。この構文は です。ここで、「image」はタグ名で、「src=」には必要な画像の URL が割り当てられている必要があります。このトピックでは、HTML 画像タグについて学習します。

Web ページに画像を追加する

を使用して IMG を HTML ページに追加できます。 HTML ドキュメント内のタグ。構文は次のとおりです:

<img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543801989409.png?x-oss-process=image/resize,p_40" class="lazy" the img url here alt="HTML画像タグ" >

ここで、IMG は、タグがドキュメントへの IMG の追加に関するものであることをブラウザーに伝え、「src=」は画像のダウンロード元を指定します。

画像を含むページの例

コード:

<title> Example HTML IMG Tag </title>


<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543801989409.png?x-oss-process=image/resize,p_40" class="lazy" alt=" Software development icon " height=" 150 "    style="max-width:90%">

出力:

これらの HTML ページに関する興味深い事実の 1 つは、IMG タグを使用すると、画像が当該 Web ページに挿入されないことです。代わりに、ダウンロードされた画像が配置される保持スペースが作成されます。

ブラウザのサポートと属性の互換性

ご想像のとおり、最新のブラウザはすべて画像と IMG タグの使用をサポートしています。画像がレスポンシブに設定されていない場合、モバイル ブラウザは画面に合わせて画像のサイズを変更することがあります。

HTML 4.01 および新しい HTML5 との属性の互換性に関しては、aligning、border、hspace、space を除き、ほとんどのタグが機能します。これらのタグは単純に後者ではサポートされていません。

リンクとしての画像:

画像を別のページへのリンクとして機能させたい場合があります。これを行うには、 内に IMG タグを追加します。タグ。

• 

Web ページの背景として画像を設定する

ページの Body 要素で background-image CSS プロパティを使用すると、Web ページの背景画像として画像を割り当てることができます。

<h1 id="Background-Image">Background Image </h1>

ブラウザ内で画像をフローティングに設定する

CSS プロパティ「float」を使用して、ブラウザ ウィンドウ内の任意の場所に画像をフロート表示するように設定できます。理解を助ける例を見てみましょう。

<p> <img src="/static/imghwm/default1.png" data-src="car.png" class="lazy" alt="Ferrari Car "   style="max-width:90%"></p>

ここでは、車の画像がテキストの右側に表示されます。

<p><img src="car.png%20" alt=" Ferrari Car "   style="max-width:90%"></p>

ここでは、車の画像がテキストの左側に表示されます。

画像タグの属性

以下はイメージタグの属性です。

1) 整列

可能な値: 上、下、中央、左、右。

alight 属性は、Web ページ上の画像の配置を指定するために使用されます。

2) Alt

値のタイプ: テキスト

Alt は、Web ページの画像の代替テキストを指定するために使用されます。 IMG を表示できない場合、ブラウザはこのテキストをユーザーに表示します。 Google や Bing などの検索エンジンは、この代替テキストを使用して画像検索に結果を表示します。

3) ボーダー

値の種類: ピクセル

画像の周囲にユーザー定義の太さの境界線を作成するために使用されます。 HTML5 では動作しません。

4) クロスオリジン

値の種類: 匿名使用資格情報

この属性は、クロスオリジンの写真をどのように処理するかを指定する場合に使用されます。これは主に、JavaScript Web アプリのキャンバス要素が使用される場合に使用されます。

5) 身長

値のタイプ: パーセンテージまたはピクセル

これは、HTML Web ページ内の画像の高さを示すために使用されます。

6) hspace

値の種類: ピクセル

HTML5 ではサポートされていません。hspace 属性は、挿入された画像の左右に追加される空白の量をピクセル単位で指定するために使用されます。

7) ismap

値のタイプ: ページの URL

ismap は、上記のイメージをサーバー側のイメージ マップとして定義するために使用しました。ユーザーが画像内をクリック (またはタップ) すると、ブラウザーはクリック (またはタップ) 座標を URL として Web サーバーに送信します。

8) 長机

値の種類: URL

Longdesc は、URL を使用して画像の詳細な説明を提供します。属性内の URL は画像の説明として使用されます。

9) ソース

値の種類: URL

src はソースを表します。これは、ブラウザが画像を取得するアドレスを指定するために使用されます。この URL は、同じサーバー上のディレクトリ内の画像に適用できます。また、画像を別のドメイン名でサードパーティのサーバーに保存することもできます。

10) ユースマップ

値のタイプ: #mapname

usemap 属性は、クライアント側のイメージ マップのイメージを定義します。 usemap は常にマップおよびエリアの HTML タグとともに使用されます。

11) vspace

値の種類: ピクセル

HTML5 ではサポートされていません。Vspace 属性は、Web ページ上の画像の上部と下部の空白として使用されるピクセル数を設定するために使用されます。

12) 幅

値の種類: ピクセル

名前が示すとおり、width 属性は HTML Web ページ内の画像の幅を指定するために使用されます。

結論 – HTML 画像タグ

画像を HTML ページに追加する方法とその属性を設定する方法を説明したので、Web プロジェクトで魅力的な Web ページを作成できます。

画像は、Web ページに視覚的なセンスを加えるだけでなく、検索エンジンの最適化にも役立つため、価値があります。画像に適切な alt タグと説明を追加すると、検索エンジンが Web ページのコンテンツをよりよく理解し、多くの場合 Web ページのランキングが向上します。

以上がHTML画像タグの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。