この記事は Script House Lightning によるオリジナルです。転載する場合はこの文を削除して構いませんが、いかなる言い訳や方法でも記事の内容を変更しないでください。変更しない場合、その結果はあなたが責任を負います。転載する場合は作者と出典を明記してください。
ずっと前から今に至るまで、多くのネチズンが私に同様の質問をしてきました。特に、このサイトのいくつかのグラフィックや画像の特殊効果コードをコピーした後、写真が常に表示されないなどの問題が発生しました。これらの初心者向けに特に説明します。関連するチュートリアルです。これについて質問がない場合は、ここから離れてください。
Webページでの画像の適用、つまりWebページでの画像タグの適用について、皆さんのためにまとめておきます!
1) 画像マークアップの概要。
Web ページにテキストのみが含まれ、画像が含まれていない場合、画像は
Web ページ制作 において非常に重要な要素であり、画像を出力するための
タグが用意されています。ウェブページへ。このタグには、SRC、ALT、ALIGN、BORDER、WIDTH、および HEIGHT 属性があります。
2) 属性の紹介。
SRC 属性。
タグの場合、その SRC 属性は必須の属性です。つまり、SRC には
タグ内で値を割り当てる必要があり、タグの必須の部分です。このとき、IMG は次の形式で記述する必要があります。
このうちパラメータ値は画像の完全なファイル名とパスです。
画像ファイルは一般に、HTML ドキュメントなどのプレーン テキスト ファイルよりも多くのスペースを占有することがわかっており、Web デザインでは多くの場合、魅力を高めるために多くの画像を追加する必要があります。これらの画像ファイルを HTML ドキュメントに追加すると、HTML ドキュメントはサイズが非常に大きくなると、ネットワーク上の送信は必然的に非常に遅くなります。
タグは、実際に HTML ドキュメントに画像を追加するのではなく、HTML に次のことを指示します。どの画像ファイルであるか?どこ?そのため、HTML は画像ファイルの元の場所からそれを呼び出すことができます。 SRC 属性の機能は、これら 2 つの質問に答えることであるため、SRC 属性のパラメータ値には、画像ファイルの完全なファイル名、つまりファイル名と拡張子 (logo.gif など) がなければなりません。どの画像ファイルであるかの問題。HTML が画像ファイルの場所を認識できるように、パラメータ値には画像ファイルへのパスも含まれている必要があります。
SRC属性のパラメータ値のうち、画像ファイルのパスをどう書くかは初心者にとってよく問題になります。
画像ファイルへのパスには、相対パスまたは URL を使用できます。いわゆる相対パスとは、現在の HTML ドキュメントと現在の HTML ファイルにリンクまたは埋め込まれるファイルの相対位置によって形成されるパスを指します。 HTML ファイルと画像ファイル (名前が logo.gif であると仮定) が同じディレクトリにある場合、画像ファイルが現在の HTML ファイルが存在するディレクトリのサブディレクトリに配置されている場合は、コードを
として記述できます。が配置されています (サブディレクトリ名が (画像用) であると仮定すると、コードは
である必要があります。画像ファイルが現在の HTML ファイルが配置されているディレクトリの上位ディレクトリに配置されている場合 (上位ディレクトリの名前が home であると仮定します)の場合、相対パスは準 Web サイトである必要があります。つまり、開発者の Web サイトを表す「. ./」の後に、開発者の Web サイト上の画像ファイルのパスを使用します。たとえば、home がこの Web サイトの下のディレクトリであると仮定すると、コードは
となります。home が Web サイトの下のディレクトリ king の下のサブディレクトリの場合、コードは
と記述する必要があります。
その他のプロパティ。
タグの ALT、ALIGN、BORDER、WIDTH、および HEIGHT 属性はオプションです。 ALIGN 属性は画像の配置であり、パラメータ値は左、中央、右です。BORDER は画像の境界線であり、そのパラメータは 0 以上で、デフォルトの単位はピクセルです。 WIDTH 属性と HEIGHT 属性 これは画像の幅と高さであり、そのパラメータのデフォルト単位はピクセルです。ALT 属性は、マウスが画像上に移動したときに表示されるテキストです。これを使用する必要があることに注意してください。 Web ページを作成するときの属性。これを行う目的は何ですか?何らかの理由で画像が表示できない場合に、プロンプトテキストを表示することができ、利便性が向上します。