ホームページ >ウェブフロントエンド >htmlチュートリアル >html imgタグの使用

html imgタグの使用

韦小宝オリジナル: 2017-12-02 10:26:273487ブラウズ

この記事では、

htmlのimageタグのさまざまな機能について詳しく説明します。htmlのimgタグも非常にシンプルで使いやすいです。見てみましょう！ img は、次のような相対パスを使用してこの

map

画像を表示します:

<img src="./imgs/002.jpg">

開発のヒント: 実際の開発では、通常、imgs フォルダーがプロジェクトディレクトリに作成され、すべての画像リソースは便宜上その中に配置されます。発達。上に示すように、./imgs は画像が見つかるディレクトリであり、/002.jpg は選択される画像です。

img は、次のような絶対パスを使用して Web ページ画像を表示します。

<img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png"/>

img の下には、選択できる属性が多数あります。

1 画像が正しくロードされなかった場合の表示コンテンツを示します。訪問者は画像の使用を知ることができます。

例:

<img src="./imgs/001.jpg12" alt="logo">

表示される結果は次のとおりです:

は、この画像がロゴ画像であることを意味します。

2. alignはテキスト内で画像が配置される位置を示します

上が整列、下が整列、中央が中央に整列します。デフォルトは下揃えです。

2 つのフローティング効果: 左の画像はテキストの左側にフロートし、右の画像はテキストの右側にフローティングします。

3.幅と高さで画像のサイズを変更します

2と3のコードデモは次のとおりです

<p>一张百度logo<img src="./imgs/001.jpg" width="100"/></p>
<p>一张百度logo<img src="./imgs/001.jpg" align="top" width="100"/></p>
<p>一张logo<img src="./imgs/002.jpg" align="bottom" width="100"></p>
<p>百度logo<img src="./imgs/002.jpg" align="middle" width="100"></p>
<p>百度logo<img src="./imgs/002.jpg" align="left" width="100"></p>
<p>百度logo<img src="./imgs/002.jpg" align="right" width="100"></p>

画像はすべて相対パス下のローカル画像です

4.画像をクリックします。別のリンクを開くには

<p>点击图片打开链接 <a href="page1.html" title="点击进入page1界面"> <img src="./imgs/001.jpg" alt="logo" width="200px" align="middle"/></a></p>

Page1.html は別の
HTML ドキュメント

で、コードは次のとおりです:

<html>
<head>
    <title>page1界面</title>
</head>
<body>
    <p>我是page1</p>
</body>
</html>

画像をクリックして page1.html を開きます。

5. 画像マッピング

<img src="page.jpg" border="0" usemap="#page" alt="pages" />
<map name="page" id="page">
    <area shape="circle" coords="180,139,14" href ="page1.html" alt="page1" />
    <area shape="circle" coords="129,161,10" href ="page2.html" alt="page2" />
</map>

では、エリアとマップが一緒に使用され、エリアはマップタグの下にあります。 img の usemap はマップの名前を指します。画像の別の位置をクリックして、2 つの異なるリンク (ページ 1 またはページ 2) を入力します。

上記は HTML img タグの使用に関するすべてです。皆様のお役に立てば幸いです。

html imgタグの使用

関連記事