HTML 挿入画像の例 (HTML 追加画像)

HTML 挿入画像の例 (HTML 追加画像)

HTML に画像を挿入するには、画像を表示するための HTML タグが必要です。これは、img タグを使用して実現できます。

1. HTML画像タグ構文


コードをコピー
コードは次のとおりです。

<img src="divcss5-logo-201305.gif" 幅="165" 高さ="60" />

画像紹介:

srcの後に画像パスアドレスが続きます

幅 画像の幅を設定する

高さ 画像の高さを設定する

2. 具体的なHTML画像表示例 - TOP

HTML ソース コードに 3 つの画像を挿入します。1 つは元のサイズ、1 つは幅と高さが小さいもの、1 つは幅と高さが大きいものになります。

1. 例の完全な HTML コード:


コードをコピー
コードは次のとおりです。

<!DOCTYPE html>
<html>
<ヘッド>
<メタ文字セット="utf-8" />
<title>画像挿入 HTML オンライン デモ <a href="http://www.vcss.com</title">www.vcss.com</title</a>>
</head>

<本文>
<p>元の大きな画像</p>
<p>
<img src="divcss5-logo-201305.gif" 幅="165" 高さ="60" />
</p>
<p>小さい画像</p>
<p>
<img src="divcss5-logo-201305.gif" 幅="105" 高さ="30" />
</p>
<p>画像を拡大する</p>
<p>
<img src="divcss5-logo-201305.gif" 幅="365" 高さ="120" />
</p>
</本文>
</html>

2. HTMLに画像を挿入する例のスクリーンショット

HTML 画像挿入表示例のスクリーンショット

<<:  Windows で Nginx を使用して https サーバーとリバース プロキシを構成する際の問題

>>:  ピクセルを包括的なブランド体験に変えるヒント

推薦する

CSSブロッキングマージとその他の効果についての簡単な説明

非直交マージンマージンを使用するとマージが発生します次のプロパティはマージンの結合を防止します。国境...

ウェブデザインの概要

<br />1998年に最初の個人ページが誕生してから2008年の今日まで、デザイン業界...

CSS スタイルの優先順位はどれくらい複雑ですか?

昨晩、面接の質問を見ていたら、CSS スタイルの優先順位について特に明確に説明していない人が何人かい...

nodejsとyarnをインストールし、Taobaoソースプロセスレコードを構成する

目次1. nodejsをダウンロードする2. ダブルクリックしてインストール3. グローバル npm...

ウェブページ作成に役立つコード

<br />ホームページの右側にあるスクロールバーを削除するにはどうすればよいですか? ...

Docker コンテナ データ ボリュームの名前付きマウントと匿名マウントの問題

目次コンテナデータボリュームとはコンテナ データ ボリュームが必要なのはなぜですか?使用データボリュ...

SQL 文を使用してデータを収集する場合の sum 関数と count 関数の if 判定条件の使用法の説明

まず、例を挙げてみましょう(読みたくない場合は、以下の要約だけ読んでください)。 order_typ...

jsを使用してシンプルな虫眼鏡効果を実現します

この記事では、簡単な虫眼鏡効果を実現するためのjsの具体的なコードを参考までに共有します。具体的な内...

WeChatアプレットが弾丸画面を送信するビデオプレーヤーを実装

この記事では、WeChatアプレットでビデオプレーヤーの集中砲火を実装するための具体的なコードを参考...

WeChatアプレット学習ノート: ページ構成とルーティング

最近、小さなプログラムの開発を勉強して見直しており、学習結果のいくつかをメモしています。公式の We...

CSS で隠し要素を実現する 7 つの興味深い方法

序文非表示要素の 3 つの属性である表示、可視性、不透明度の類似点と相違点は、フロントエンドの就職面...

WeChatアプレットはシンプルな手書き署名コンポーネントを実装します

目次背景:必要:効果1. アイデア2. 実装1. ページとスタイル2. 初期化3. クリックすると4...

Mysql の主キー インデックスと非主キー インデックスの違いについて簡単に説明します。

目次インデックスとは何か主キーインデックスと通常のインデックスの違いインデックスにはどのデータ構造が...