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 ボックス モデル)

推薦する

js はランダムロールコールを実装します

この記事では、ランダムロールコールを実装するためのjsの具体的なコードを参考までに共有します。具体的...

Centos7.4 システムに yum ソースから mysql 5.6 をインストールする

システム環境: centos7.4 1. データベースがインストールされているかどうかを確認します。...

MySQL のユニークインデックスと通常のインデックスのどちらを選択すればよいでしょうか?

ユーザー テーブルを設計するときに、各人の ID 番号が一意であり、検索する必要があるシナリオを想像...

純粋な CSS を使用してユーザーが Web ページのコンテンツをコピーするのを防ぐ方法

序文私自身の個人ブログを入力しているときに、ブログの詳細ページでさまざまなコンテンツをコピーするさま...

MySQL データベースでよく使用される SQL ステートメントの詳細と概要

この記事では、MySQL データベースでよく使用される SQL ステートメントを例を使用して説明しま...

MyBatisインターセプターのページング機能を実装する方法

MyBatisインターセプターのページング機能を実装する方法序文:まず、実装原則についてお話しします...

Navicat for MySql ビジュアルインポート CSV ファイル

この記事では、参考までに、Navicat for MySql の CSV ファイルのビジュアルインポ...

大規模な Vue.js プロジェクトの構築と維持のための 10 のベスト プラクティス

目次1. スロットを使用してコンポーネントを理解しやすくし、より強力にする2. Vuexストアを正し...

ドラッグ位置プレビューを実装するネイティブJS

この記事では、要素をドラッグするときにプレビューを追加する小さなデモを紹介します。効果は次のとおりで...

Linux に nodejs 環境とパス構成をインストールするための詳細な手順

Linux に Node.js をインストールする方法は 2 つあります。1 つは簡単で、解凍して使...

IDEA が docker を統合して springboot プロジェクトを展開するプロセス全体

目次1. IDEAはdockerプラグインをダウンロードします2. クラウドサーバーDocker 2...

CentOS 7 で Apache (httpd) サービスをインストールおよびアンインストールする詳細な手順

アンインストールまず、次のコマンドを使用して、httpd サービスがインストールされているかどうか、...

Reactにおけるコンテキスト適用シナリオの分析

コンテキストの定義と目的コンテキストは、コンポーネント ツリーにプロパティを明示的に渡すことなく、コ...

MySQLのトランザクション管理操作の詳細な説明

この記事では、MySQL のトランザクション管理操作について説明します。ご参考までに、詳細は以下の通...