HTML画像
インスタンス
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <h2>Norwegian Mountain Trip</h2> <img border="0" src="https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg" alt="Pulpit rock" width="304" height="228"> </body> </html>
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
オンラインインスタンス
この例は、次の方法を示していますウェブ上に画像を表示するページ。
インスタンス
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <p> 一个图像: <img src="/upload/course/000/000/010/58046a2b7e46d104.gif" alt="Smiley face" width="32" height="32"></p> <p> 一个动图: <img src="/upload/course/000/000/010/58046a41c6e3c115.gif" alt="Computer man" width="48" height="48"></p> <p> 注意插入动图的语法和静态图的语法是一样的。 </p> </body> </html>
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
別の場所から写真を挿入します
この例では、他のフォルダーまたはサーバーから画像を表示する方法を示します。ウェブページ 。
インスタンス
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <p>一个来自文件夹中的图像:</p> <img src="/upload/course/000/000/010/58046b14a8b9f738.gif" alt="Google Chrome" width="33" height="32"><p>一个来自php中文网的图像:</p> <img src="/upload/course/000/000/010/58046c29b47ef575.png" alt="php.cn" width="336" height="69"> </body> </html>
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
(他の例はこのページの下部にあります。)
HTML画像 - 画像タグ (<img>) とソース属性 (Src)
HTML では、画像は <img> タグで定義されます。
<img> は空のタグです。つまり、属性のみが含まれており、終了タグがありません。
ページに画像を表示するには、source 属性 (src) を使用する必要があります。 src は「ソース」を指します。 source 属性の値は、画像の URL アドレスです。
画像を定義するための構文は次のとおりです:
<img src="url" alt="some_text">
URL は画像が保存されている場所を指します。 「../style/images/boat.gif」という名前の画像が www.php.cn の画像ディレクトリにある場合、その URL は http://www.php.cn/images/boat.gif です。
ブラウザは、イメージタグが表示されるドキュメント内のイメージを表示します。 2 つの段落の間にイメージ タグを配置すると、ブラウザでは最初に最初の段落が表示され、次にイメージが表示され、最後に 2 番目の段落が表示されます。
HTML 画像 - Alt 属性
alt 属性は、画像用に用意された代替テキストの文字列を定義するために使用されます。
置換テキスト属性の値はユーザー定義です。
<img src="../style/images/boat.gif" alt="Big Boat">
ブラウザが画像を読み込めない場合、置換テキスト属性は読者に失われた情報を伝えます。この時点で、ブラウザには画像の代わりにこの代替テキストが表示されます。ページ上のすべての画像に alt テキスト属性を追加することをお勧めします。これは、情報をより適切に表示するのに役立ち、テキストのみのブラウザを使用する場合に非常に便利です。
HTML 画像 - 画像の高さと幅を設定します
height (高さ) 属性と width (幅) 属性は、画像の高さと幅を設定するために使用されます。
属性値のデフォルトの単位はピクセルです:
<img src="../style/images/pulpit.jpg" alt="Pulpit rock" width="304" height="228">
ヒント: 画像の高さと幅を指定することを習慣にしてください。画像の高さと幅が指定されている場合、ページの読み込み時に指定されたサイズが保持されます。画像のサイズが指定されていない場合、ページが読み込まれるときに HTML ページ全体のレイアウトが崩れる可能性があります。
基本的なメモ - 役立つヒント:
注: HTML ファイルに 10 個の画像が含まれている場合、ページを正しく表示するには、11 個のファイルをロードする必要があります。画像の読み込みには時間がかかるため、画像の使用には注意が必要です。
注: ページをロードするときは、ページ画像を挿入するパスに注意してください。画像の位置が正しく設定できない場合、ブラウザは画像をロードできず、画像タグに壊れた画像が表示されます。
その他の例
1. 画像を配置する
この例は、テキスト内の画像を配置する方法を示します。
例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <h4>默认对齐的图像 (align="bottom"):</h4> <p>这是一些文本。 <img src="/upload/course/000/000/010/58046a2b7e46d104.gif" alt="Smiley face" width="32" height="32"> 这是一些文本。</p> <h4>图片使用 align="middle":</h4> <p>这是一些文本。 <img src="/upload/course/000/000/010/58046a2b7e46d104.gif" alt="Smiley face" align="middle" width="32" height="32">这是一些文本。</p> <h4>图片使用 align="top":</h4> <p>这是一些文本。 <img src="/upload/course/000/000/010/58046a2b7e46d104.gif" alt="Smiley face" align="top" width="32" height="32">这是一些文本。</p> <p><b>注意:</b>在HTML 4中 align 属性已废弃，HTML5 已不支持该属性，可以使用 CSS 代替。</p> </body> </html>
[例の実行] ボタンをクリックしてオンライン例を表示します
2. フローティング画像
この例では、画像を左側または右側にフローティングさせる方法を示します。段落。
インスタンス
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <p> <img src="/upload/course/000/000/010/58046a2b7e46d104.gif" alt="Smiley face" style="float:left" width="32" height="32"> 一个带图片的段落，图片浮动在这个文本的左边。 </p> <p> <img src="/upload/course/000/000/010/58046a2b7e46d104.gif" alt="Smiley face" style="float:right" width="32" height="32"> 一个带图片的段落，图片浮动在这个文本的右边。 </p> <p><b>注意:</b> 在这里我们使用了 CSS "float" 属性，在HTML 4中 align 属性已废弃，HTML5 已不支持该属性，可以使用 CSS 代替。</p> </body> </html>
「インスタンスを実行」ボタンをクリックしてオンラインインスタンスを表示します
3. 画像リンクを設定する
この例は、画像をリンクとして使用する方法を示しています。
インスタンス
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <p>创建图片链接: <a href="http://www.php.cn/html/html-tutorial.html"> <img src="/upload/course/000/000/010/58046a2b7e46d104.gif" alt="HTML 教程" width="32" height="32"></a></p> <p>无边框的图片链接: <a href="http://www.php.cn/html/html-tutorial.html"> <img border="0" src="/upload/course/000/000/010/58046a2b7e46d104.gif" alt="HTML 教程" width="32" height="32"></a></p> </body> </html>
「インスタンスを実行」ボタンをクリックしてオンラインインスタンスを表示します
4. イメージマップを作成する
この例は、クリック可能な領域を含むイメージマップを作成する方法を示しています。これらの各フィールドはハイパーリンクです。
インスタンス
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <p>点击太阳或其他行星，注意变化：</p> <img src="/upload/course/000/000/010/58046db4ca85a572.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm"> <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm"> <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm"> </map> </body> </html>
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
HTML画像タグ
| タグ | 説明 |
|---|---|
| <img> ; | 画像を定義 |
| <マップ> | 画像マップを定義 |
| <エリア> | 画像マップ内のクリック可能な領域を定義 |
