HTMLベース画像ラベルとパス


imgタグ(image tag)

imgタグは、写真ファイルにロード可能なタグである.
空欄で/と書いて、書かなくても大丈夫です.
私は主に書いたのです.
では、無料画像サイトPixaBayの写真を載せてみましょう.
(写真アドレス:https://cdn.pixabay.com/photo/2020/04/28/19/36/heart-5106075_960_720.png)
合成例
<img src="https://cdn.pixabay.com/photo/2020/04/28/19/36/heart-5106075_960_720.png" alt="" />
出力結果

必須属性

imgタグには、srcプロパティが必要です.srcに画像ファイルのアドレスを入力します.
必須の属性ではありませんが、良い属性があります.alt属性です.alt属性は、置換テキスト(代替テキスト)属性であり、アクセス可能な要素である.このプロパティは、画面リーダーが視覚障害者のために入力した説明的な文字で、画像を読み取るために使用されます.また、画像がロードされていない場合には、画像の説明を表示することもできる.
Webのアクセス性を向上させるために、有意義なドキュメントを作成することをお勧めします.
上記のWebアクセス性については、次の記事で説明します.

パス(アドレス)

imgタグは、src属性を記入する必要があります.しかし、この経路には2つの分類がある.これが絶対パスと相対パスです.

絶対パス


<img src="https://cdn.pixabay.com/photo/2020/04/28/19/36/heart-5106075_960_720.png" />
絶対パスとは、どこからロードしても常に同じアドレスを保持するパスです.
座標がサーバにアップロードされて固定されている場合(https://~)、固定アドレスは現在のパスを作成しているファイル(C:Documents~)の場所とは無関係です.
実際の生活を例に、ソウル市役所の住所を書いてみます.
ソウル特別市中区世宗通り110
このようなソウル市役所の道路名住所が見つかれば、ソウル市でも京畿道(キョンギド)、忠清道(チュンチョンド)、全羅道(チョンラド)、慶尚道(キョンサンド)、済州島(チェジュド)など全国のどこでも同じ結果が出る.
固定アドレスは「絶対アドレス」(Absolute Path)と呼ばれ、ファイルの位置を考慮しません.
パスが固定されているため、ファイルを任意の場所で検索できますが、ロード速度が遅いという欠点もあります.パスにhttp://が含まれている場合は、インターネットに接続する必要があります.

相対パス


<img src="./img/my_logo.png" />
相対パスとは、現在作成されているファイルの場所に応じて変化するパスです.
現在のファイルに基づいて、同じファイルを参照するファイルと異なるファイルを作成する場合は、まったく異なるパスを使用して作成できます.
現実生活の例として、隣の住所を考えればいい.
私の住んでいるところの隣人、上の階?
京畿道住民の隣家と忠清道住民の隣家、全羅道住民と慶尚道住民、済州島住民の上家は必ず違う.
私が今住んでいるところを基準に決めたからです.「隣人」、「前の家」、「次の家」、「前の家」は同じ言葉ですが、その意味はどこで引用されるかによって異なります.
作成中のファイルの場所に応じて変化するアドレスを「相対パス」(Relative Path)と呼びます.
絶対パスに比べて、ロード速度が速くなる可能性があります.これは、私の場所に基づいて検索されるためです.ただし、作成中のファイルの場所が変更された場合は、パスの更新を続行する必要があります.

パスの作成


パスを作成するときは、3つのキーワードを知るだけです./:パス分割、移動../:現在作成中のファイルの場所を示す(htmlおよびcssでは省略可能)../:親フォルダに移動/は、フォルダとディレクトリを開いてアクセスすることを示します../とは、現在の場所、パスを作成しているhtmlファイル、cssファイルなどの場所を指します.省略しても差し支えない.../は、親フォルダに移動することを示します.
例を挙げて説明します.
├── my_logo.png
├── my_prjt
│      ├── index.html
│      └── my_style.css
└───────────
仮想フォルダ構造をシンプル化します.
現在、index.htmlおよびmy_style.cssは、my_prjtフォルダ内に存在します.index.htmlが現在作成中のhtmlファイルであると仮定します.
現在のhtmlファイルではなく、親フォルダに含まれるmy_logo.pngを読み込みたいです.
この場合、./../my_logo.pngまたは../my_logo.pngを使用して、現在のファイルにバッジファイルを作成できます.
パスは、画像をアップロードしたり、htmlやcss、jsなどとインタラクティブにしたり、マルチメディアコンテンツをロードしたりするために使用できます.