HTMLに画像を追加する方法を詳しく紹介します。

Web サイト制作において、写真は非常に重要な要素の 1 つであり、Web サイトに視覚効果と美しさを追加します。したがって、HTMLに画像をどのように追加するかが重要な問題となります。この記事では、HTML に画像を追加する方法を詳しく紹介し、読者が Web サイト制作スキルをよりよく習得できるようにしたいと考えています。

1. 基本的な画像参照構文

HTML では、画像を追加するということは、実際には HTML ドキュメントに画像参照構文を追加することになります。 HTML では、 タグを使用して画像を参照します。基本的な構文は次のとおりです。

このうち、src 属性は参照先の画像のアドレスを表します。 、ローカルにすることもできます。イメージのパスは、リモート サーバーを指すイメージ アドレスにすることもできます。 alt属性は画像の説明情報を表すもので、何らかの理由で画像が正常に表示できなくなった場合に、alt属性の情報が画像の本来の表示情報を置き換えます。

たとえば、example.png という名前の画像を HTML に追加する場合、その画像がローカル ハード ディスクの C:\ にあるimages フォルダーにある場合、画像参照構文を使用するコードは次のようになります。

HTML には、次のようなものがあります。画像を使用するためのその他の属性。たとえば、width は画像の幅を表し、height は画像の高さを表し、border は画像の境界線のサイズを表します。これらのプロパティを通じて、より多くの設定を行ったり、画像を制御したりできます。

2. 相対パスと絶対パス

上記では、src 属性に絶対パスを使用して画像を参照する方法を説明しました。実際、Web サイト制作では、HTML ドキュメントのパスを基準とした相対パスを使用して画像を参照することもできます。ウェブサイト上の画像の引用がより簡単かつ便利になります。

相対パスには、絶対相対パスと相対相対パスの 2 種類があります。このうち絶対相対パスとは、画像を参照する際に、一度別のディレクトリに飛んでから、そのディレクトリを基準に相対参照することを意味します。相対パスは、現在のドキュメントを基準にして参照されます。

次のファイル ディレクトリがある場合、ファイル ディレクトリを例に挙げます。

home/

|____ index.html
|____ images/
        |____ pic1.jpg
        |____ pic2.jpg

インデックス内のイメージ フォルダー内の pic1.jpg 画像を参照するには.html、相対パス方式で参照できます。つまり、../ を使用して上位ディレクトリを表します。コードは次のとおりです。

3. 画像形式

実際のWebサイト制作では、JPEG、PNG、GIFなどの画像形式がよく使われます。他の 2 つの形式と比較して、JPEG 形式は圧縮率が高いため、画像の保存スペースを節約できます。 PNG 形式は透明な背景をサポートしており、JPEG 形式の画像のようなぼやけや歪みの影響を受けません。 GIF 形式はアニメーションと透明な背景をサポートしていますが、色深度は JPEG および PNG 形式よりも低くなります。

ページの読み込みを高速化し、訪問者のエクスペリエンスを向上させるために、Web サイト開発者は画像形式を選択する際に、画像のサイズと品質、読み込み速度、パフォーマンス、その他の要素を考慮する必要があります。

4. 概要

この記事では、HTML に画像を追加する方法と、画像の形式、相対パス、絶対パスを読者に紹介する方法を詳しく紹介します。 Webサイト制作において写真は非常に重要な要素の一つです。美しい画像を作成すると、Web サイトに活力と魅力が加わります。そのため、HTML に画像を追加するスキルを習得することは、Web サイト作成者にとって非常に重要です。

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