HTMLに画像を追加する方法

HTML は、Web ページ内にテキスト、画像、ビデオ、その他のコンテンツを作成するために使用されるマークアップ言語です。画像は Web ページ制作に欠かせない要素の 1 つであり、画像を正しく追加する方法は、すべての Web ページ制作者が習得する必要があるスキルです。

1. 基本構文

HTMLで画像を挿入するにはimgタグを使用します. imgの正式名称は「image」で、「画像」を意味します。 img タグの基本的な構文は次のとおりです。

<img  src="/static/imghwm/default1.png" data-src="图片文件路径" class="lazy" alt="HTMLに画像を追加する方法" >

img タグには、src と alt という 2 つの主要な属性があります。 src は画像ファイルのパスを指し、alt はページが画像を正常に表示できない場合に表示されるテキストの説明を指します。

このうち、src 属性は入力する必要がありますが、alt 属性はオプションです。画像のパスが間違っていると画像が表示されません。 alt属性が設定されていない場合、画像が正常に表示できないページに意味のない文字列が表示される場合があります。

画像パスは、ローカル パスまたはネットワーク パスにすることができます。ローカル パスは、ローカル コンピュータに保存されている画像ファイルのパスを指します。ネットワーク パスは、インターネットからダウンロードした画像など、ネットワーク経由でアクセスされる画像ファイルのパスを指します。

2. ローカルピクチャのパス

ローカルピクチャのパスは絶対パスと相対パスに分かれます。絶対パスはファイルシステム全体での画像の位置を指定するため、完全なパスを記述する必要がありますが、相対パスはHTMLファイルからのパス記述であり、画像の相対的な位置を記述するだけで済みます。 HTML ファイル。

次に、ローカル イメージ パスを記述する 2 つの方法を示します。

1. 絶対パス

絶対パスは、ファイル システム全体におけるイメージの場所を指します。オペレーティング システムによっては、絶対パスが若干異なります。 Windows システムでは、絶対パスはドライブ文字から始まります。例:

C:\Users\Administrator\Pictures\test.jpg

Mac OS X システムでは、絶対パスはルート ディレクトリから始まります。例:

/Users/username/Documents/test.jpg

この欠点アプローチでは、各 Web ページは完全なファイル パスを使用する必要があります。ファイルの保存場所が変更された場合は、コードを変更する必要があります。

2. 相対パス

相対パスは、HTML ファイルを基準とした画像の場所を指します。ディレクトリ構造が単純であればあるほど、相対パスの使用が容易になります。 HTML ファイルでは、「.」は現在のファイルが存在するディレクトリを表し、「..」は現在のファイルが存在するディレクトリの 1 つ上のディレクトリを表します。画像と HTML ファイルが同じディレクトリにある場合、相対パスは例:

<img  src="/static/imghwm/default1.png" data-src="./images/test.jpg" class="lazy" alt="HTMLに画像を追加する方法" >

画像が HTML ファイルが配置されているディレクトリ内の image フォルダーに保存されている場合、パスは「./images/test.jpg」です。

3. インターネット画像

インターネット画像とは、インターネットから取得した画像を指します。 HTML では、img タグを使用して、ローカル画像と同様にネットワーク画像を挿入できます。

ネットワーク イメージは通常、プロトコル名、ホスト名、ファイル パス、およびファイル名で構成される文字列である URL (Uniform Resource Locator) で表されます。たとえば、Baidu 画像にアクセスするための URL は次のとおりです:

https://www.baidu.com/img/bd_logo1.png

このうち「https://」は、データ送信に HTTPS プロトコルが使用されることを示すプロトコル名で、「www.baidu.com」はホスト名、「img/ bd_logo1.png」はファイル パスとファイル名です。

ネットワーク画像を追加するときは、ネットワーク画像の URL を img タグの src 属性にコピーするだけです。例:

<img  src="/static/imghwm/default1.png" data-src="https://www.baidu.com/img/bd_logo1.png" class="lazy" alt="HTMLに画像を追加する方法" >

ネットワーク画像の方が便利です。パスの問題、画像であれば URL に問題がない場合は、img タグを使用して画像を HTML に直接挿入できます。

4. 画像の適応

Web ページ制作のプロセスにおいて、一般的なニーズは、さまざまなデバイスや画面上でより良い表示効果が得られるように、画像のサイズを適応させることです。一般的に使用される方法には、CSS を使用して幅、高さ、最大幅などのプロパティを設定する方法が含まれます。

1. CSS を使用して幅と高さを設定する

CSS の幅属性と高さ属性を使用して、それぞれ画像の幅と高さを設定できます。例:

<style>
    img {
        width: 100%;
        height: auto;
    }
</style>

ここで、幅を 100% に設定すると、利用可能なスペースの変化に応じて画像の幅が変化します。高さを自動に設定すると、元の比率を維持しながら、幅の比率に従って高さが自動的に調整されることを意味します。 。

2. CSS を使用して max-width を設定する

max-width 属性を使用すると、画像が特定の幅を超えると自動的に比例して縮小しますが、実際には縮小されません。元のサイズよりも小さい。例:

<style>
    img {
        max-width: 100%;
        height: auto;
    }
</style>

このうち、max-width は 100% に設定されており、画像の最大幅が使用可能なスペースを超えず、元のサイズを超えないことを意味し、高さは auto に設定されています。これは、元の比率を維持しながら、幅の比率に応じて高さが自動的に調整されることを意味します。

つまり、Web ページに画像を追加するときは、画像のパス、画像の説明、画像のサイズ、調整などの問題を考慮する必要があります。基本的な構文と一般的なメソッドをマスターしていれば、HTML で img タグを柔軟に使用して、Web ページをよりカラフルにすることができます。

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