![\"HTML畫像タグ\"](\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/172543801989409.png\")
<\/p>\n![\"Ferrari](\"car.png\")
<\/pre>\n
HTML畫像タグ
Sep 04, 2024 pm 04:20 PM
HTML は、複數(shù)の形式のプログラミング言語で Web ベースのアプリケーションを?qū)g裝できるようにするプレーン テキスト ドキュメントであり、Web ページの機(jī)能を記述するためにタグを使用します。このような必須タグの 1 つは、開発者が畫像ファイルをコードに組み込んで、Web ページ上にそれぞれの畫像を表示できるようにする畫像タグです。この構(gòu)文は です。ここで、「image」はタグ名で、「src=」には必要な畫像の URL が割り當(dāng)てられている必要があります。このトピックでは、HTML 畫像タグについて學(xué)習(xí)します。
Web ページに畫像を追加する
を使用して IMG を HTML ページに追加できます。 HTML ドキュメント內(nèi)のタグ。構(gòu)文は次のとおりです:
<img src= enter the IMG URL here >
ここで、IMG は、タグがドキュメントへの IMG の追加に関するものであることをブラウザーに伝え、「src=」は畫像のダウンロード元を指定します。
畫像を含むページの例
コード:
<!DOCTYPE html> <html> <head> <title> Example HTML IMG Tag </title> </head> <body> <img src = " https://cdn.educba.com/academy/wp-content/uploads/2019/02/Software-Dev.jpg" alt = " Software development icon " height = " 150 " width = "140" /> </body> </html>
出力:
これらの HTML ページに関する興味深い事実の 1 つは、IMG タグを使用すると、畫像が當(dāng)該 Web ページに挿入されないことです。代わりに、ダウンロードされた畫像が配置される保持スペースが作成されます。
ブラウザのサポートと屬性の互換性
ご想像のとおり、最新のブラウザはすべて畫像と IMG タグの使用をサポートしています。畫像がレスポンシブに設(shè)定されていない場合、モバイル ブラウザは畫面に合わせて畫像のサイズを変更することがあります。
HTML 4.01 および新しい HTML5 との屬性の互換性に関しては、aligning、border、hspace、space を除き、ほとんどのタグが機(jī)能します。これらのタグは単純に後者ではサポートされていません。
リンクとしての畫像:
畫像を別のページへのリンクとして機(jī)能させたい場合があります。これを行うには、 內(nèi)に IMG タグを追加します。タグ。
Web ページの背景として畫像を設(shè)定する
ページの Body 要素で background-image CSS プロパティを使用すると、Web ページの背景畫像として畫像を割り當(dāng)てることができます。
<body style="background-image:url(‘car.jpg');"> <h1>Background Image </h1> </body>
ブラウザ內(nèi)で畫像をフローティングに設(shè)定する
CSS プロパテ?！竑loat」を使用して、ブラウザ ウィンドウ內(nèi)の任意の場所に畫像をフロート表示するように設(shè)定できます。理解を助ける例を見てみましょう。
<p> <img src="car.png" alt="Ferrari Car " style="float: right; width:40px; height: 40px;">
ここでは、車の畫像がテキストの右側(cè)に表示されます。
<p><img src=" car.png " alt=" Ferrari Car " style="float: left; width: 40px; height: 40px;">
ここでは、車の畫像がテキストの左側(cè)に表示されます。
畫像タグの屬性
以下はイメージタグの屬性です。
1) 整列
可能な値: 上、下、中央、左、右。
alight 屬性は、Web ページ上の畫像の配置を指定するために使用されます。
2) Alt
値のタイプ: テキスト
Alt は、Web ページの畫像の代替テキストを指定するために使用されます。 IMG を表示できない場合、ブラウザはこのテキストをユーザーに表示します。 Google や Bing などの検索エンジンは、この代替テキストを使用して畫像検索に結(jié)果を表示します。
3) ボーダー
値の種類: ピクセル
畫像の周囲にユーザー定義の太さの境界線を作成するために使用されます。 HTML5 では動(dòng)作しません。
4) クロスオリジン
値の種類: 匿名使用資格情報(bào)
この屬性は、クロスオリジンの寫真をどのように処理するかを指定する場合に使用されます。これは主に、JavaScript Web アプリのキャンバス要素が使用される場合に使用されます。
5) 身長
値のタイプ: パーセンテージまたはピクセル
これは、HTML Web ページ內(nèi)の畫像の高さを示すために使用されます。
6) hspace
値の種類: ピクセル
HTML5 ではサポートされていません。hspace 屬性は、挿入された畫像の左右に追加される空白の量をピクセル?yún)g位で指定するために使用されます。
7) ismap
値のタイプ: ページの URL
ismap は、上記のイメージをサーバー側(cè)のイメージ マップとして定義するために使用しました。ユーザーが畫像內(nèi)をクリック (またはタップ) すると、ブラウザーはクリック (またはタップ) 座標(biāo)を URL として Web サーバーに送信します。
8) 長機(jī)
値の種類: URL
Longdesc は、URL を使用して畫像の詳細(xì)な説明を提供します。屬性內(nèi)の URL は畫像の説明として使用されます。
9) ソース
値の種類: URL
src はソースを表します。これは、ブラウザが畫像を取得するアドレスを指定するために使用されます。この URL は、同じサーバー上のディレクトリ內(nèi)の畫像に適用できます。また、畫像を別のドメイン名でサードパーティのサーバーに保存することもできます。
10) ユースマップ
値のタイプ: #mapname
usemap 屬性は、クライアント側(cè)のイメージ マップのイメージを定義します。 usemap は常にマップおよびエリアの HTML タグとともに使用されます。
11) vspace
値の種類: ピクセル
HTML5 ではサポートされていません。Vspace 屬性は、Web ページ上の畫像の上部と下部の空白として使用されるピクセル數(shù)を設(shè)定するために使用されます。
12) 幅
値の種類: ピクセル
名前が示すとおり、width 屬性は HTML Web ページ內(nèi)の畫像の幅を指定するために使用されます。
結(jié)論 – HTML 畫像タグ
畫像を HTML ページに追加する方法とその屬性を設(shè)定する方法を説明したので、Web プロジェクトで魅力的な Web ページを作成できます。
畫像は、Web ページに視覚的なセンスを加えるだけでなく、検索エンジンの最適化にも役立つため、価値があります。畫像に適切な alt タグと説明を追加すると、検索エンジンが Web ページのコンテンツをよりよく理解し、多くの場合 Web ページのランキングが向上します。
以上がHTML畫像タグの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。
ホットAIツール
Undress AI Tool
脫衣畫像を無料で
Undresser.AI Undress
リアルなヌード寫真を作成する AI 搭載アプリ
AI Clothes Remover
寫真から衣服を削除するオンライン AI ツール。
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中國語版
中國語版、とても使いやすい
ゼンドスタジオ 13.0.1
強(qiáng)力な PHP 統(tǒng)合開発環(huán)境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
8638
17
1783
16
1728
56
1579
28
1444
31
Webページを構(gòu)築するための重要なHTML要素は何ですか？
Jul 03, 2025 am 02:34 AM
Webページ構(gòu)造は、Core HTML要素でサポートする必要があります。 1.ページの全體的な構(gòu)造は、メタ情報(bào)を保存してコンテンツを表示するルート要素であるルート要素で構(gòu)成されています。 2。コンテンツ組織は、組織構(gòu)造とSEOを改善するために、タイトル（ - ）、パラグラフ（）、およびブロックタグ（など）に依存しています。 3.ナビゲーションは実裝され、実裝され、一般的に使用される組織にはリンクされ、ARIA-CURRENT屬性が補(bǔ)完され、アクセシビリティが強(qiáng)化されます。 4。フォームインタラクションは、、、完全なユーザー入力と提出機(jī)能を確保するための、、および、、、、および、これらの要素を適切に使用すると、ページの明確さ、メンテナンス、検索エンジンの最適化が向上する可能性があります。
HTML5サーバーセントイベントでの再接続とエラーの処理。
Jul 03, 2025 am 02:28 AM
HTML5SSEを使用する場合、再接続とエラーに対処する方法には次のものが含まれます。1。デフォルトの再接続メカニズムを理解します。 EventSourceは、デフォルトで接続が中斷されてから3秒後に再試行します。再試行フィールドを介して間隔をカスタマイズできます。 2.接続障害または解析エラーに対処するためにエラーイベントを聞いて、自動(dòng)再接続に依存しているネットワークの問題、サーバーエラーが手動(dòng)で再接続を遅らせる、認(rèn)証障害の更新トークンなど、対応するロジックを?qū)g行し、実行するロジックを?qū)g行します。 3.接続の手動(dòng)での閉鎖と再構(gòu)築、再試行時(shí)間の最大數(shù)を設(shè)定するなど、再接続ロジックを積極的に制御し、ナビゲーターを組み合わせてネットワークステータスを判斷して再試行戦略を最適化します。これらのメジャーは、アプリケーションの安定性とユーザーエクスペリエンスを改善できます。
最新のページの正しいHTML5 Doctypeを宣言します。
Jul 03, 2025 am 02:35 AM
Doctypeは、ページを解析するために使用するHTML標(biāo)準(zhǔn)をブラウザに伝えるステートメントです。最新のWebページは、HTMLファイルの先頭に記述するだけです。その機(jī)能は、ブラウザが奇妙なモードではなく標(biāo)準(zhǔn)モードでページをレンダリングし、その前にスペースやコメントがない最初の行に配置する必要があることを確認(rèn)することです。それを書く正しい方法は1つだけであり、古いバージョンやその他のバリアントを使用することはお?jiǎng)幛幛筏蓼护蟆?charset、viewportなどのその他は、部分的に配置する必要があります。
HTML屬性を使用したクライアント側(cè)フォーム検証の実裝。
Jul 03, 2025 am 02:31 AM
client-sideformvalidationcanbedonewithoutjavascriptbyusinghtmlattributes.1）userequedtoeenforcemandatoryfields.2）validateemailsandurlswitttributeslikemailorurl、orusepatternwithregexforcustomformats.3）
HTMLを使用して選択したドロップダウン內(nèi)でオプションをグループ化する方法は？
Jul 04, 2025 am 03:16 AM
HTMLのタグを使用して、ドロップダウンメニューにオプションをグループ化します。特定の方法は、次のような要素のグループを包み、ラベル屬性を介してグループ名を定義することです。1。リンゴ、バナナ、オレンジなどのオプションが含まれます。 2。ニンジン、ブロッコリーなどのオプションが含まれています。 3。それぞれが獨(dú)立したグループであり、グループ內(nèi)のオプションは自動(dòng)的にインデントされます。メモには以下が含まれます。 firsedグループ全體を無効にする屬性を介して無効にすることができます。 styleスタイルは制限されており、CSSまたはサードパーティライブラリと組み合わせて美化する必要があります。 select2などのプラグインを使用して機(jī)能を強(qiáng)化できます。
HTMLボタン要素を使用してクリック可能なボタンを?qū)g裝します
Jul 07, 2025 am 02:31 AM
HTMLボタン要素を使用してクリック可能なボタンを?qū)g現(xiàn)するには、まずその基本的な使用法と一般的な予防策を習(xí)得する必要があります。 1.デフォルトで送信されるタイプ屬性（ボタン、送信、リセットなど）を使用してタグを使用してボタンを作成し、動(dòng)作を定義します。 2. JavaScriptを介してインタラクティブな関數(shù)を追加します。これは、IDを介してインラインまたはバインドイベントリスナーを作成してメンテナンスを改善することができます。 3. CSSを使用して、バックグラウンドカラー、ボーダー、丸いコーナー、ホバー/アクティブステータス効果などのスタイルをカスタマイズして、ユーザーエクスペリエンスを強(qiáng)化します。 4.一般的な問題に注意してください：無効な屬性が有効になっていないことを確認(rèn)し、JSイベントが正しくバインドされ、レイアウトオクルージョンがあり、開発者ツールのヘルプを使用して例外をトラブルシューティングします。これをマスターします
CSSとJavaScriptをHTML5構(gòu)造と効果的に統(tǒng)合します。
Jul 12, 2025 am 03:01 AM
HTML5、CSS、およびJavaScriptは、セマンティックタグ、妥當(dāng)な読み込み順序、デカップリング設(shè)計(jì)と効率的に組み合わせる必要があります。 1. SEOやバリアのないアクセスを助長する構(gòu)造の明確性と保守性の向上など、HTML5セマンティックタグを使用します。 2。CSSを配置し、外部ファイルを使用し、モジュールごとに分割して、インラインスタイルと遅延荷重問題を回避する必要があります。 3. JavaScriptは、前に導(dǎo)入され、Deferまたは非同期を使用して非同期にロードすることをお?jiǎng)幛幛筏蓼埂?4. 3つの間の強(qiáng)い依存性を減らし、データ - *屬性とクラス名制御ステータスを介して動(dòng)作を促進(jìn)し、統(tǒng)一された命名仕様を介してコラボレーション効率を改善します。これらの方法は、ページのパフォーマンスを効果的に最適化し、チームと協(xié)力することができます。
新しいHTML5メソッド（FormData）を使用してフォームデータを送信する
Jul 08, 2025 am 02:28 AM
HTML5のFormData APIを使用してフォームデータを送信する方が便利です。 1.名前屬性を持つフォームフィールドを自動(dòng)的に収集したり、データを手動(dòng)で追加したりできます。 2.ファイルのアップロードに適したMultiPart/Form-Data形式での送信をFetchまたはXmlhttpRequestを介してサポートします。 3.ファイルを処理する場合、FormDataにファイルを追加してリクエストを送信する必要があります。 4.同じ名前のフィールドが上書きされ、JSON変換とネスト構(gòu)造を処理する必要はないことに注意してください。
