ホームページ ウェブフロントエンド htmlチュートリアル HTML/XHTMLでimgイメージタグを使用する方法

HTML/XHTMLでimgイメージタグを使用する方法

Jan 24, 2018 am 09:22 AM
html xhtml ラベル

今回は HTML/XHTML で img image タグを使用する方法を説明します。 HTML/XHTML で img image タグを使用する際の 注意点 は何ですか?実際の事例を見てみましょう。

imageタグはWebページに画像を表示するために使用されます。

HTML/XHTML 画像
XHTML では、表示する画像を定義するために タグが使用されます。 はペアになっていないタグです。

基本構文:

タグは src

属性 を通じて画像のソースを決定し、url は相対または絶対画像アドレスです。

イメージタグ属性:

src:
imageソース、必須。表示される画像のソース アドレスを相対アドレスまたは絶対アドレスで指定します。 alt: 代替テキスト。省略可能。画像が表示できない場合やブラウザが画像をブロックした場合に表示されるテキストを置き換えるのに使用されます。
タイトル: 画像プロンプトテキスト。省略可能。マウスを画像の上に置くと、関連するテキストが表示されます。

width: 画像表示の幅、省略可能。単位はピクセルです。
height: 画像表示の高さ。省略可能。単位はピクセルです。

テキスト置換属性(alt)

画像タグaltのテキスト置換属性は必須属性ではありませんが、非常に重要な属性です。ブラウザが何らかの理由で画像の読み取りに失敗した場合、この代替テキストが表示されて、元の画像が置き換えられ、失われた関連画像情報が提供されます。この属性は、テキスト専用ブラウザを使用しているユーザーがページのコンテンツを理解するのにも役立ちます。
そのため、各画像に意味のある代替テキスト置換属性を追加することをお勧めします。

画像の表示サイズを指定します

幅または高さの属性を タグに追加して、画像の表示サイズを手動で指定できます:

ヒント

通常の状況では、画像のサイズ属性は次のようになります。無視され、元の画像サイズがデフォルトで表示されるか、デバイスの適応サイズ表示を参照します。不適切な画像表示サイズを指定すると、画像が乱れて表示される場合があります。
画像の読み込みにはある程度の時間がかかるため、良好なユーザーアクセスエクスペリエンスを実現するには、画質を確保しながら画像のサイズを削減するように努める必要があります。

拡張読書

ピクセル: ピクセルとは、コンピューターが表示できる最小の点であるとよく考えられます。たとえば、画面の解像度は 1024*768 であるとよく言われます。これは、画面上に水平に 1024 (ピクセル) あることを意味します。 ) ポイントは縦に 768 (ピクセル) あります。単位として使用する場合、通常はデフォルトで pix と表記されます。

これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

関連書籍:

テーブルに境界線を表示する方法

HTMLでダウンロード機能を実装する方法

HTML要素をマークするときのクラスとIDの違いは何ですか

以上がHTML/XHTMLでimgイメージタグを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

HTMLの表の境界線 HTMLの表の境界線 Sep 04, 2024 pm 04:49 PM

HTML の表の境界線に関するガイド。ここでは、HTML でのテーブルの境界線の例を示しながら、テーブル境界線を定義する複数の方法について説明します。

HTML 左マージン HTML 左マージン Sep 04, 2024 pm 04:48 PM

HTML マージン左のガイド。ここでは、HTML margin-left の概要とその例、およびそのコード実装について説明します。

HTML のネストされたテーブル HTML のネストされたテーブル Sep 04, 2024 pm 04:49 PM

これは、HTML でのネストされたテーブルのガイドです。ここでは、テーブル内にテーブルを作成する方法をそれぞれの例とともに説明します。

HTML テーブルのレイアウト HTML テーブルのレイアウト Sep 04, 2024 pm 04:54 PM

HTML テーブル レイアウトのガイド。ここでは、HTML テーブル レイアウトの値と例および出力について詳しく説明します。

HTML 順序付きリスト HTML 順序付きリスト Sep 04, 2024 pm 04:43 PM

HTML 順序付きリストのガイド。ここでは、HTML 順序付きリストと型の導入とその例についても説明します。

HTML入力プレースホルダー HTML入力プレースホルダー Sep 04, 2024 pm 04:54 PM

HTML 入力プレースホルダーのガイド。ここでは、コードと出力とともに HTML 入力プレースホルダーの例について説明します。

HTML 内のテキストの移動 HTML 内のテキストの移動 Sep 04, 2024 pm 04:45 PM

HTML でのテキストの移動に関するガイド。ここでは、概要、マーキー タグが構文でどのように機能するか、および実装例について説明します。

HTML の onclick ボタン HTML の onclick ボタン Sep 04, 2024 pm 04:49 PM

HTML オンクリック ボタンのガイド。ここでは、それらの紹介、動作、例、およびさまざまなイベントでの onclick イベントについてそれぞれ説明します。

See all articles