ホームページ >ウェブフロントエンド >htmlチュートリアル >HTML画像の基礎知識を詳しく解説
HTML画像の基礎知識を詳しく解説
- 小云云オリジナル
- 2018-03-05 14:10:242076ブラウズ
この記事では、HTML 画像の基本的な知識、つまり画像タグ (a1f02c36ba31691bcfe87b2722de723b) とソース属性 (Src) について詳しく説明します。HTML では、画像は a1f02c36ba31691bcfe87b2722de723b タグによって定義されます。 a1f02c36ba31691bcfe87b2722de723b は空のタグです。これは、属性のみが含まれ、終了タグが含まれていないことを意味します。
ページに画像を表示するには、source 属性 (src) を使用する必要があります。 src は「ソース」を指します。 source 属性の値は、画像の URL アドレスです。
画像を定義するための構文は次のとおりです:
<img src="url" alt="some_text">
URL は画像が保存されている場所を指します。 「pulpit.jpg」という名前の画像が www.runoob.com の画像ディレクトリにある場合、その URL は https://img.php.cn/upload/article/000/054/025/69ee4cbf3049b8bcc16a7e91b3657b16-0 です。 jpg .
ブラウザは、イメージタグが表示されるドキュメント内のイメージを表示します。 2 つの段落の間にイメージ タグを配置すると、ブラウザでは最初に最初の段落が表示され、次にイメージが表示され、最後に 2 番目の段落が表示されます。
HTML 画像 - Alt 属性
alt 属性は、画像用に用意された置換可能なテキストの文字列を定義するために使用されます。
置換テキスト属性の値はユーザー定義です。
<img src="boat.gif" alt="Big Boat">
ブラウザが画像を読み込めない場合、置換テキスト属性により、失われた情報が読者に伝えられます。この時点で、ブラウザには画像の代わりにこの代替テキストが表示されます。ページ上のすべての画像に alt テキスト属性を追加することをお勧めします。これは、情報をより適切に表示するのに役立ち、テキストのみのブラウザを使用する場合に非常に便利です。
HTML 画像 - 画像の高さと幅を設定します
height (高さ) 属性と width (幅) 属性は、画像の高さと幅を設定するために使用されます。
属性値のデフォルトの単位はピクセルです:
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">
ヒント: 画像の高さと幅を指定することをお勧めします。画像の高さと幅が指定されている場合、ページの読み込み時に指定されたサイズが保持されます。画像のサイズが指定されていない場合、ページが読み込まれるときに HTML ページ全体のレイアウトが崩れる可能性があります。
基本的なメモ - 役立つヒント:
注: HTML ファイルに 10 個の画像が含まれている場合、ページを正しく表示するには、11 個のファイルをロードする必要があります。画像の読み込みには時間がかかるため、画像の使用には注意が必要です。
注: ページをロードするときは、ページ画像を挿入するパスに注意してください。画像の位置が正しく設定できない場合、ブラウザは画像をロードできず、画像タグに壊れた画像が表示されます。
HTML画像タグ
| タグ | 説明 |
|---|---|
| a1f02c36ba31691bcfe87b2722de723b | 画像を定義 |
| d128535f2b39761ec0ba3ce88248f956 | 画像マップを定義 |
| 3d030ebd0af6c4de4f67c08a81411c56 | 画像マップ内のクリック可能な領域を定義します |
関連おすすめ:
HTML画像に関するおすすめ記事5選
HTML画像の深い理解_html/css_WEB-ITnose
以上がHTML画像の基礎知識を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。