HTML画像

HTML 画像 - 画像タグ (<img>)

HTML では、画像は <img> タグで定義されます。

<img> は空のタグです。つまり、属性のみが含まれており、終了タグがありません。

HTML 画像 - ソース属性 (Src)

ページに画像を表示するには、ソース属性 (src) を使用する必要があります。 src は「ソース」を指します。画像が保存されている場所を指します

画像と HTML テキストが同じディレクトリにある場合: たとえば、index.html と img.jpg

書き方: <img src="img.jpg">

画像と HTML が同じディレクトリにありません: 以下の 2 つの状況があります:

1. 画像 img.jpg は、images フォルダー内にあり、index.html と image フォルダーは同じディレクトリ内にあります。 : <img src="images/img.jpg" >

2. 画像 img.jpg は image フォルダーにあり、index.html はコントローラーフォルダーにあり、画像とコントローラーフォルダーは同じディレクトリにあります

書き込み: <img src="../images/ img.jpg">

ソースがインターネットからのものである場合は、絶対パスを使用する必要があります

書き込み: <img src="http:// www.baidu.com/pic/img.jpg">

HTML 画像 - Alt 属性

alt 属性は、画像用に用意された置換可能なテキストの文字列を定義するために使用されます。

置換テキスト属性の値はユーザー定義です。

<img src="1.jpg" alt="画像を表示できない場合に表示する">

ブラウザが画像を読み込めない場合、置換テキスト属性は読者に情報を伝えます。失いました。この時点で、ブラウザには画像の代わりにこの代替テキストが表示されます。ページ上のすべての画像に alt テキスト属性を追加することをお勧めします。これは、情報をより適切に表示するのに役立ち、テキストのみのブラウザを使用する場合に非常に便利です。

HTML 画像 - 画像の高さと幅を設定します height (高さ) 属性と width (幅) 属性は、画像の高さと幅を設定するために使用されます。

属性値のデフォルトの単位はピクセルです:

<img src="../style/images/pulpit.jpg" alt="説教壇の岩" width="304" height="228">

ヒント

: 画像の高さと幅を指定するのは良い習慣です。画像の高さと幅が指定されている場合、ページの読み込み時に指定されたサイズが保持されます。画像のサイズが指定されていない場合、ページを読み込むときに HTML ページ全体のレイアウトが崩れる可能性があります。

基本的な注意事項

注: HTML ファイルに 10 個の画像が含まれている場合、このページを正しく表示するには、11 個のファイルをロードする必要があります。画像の読み込みには時間がかかるため、画像の使用には注意が必要です。

注意: ページをロードするときは、ページ画像を挿入するパスに注意してください。画像の位置が正しく設定できない場合、ブラウザは画像をロードできず、画像タグに壊れた画像が表示されます。

例

Webページに背景画像を追加します

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>php.cn</title>
</head>
<body background="http://imglf0.ph.126.net/1EnYPI5Vzo2fCkyy2GsJKg==/2829667940890114965.jpg">
<h3>图像背景</h3>
<p>gif 和 jpg 文件均可用作 HTML 背景。</p>
<p>如果图像小于页面，图像会进行重复。</p>
</body>
</html>

プログラムを実行して変更があるかどうか確認してください

例

この例はその方法を示しています写真のサイズをさまざまなサイズに変更します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>php.cn</title>
</head>
<img src="http://gb.cri.cn/mmsource/images/2007/05/21/pc070521018.jpg" width="50" height="50">
<br />
<img src="http://gb.cri.cn/mmsource/images/2007/05/21/pc070521018.jpg" width="100" height="100">
<br />
<img src="http://gb.cri.cn/mmsource/images/2007/05/21/pc070521018.jpg" width="200" height="200">
<p>通过改变 img 标签的 "height" 和 "width" 属性的值，您可以放大或缩小图像。</p>
</body>
</html>

プログラムを実行して確認してください

例

画像を使用してハイパーリンクを作成してください

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>php.cn</title>
</head>
<body>
<p>创建图片链接:
    <a href="http://www.php.cn/">
        <img src="http://img3.redocn.com/20100401/Redocn_2010022518194991.jpg" alt="HTML 教程" width="100" height="100"></a></p>
</body>
</html>

プログラムを実行して、画像をクリックして確認してください

例

これ例は、通常の画像をイメージマップとして設定する方法を示しています

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>php.cn</title>
</head>
<body>
<p>请把鼠标移动到图像上，看一下状态栏的坐标如何变化。</p>
<a href="">
    <img src="http://p11.qhimg.com/t010fae31f5653bffe7.jpg" ismap />
</a>
</body>
</html>

実行して確認してください

HTML画像タグ

イメージマップを定義します。 A & lt; エリア & gt; 次のセクション

新しいファイル

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>php.cn</title>
</head>
<body background="http://imglf0.ph.126.net/1EnYPI5Vzo2fCkyy2GsJKg==/2829667940890114965.jpg">
<h3>图像背景</h3>
<p>gif 和 jpg 文件均可用作 HTML 背景。</p>
<p>如果图像小于页面，图像会进行重复。</p>
</body>
</html>

提出するリセットコード

自動運転

全画面表示

なし

タグ	説明
<img>	画像を定義します。 M & lt; マップ & gt;
画像マップ内のクリックを定義します。
写真を見つけて指定したディレクトリに置き、ウェブページに挿入してみてください