イメージタグ

10489 ワード
learnhtml htmli テキストリンク
HTMLで イメージタグは、Webページに画像を表示するために使用されます.イメージは直接ドキュメントに挿入されません、彼らはHTMLページにリンクされます.The tagは参照画像の保持空間を作成する.これは、スタイルやCSSのプロパティを使用して操作することができます.
  • Aには2つの必須属性があります タグ.以下のようになります:

  • src attribute -画像のパスを定義します.

  • alt属性-画像の代替テキストを指定します.
    • ヒント:また、使用して、HTMLイメージをクリックすることができます 内部タグ tag.

    Estimated reading time: 6 minutes

    文法


    The タグはHTMLで終了タグを必要としません.しかし、XHTMLでは、両方の開口部が含まれています タグとクローズ タグ.
    
<img src="URL" alt="text">

    HTMLタグのサンプル


    HTMLイメージタグの例です.
    
<!DOCTYPE html>
<html>
  <head>
    <title>HTML <img> Tag</title>
  </head>
  <body>
    <h2>Example of the HTML <img> Tag</h2>
    <p>Share Ponit Anchor</p>
    <img src="https://sharepointanchor.com/wp-content/uploads/2021/01/SPA-LOGO.png" alt="SPA Logo">
  </body>
</html>
    Try it Yourself Online

    結果:


    結果

    サンプルファイルをダウンロード


    HTML-img-tag Download

    CSSプロパティをスタイルに使用します。


    CSSスタイリングプロパティを使用して、イメージの最初の外観を変更することもできます.

    CSSプロパティーを持つタグのサンプル


    
<!DOCTYPE html>
<html>
  <head>
    <title>HTML <img> Tag</title>
    <style>
      img {
      border-radius: 10%;
      border: 2px dashed #C40655;
      width: 250px;
      display: block;
      margin: 0 auto;
      }
    </style>
  </head>
  <body>
   <h2>Example of the HTML <img> Tag</h2>
    <div>
     <img src="https://sharepointanchor.com/wp-content/uploads/2021/01/SPA-LOGO.png" alt="SPA Logo">
    </div>
  </body>
</html>
    Try it Yourself Online

    結果:


    結果

    src属性とalt属性:


    "src "属性はソースを表します.この属性は、表示する画像を見つけるブラウザを指示します.href属性の値はファイル名かURLである.
    “alt”属性は代替テキストを表します.この属性はブラウザーにイメージを見つけることができないなら、与えられたテキストだけを表示するのに使用されます.
    ヒント:それは“代替テキスト”のキーワードを含めることをお勧めします、それは検索エンジンのウェブサイトのランキングを向上させます.

    srcとalt属性を持つHTMLタグのサンプル


    
<!DOCTYPE html>
<html>
  <head>
    <title>HTML <img> Tag</title>
  </head>
  <body>
  <h2>Example of the HTML <img> Tag</h2>
    <img src="https://sharepointanchor.com/wp-content/uploads/2021/01/SPA-LOGO.png" alt="SPA Logo" width="256" height="256">
  </body>
</html>
    Try it Yourself Online
    注:常に高さと幅で画像を挿入しようとすると、他のWebページ上に表示中にフリッカーすることがあります.

    結果:


    結果

    " load "属性を持つHTMLタグ:


    HTMLでは、新しい読み込み属性が表示されるに近いまで画像とiframeの読み込みを延期するために利用可能です.これはクロムの一部(V 76の場合)です.
    load属性は以下の値をサポートします:

  • 怠惰な-それは、イメージまたはIframeがビューポートから距離閾値に達するまで、ロードを延期する.

  • 熱心に-この値はすぐにリソースを読み込みます.

  • オート-それはデフォルトの動作です、リソースを読み込みます.

    • サポートされるイメージ形式


    HTML規格はどのようなイメージ形式をサポートするのかをリストしていないので、各ユーザエージェントは異なる形式をサポートします.
    ここでは、最も一般的にWebページで使用されるイメージファイル形式です.
    th, td{ padding: 20px; }
    省略
    ファイル形式
    MIMEタイプ
    ファイル拡張子
    ブラウザ互換性
    APNG
    アニメーションポータブルネットワークグラフィックス
    イメージ/apng
    APng
  • クロム
  • エッジ
  • ファイアフォックス
  • オペラ
  • サファ
    畝
    畝BMP | ビットマップファイル.BMP
  • クロム
  • エッジ
  • ファイアフォックス
  • オペラ
  • サファ
    畝
    畝GIF | グラフィック交換形式のイメージ.GIF
  • クロム
  • エッジ
  • ファイアフォックス
  • オペラ
  • サファ
    畝
    畝ICO | マイクロソフトアイコン画像
  • .ico
  • .カール
    畝
  • クロム
  • エッジ
  • ファイアフォックス
  • オペラ
  • サファ
    畝
    畝JPEG | 共同写真専門家グループイメージ
  • .jpg
  • .JPEG
  • .原研
  • .PJPEG
  • .PJP
    畝
  • クロム
  • エッジ
  • ファイアフォックス
  • オペラ
  • サファ
    畝
    畝PNG | ポータブルネットワークグラフィックス.東雲
  • クロム
  • エッジ
  • ファイアフォックス
  • オペラ
  • サファ
    畝
    畝SVG | スケーラブルなベクトルグラフィックス.svg |
  • クロム
  • エッジ
  • ファイアフォックス
  • オペラ
  • サファ
    畝
    畝TIFF | タグ付きイメージファイル形式
  • .ティフ
  • .ティフ
    何もない.組み込み;アドオンが必要
    畝WebP | web画像形式.Webp
  • クロム
  • エッジ
  • ファイアフォックス
  • オペラ
    畝

    • イメージ読み込みエラー


    画像の読み込み中にエラーが発生する場合があります.これは次のような状況で起こります.
  • "src "属性は空("")か"NULL "です.
  • “src”URLは、ユーザーが現在ページにあるURLと同じです.
  • イメージの一部の破損は、それがロードされるのを防ぎます.
  • イメージのメタデータは、その次元を取得することが不可能になるような方法で破損され、 タグ.
  • ファイル形式は、ユーザーエージェントがサポートしていません.

    • 属性


    HTMLイメージタグはグローバル属性とイベント属性をサポートします.
    th, td{ padding: 20px; }
    属性
    値
    説明
    整列する
  • 左側
  • 右
  • トップ
  • 底
  • ミドル
    この属性は周囲の要素を参照して画像の位置合わせを定義する.HTML 5でサポートされていません.
    これは画像の代替テキストを指定します
    そして、画像周辺の境界線幅を定義する.HTML 5でサポートされていません.
    チェンクロスシン
    この属性はイメージをロードするときにCorsが使用されるかどうかを指定するのに役立ちます.CORSを通してアップロードされるイメージは、後者の機能を制限することなく、要素で使われることができます
    この要素からのリクエストは、資格を渡さない
    この要素からのCORSリクエストは資格情報を渡す.HTML 5で新しい属性です
    この値は画像の高さを指定する
    ここで、画像の左右の空間を定義するために用いられる.HTML 5以降でサポートされていません.
    この関数は、タグの内容がサーバ側のイメージマップであることを指定する
    画像の詳細な記述でURLアドレスを指定するために使用されます(画像の簡単な説明のために、Alt属性を使用してください).HTML 5以降でサポートされていません.
    この値は画像のソースを定義します
    は、クライアントマップイメージの座標を含む要素へのリンクを定義するのに役立ちます
    そして、画像の上下のスペースを指定する.HTML 5以降でサポートされていません.
    この値は画像の幅を規定する

    • 廃止予定の属性:


    ここで、推奨されないHTML属性とその代替メソッドの一覧を以下に示します.
    th, td{ padding: 20px; }
    属性
    値
    説明
    代替
    整列する
  • 左側
  • 右
  • トップ
  • 底
  • ミドル
    この属性は周囲の要素を参照して画像の位置合わせを指定するのに役立ちます.周囲の要素に関するイメージのHTMLイメージを中心にしてくださいCSS垂直方向のAlignおよび/またはfloatプロパティ
    それがイメージのまわりの境界線の幅を定義するCSS境界プロパティ
    これは、イメージの周りの水平空間を指定するために使われる代わりにCSSのマージンプロパティを使用します.
    "name "という名前の要素を指定します.
    これは画像の上下に空白を定義する.代わりにCSSのマージンプロパティを使用します.

    • ブラウザサポート:


    ブラウザサポート

    関連記事

  • HTML
    Definition Description Tag
  • HTML
    Center Tag
  • Basic HTML Definitions and Usages in the Real World
  • HTML Code Tag
  • HTML Aside Tag
    • 郵便HTML イメージタグが最初に登場Share Point Anchor .
    Python---wordcloudライブラリのインストール
    MySQLリモート接続