HTML畫像
HTML 畫像 - 畫像タグ (<img>)
HTML では、畫像は <img> タグで定義されます。 <img> は空のタグです。つまり、屬性のみが含まれており、終了タグがありません。HTML 畫像 - ソース屬性 (Src)
ページに畫像を表示するには、ソース屬性 (src) を使用する必要があります。 src は「ソース」を指します。畫像が保存されている場(chǎng)所を指します 畫像と HTML テキストが同じディレクトリにある場(chǎng)合: たとえば、index.html と img.jpg 書き方: <img src="img.jpg">畫像と HTML が同じディレクトリにありません: 以下の 2 つの狀況があります: 1. 畫像 img.jpg は、images フォルダー內(nèi)にあり、index.html と image フォルダーは同じディレクトリ內(nèi)にあります。 : <img src="images/img.jpg" >2. 畫像 img.jpg は image フォルダーにあり、index.html はコントローラー フォルダーにあり、畫像とコントローラー フォルダーは同じディレクトリにあります
書き込み: <img src="../images/ img.jpg">ソースがインターネットからのものである場(chǎng)合は、絶対パスを使用する必要があります書き込み: <img src="http:// www.baidu.com/pic/img.jpg">
HTML 畫像 - Alt 屬性
alt 屬性は、畫像用に用意された置換可能なテキストの文字列を定義するために使用されます。
置換テキスト屬性の値はユーザー定義です。
<img src="1.jpg" alt="畫像を表示できない場(chǎng)合に表示する">
ブラウザが畫像を読み込めない場(chǎng)合、置換テキスト屬性は読者に情報(bào)を伝えます。失いました 。この時(shí)點(diǎn)で、ブラウザには畫像の代わりにこの代替テキストが表示されます。ページ上のすべての畫像に alt テキスト屬性を追加することをお?jiǎng)幛幛筏蓼埂￥长欷?、情?bào)をより適切に表示するのに役立ち、テキストのみのブラウザを使用する場(chǎng)合に非常に便利です。
HTML 畫像 - 畫像の高さと幅を設(shè)定します height (高さ) 屬性と width (幅) 屬性は、畫像の高さと幅を設(shè)定するために使用されます。
屬性値のデフォルトの単位はピクセルです:
<img src="../style/images/pulpit.jpg" alt="説教壇の巖" width="304" height="228">ヒント
: 畫像の高さと幅を指定するのは良い習(xí)慣です。畫像の高さと幅が指定されている場(chǎng)合、ページの読み込み時(shí)に指定されたサイズが保持されます。畫像のサイズが指定されていない場(chǎng)合、ページを読み込むときに HTML ページ全體のレイアウトが崩れる可能性があります。 基本的な注意事項(xiàng) 注: HTML ファイルに 10 個(gè)の畫像が含まれている場(chǎng)合、このページを正しく表示するには、11 個(gè)のファイルをロードする必要があります。畫像の読み込みには時(shí)間がかかるため、畫像の使用には注意が必要です。 注意: ページをロードするときは、ページ畫像を挿入するパスに注意してください。畫像の位置が正しく設(shè)定できない場(chǎng)合、ブラウザは畫像をロードできず、畫像タグに壊れた畫像が表示されます。 例 Webページに背景畫像を追加します プログラムを?qū)g行して変更があるかどうか確認(rèn)してください 例 この例はその方法を示しています寫真のサイズをさまざまなサイズに変更します。 プログラムを?qū)g行して確認(rèn)してください 例 畫像を使用してハイパーリンクを作成してください プログラムを?qū)g行して、畫像をクリックして確認(rèn)してください 例 これ例は、通常の畫像をイメージマップとして設(shè)定する方法を示しています 実行して確認(rèn)してください HTML畫像タグ<!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>如果圖像小于頁(yè)面，圖像會(huì)進(jìn)行重復(fù)。</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>通過(guò)改變 img 標(biāo)簽的 "height" 和 "width" 屬性的值，您可以放大或縮小圖像。</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>php.cn</title>
</head>
<body>
<p>創(chuàng)建圖片鏈接:
<a href="http://www.miracleart.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>請(qǐng)把鼠標(biāo)移動(dòng)到圖像上，看一下狀態(tài)欄的坐標(biāo)如何變化。</p>
<a href="">
<img src="http://p11.qhimg.com/t010fae31f5653bffe7.jpg" ismap />
</a>
</body>
</html>
