HTMLに画像を導入する方法（2つの方法）-フロントエンドQ&A-php.cn

HTMLに画像を導入する方法（2つの方法）

PHPz

リリース： 2023-04-06 17:19:20

オリジナル

24640 人が閲覧しました

HTML (Hypertext Markup Language) は Web ページの基本言語の 1 つで、静的ページを構築する場合でも、動的ページを構築する場合でも、HTML は不可欠な部分です。画像は Web ページを作成するときに非常に重要で一般的に使用される要素の 1 つであるため、HTML に画像を導入する方法を知る必要があります。

HTML では、.gif、.jpeg、.png、その他の形式など、複数のタイプの画像を導入できます。画像を導入する前に、すべての画像ファイルを保存するための HTML ドキュメント用の画像フォルダーを作成する必要があります。通常、画像フォルダーは HTML ファイルと同じディレクトリに配置され、HTML ファイルから簡単にアクセスできるようになります。

HTML では、次の 2 つの方法を使用して、Web ページ内で画像を参照できます。

タグでの画像の使用

最も一般的な方法は、HTML ドキュメントで img (画像) タグを使用することで、非常にシンプルで簡単です。使用します。タグの基本的な構文は次のとおりです。

<img src="image filename">

ログイン後にコピー

その中で、 src 属性はブラウザに画像をロードする場所を指示するために使用され、image filename は画像ファイルの名前です (相対パスであることに注意してください)。ここでは絶対パスではなくパスを指定する必要があります)。

たとえば、画像フォルダーと HTML ファイルが同じディレクトリにあり、「example.gif」という名前の画像を Web ページに導入したい場合、コードは次のようになります。 # #

<img src="example.gif">

ログイン後にコピー

これにより、「example.gif」という名前の画像がページに表示されます。

画像に他の Web ページへのリンク、タイトルの追加、幅と高さの変更などの属性を追加したい場合は、次のタグを使用できます:

<img src="image filename" alt="Image title" title="Image tooltip" height="number" width="number" border="number" align="left/right/center">

ログイン後にコピー

ここで、 alt 属性は、画像が表示できないときに表示される画像名を追加するために使用されます。 title 属性は、プロンプトテキストを追加します。 height 属性と width 属性は、画像のサイズを変更するために使用されます。 border 属性は境界線の幅を追加するために使用され、align 属性は画像と他のテキストの配置を制御するために使用されます。

たとえば、幅 200 ピクセル、高さ 100 ピクセルの画像を追加し、それを別のページにリンクする場合、コードは次のようになります:

<a href="https://www.example.com/"><img src="example.gif" alt="Example Image" title="Click this image to go to example.com" height="100" width="200" border="1" align="center"></a>

ログイン後にコピー

CSS (Cascading Style Sheets) を使用して、Web ページの背景に画像を追加することもできます。これは、もう 1 つの一般的な方法です。タグとは異なり、このメソッドは画像を個別の要素としてではなく、Web ページ全体の背景として使用します。

CSS を使用して背景に画像を追加する方法は次のとおりです:

body {
    background-image: url('image filename');
}

ログイン後にコピー

このうち、background-image 属性は、背景に表示する必要がある画像をブラウザに伝えるために使用されます。背景色や背景画像のタイリング方法の設定など、他のオプションを指定することもできます。

たとえば、Web ページの背景に「example.gif」という名前の画像を表示し、それを水平方向と垂直方向に繰り返す場合、コードは次のようになります。

body {
    background-image: url('example.gif');
    background-repeat: repeat;
}

ログイン後にコピー

これにより、ページ全体の背景が「example.gif」画像で埋め尽くされます。

この方法を使用する場合、さまざまな種類のデバイスで画像が正しく表示されるように、画像のサイズに特別な注意を払う必要があります。

概要

タグで画像を使用する場合でも、CSS を使用して背景に画像を追加する場合でも、HTML には画像を導入するさまざまな方法が用意されています。これらの方法を使用するときは、画像が Web ページに正しく表示されるように、画像のサイズ、パス、形式に注意する必要があります。 HTML で画像を使用すると、Web ページにパーソナライズされた要素を簡単に追加でき、Web ページをより豊かで魅力的なものにすることができます。

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