CodeW3C Online Tutorial
HTML Series Tutorial
اسکریپت مرورگر
اسکریپت سرور
Programming Tutorial
XML Series Tutorial
Website Manual
Reference Manual
جدول درس
Reference Manual
عناصر هتمل (ترتیب الفبایی)
عناصر هتمل (ترتیب عملکرد)
هتمل پشتیبانی از مرورگر
HTML Global Attributes
هتمل رویداد
HTML Color Names
هتمل کانواس
هتمل ویدیو/آوویدئو
HTML Character Set
هتمل وادیی داکومنتی
HTML URL Encoding
هتمل لانگوی کود
HTML ƙodagon ƙasa
HTTP ƙanannan
HTTP ƙararruwar ƙaɗa
Keyboard Shortcuts
HTML ƙirararɗe
<!-->
<!DOCTYPE>
<abbr>
<acronym>
<address>
<applet>
<area>
<article>
<aside>
<audio>
<b>
<base>
<basefont>
<bdi>
<bdo>
<big>
<blockquote>
<body>
<br>
<button>
<canvas>
<caption>
<center>
<cite>
<code>
<col>
<colgroup>
<data>
<datalist>
<dd>
<del>
<details>
<dfn>
<dialog>
<dir>
<div>
<dl>
<dt>
<em>
<embed>
<fieldset>
<figcaption>
<figure>
<font>
<footer>
<form>
<frame>
<frameset>
<h1> - <h6>
<head>
<header>
<hgroup>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<label>
<legend>
<li>
<link>
<main>
<map>
<mark>
<menu>
<meta>
<meter>
<nav>
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
<param>
<picture>
<pre>
<progress>
<q>
<rp>
<rt>
<ruby>
<s>
<samp>
<script>
<search>
<section>
<select>
<small>
<source>
<span>
<strike>
<strong>
<style>
<sub>
<summary>
<sup>
<svg>
<table>
<tbody>
<td>
<template>
<textarea>
<tfoot>
<th>
<thead>
<time>
</a></li> <li><a href="/ha/tags/tag_tr.html" title="Aiki <tr> tag"><tr></a></li> <li><a href="/ha/tags/tag_track.html" title="Aiki <track> tag"><track></a></li> <li><a href="/ha/tags/tag_tt.html" title="Aiki <tt> tag"><tt></a></li> <li><a href="/ha/tags/tag_u.html" title="Aiki <u> tag"><u></a></li> <li><a href="/ha/tags/tag_ul.html" title="Aiki <ul> tag"><ul></a></li> <li><a href="/ha/tags/tag_var.html" title="Aiki <var> tag"><var></a></li> <li><a href="/ha/tags/tag_video.html" title="Aiki <video> tag"><video></a></li> <li><a href="/ha/tags/tag_wbr.html" title="Aiki <wbr> tag"><wbr></a></li> </ul> </div> <div><h3><center> 选修课 </center><h3> <h2>课程推荐：</h2> <ul> <li><a href="/ha/howto/index.html" title="CodeW3C.com Bayarawa">CodeW3C.com Bayarawa</a></li> </ul> </div> </div> <div id="maincontent"> <div class="idea"> <a href="/"><button>English</button></a> <a href="/zh/"><button>中文</button></a> <a href="/oldzh/"><button>繁體中文</button></a> <a href="/ru/"><button>Русский</button></a> <a href="/fr/"><button>Français</button></a> <a href="/de/"><button>Deutsch</button></a> <a href="/es/"><button>Español</button></a> <a href="/pt/"><button>Português</button></a> <a href="/ja/"><button>日本語</button></a> <a href="/ko/"><button>한국어</button></a> <a href="/it/"><button>Italiano</button></a> <a href="/ar/"><button>عربي</button></a> <a href="/hi/"><button>हिंदी</button></a> <a href="/bn/"><button>বাংলা</button></a> <a href="/ms/"><button>Bahasa Malaysia</button></a> <a href="/my/"><button>မြန်မာ</button></a> <a href="/vi/"><button>Tiếng Việt</button></a> <a href="/th/"><button>ภาษาไทย</button></a> <a href="/lo/"><button>ລາວ</button></a> <a href="/id/"><button>Bahasa Indonesia</button></a> <a href="/ur/"><button>اردو</button></a> <a href="/ha/"><button>Hausa</button></a> <a href="/pl/"><button>Język polski</button></a> <a href="/pa/"><button>ਪੰਜਾਬੀ</button></a> <a href="/sv/"><button>Svenska</button></a> <a href="/da/"><button>Dansk</button></a> <a href="/nl/"><button>Nederlands</button></a> <a href="/tr/"><button>Türkçe</button></a> <a href="/fi/"><button>suom.</button></a> <a href="/el/"><button>Ελληνικά</button></a> <a href="/fa/"><button>فارسی</button></a> <a href="/sw/"><button>Kiswahili</button></a> <a href="/te/"><button>తెలుగు</button></a> <a href="/tl/"><button>wikang Galu</button></a> </div> <h1>النمذجة <img></h1> <div class="prenextnav"> <ul> <li> Previous Page <a href="/ha/tags/tag_iframe.html" title="النمذجة <iframe>"><iframe></a></li> <li> Next Page <a href="/ha/tags/tag_input.html" title="النمذجة <input>"><input></a></li> </ul> </div> <div> <h2>定义和用法</h2> <p><code><img></code> 标签用于在 HTML 页面中嵌入图像。</p> <p>从技术上讲，实际上并没有将图像插入到网页中，而是将图像链接到了网页。<code><img></code> 标签创建了一个容器，用于引用图像。</p> <p><code><img></code> 标签有两个必需的属性：</p> <ul> <li><a href="/ha/tags/att_img_src.html" title="Aiki <img> src attribute">src</a> - 规定图像的路径</li> <li><a href="/ha/tags/att_img_alt.html" title="Aiki <img> alt attribute">alt</a> - 如果由于某种原因无法显示图像，则指定图像的替代文本</li> </ul> <p class="important"><span>注意：</span>另外，始终要指定图像的宽度和高度。如果未指定宽度和高度，则在加载图像时页面可能会闪烁。</p> <p class="tip"><span>Koyar da</span>如需将图像链接到另一个文档，只需将 <code><img></code> 标记嵌套在 <a href="/ha/tags/tag_a.html" title="HTML <a> Tag"><a></a> 标签内（请参阅下面的例子）。</p> <h3>另请参阅：</h3> <p>HTML 教程：<a href="/ha/html/html_images.html" title="Aiki Image">Aiki Image</a></p> <p>HTML DOM 参考手册：<a href="/ha/jsref/dom_obj_image.html" title="Aiki DOM Image object">Image 对象</a></p> <p>CSS 教程：<a href="/ha/css/css3_images.html" title="CSS Image Style">设置图像的样式</a></p> <p class="note"><span>延伸阅读：</span><a href="#how-to-use-image">如何正确地使用图像</a></p> </div> <div> <h2>实例</h2> <h3>例子 1</h3> <p>在下面的例子中，我们在页面中插入一幅 CodeW3C.com 的工程师在上海鲜花港拍摄的郁金香照片：</p> <pre class="language-html"> <img src="tulip.jpg" alt="Shanghai Flower Port - Tulip" /> </pre> <p class="tiy"><a target="_blank" href="/ha/tiy/t.html?f=tags_img_1">Try It Yourself</a></p> <img src="/i/photo/tulip.jpg" alt="Shanghai Flower Port - Tulip" style="display: block; margin: 0 auto;" /> <h3>Masanin 2</h3> <p>Wannan shi tasiri na sauri don shigar da foton</p> <pre class="language-html"> <img src="dancer.png" alt="Dancer" width="500" height="749"> </pre> <p class="tiy"><a target="_blank" href="/ha/tiy/t.html?f=tags_img_2">Try It Yourself</a></p> <p class="tip"><span>Koyar da</span>An yi manyan tasiri a tsakiya na tsaiki</p> </div> <div> <h2>Attribute</h2> <table class="dataintable"> <tr> <th style="width:20%;">Attribute</th> <th style="width:30%;">Value</th> <th>Ba da za'a zama foton</th> </tr> <tr> <td><a href="/ha/tags/att_img_alt.html" title="Aiki <img> alt attribute">alt</a></td> <td><i>littafin</i></td> <td>Tsarin nuna hanyar foton don littafin alamar</td> </tr> <tr> <td>crossorigin</td> <td> <ul> <li>anonymous</li> <li>use-credentials</li> </ul> </td> <td>Ba da za'a zama foton daga sayare da foton da a za'a samu samun a sayare ko a yin foton a canvas (canvas) a yin foton</td> </tr> <tr> <td><a href="/ha/tags/att_img_height.html" title="Aiki <img> height attribute">height</a></td> <td><i>像素</i></td> <td>Tsarin nuna hanyar foton don tsayin</td> </tr> <tr> <td><a href="/ha/tags/att_img_ismap.html" title="Aiki <img> ismap attribute">ismap</a></td> <td>ismap</td> <td>Ba da za'a zama foton a matsayin foton da a zama a gaban yau</td> </tr> <tr> <td><a href="/ha/tags/att_img_loading.html" title="Aiki <img> loading attribute">loading</a></td> <td> <ul> <li>eager</li> <li>lazy</li> </ul> </td> <td>Ba da za'a zama foton da a za'a zama hanyar a tsaki, ko ta kuma da kama a zama hanyar a lokaci da sufi dace-dace</td> </tr> <tr> <td><a href="/ha/tags/att_img_longdesc.html" title="Aiki <img> longdesc attribute">longdesc</a></td> <td><i>URL</i></td> <td>Tsarin nuna hanyar foton don URL na tsaiki na zaiyanci</td> </tr> <tr> <td><a href="/ha/tags/att_img_referrepolicy.html" title="Aiki <img> referrerpolicy attribute">referrerpolicy</a></td> <td> <ul> <li>no-referrer</li> <li>no-referrer-when-downgrade</li> <li>origin</li> <li>origin-when-cross-origin</li> <li>unsafe-url</li> </ul> </td> <td>Tsarin nuna hanyar foton da a za'a samu samun</td> </tr> <tr> <td>sizes</td> <td><i>Tsarin</i></td> <td>Tsarin nuna hanyar foton don tsaiki daki-daki</td> </tr> <tr> <td><a href="/ha/tags/att_img_src.html" title="Aiki <img> src attribute">src</a></td> <td><i>URL</i></td> <td>Tsarin nuna hanyar foton</td> </tr> <tr> <td>srcset</td> <td><i>URL-list</i></td> <td>规定在不同情况下使用的图像文件列表。</td> </tr> <tr> <td><a href="/ha/tags/att_img_usemap.html" title="Aiki <img> usemap attribute">usemap</a></td> <td>#<i>mapname</i></td> <td>将图像定义为客户器端图像映射。</td> </tr> <tr> <td><a href="/ha/tags/att_img_width.html" title="Aiki <img> width attribute">width</a></td> <td><i>像素</i></td> <td>规定图像的宽度。</td> </tr> </table> </div> <div> <h2>全局属性</h2> <p><code><img></code> 标签还支持 <a href="/ha/tags/html_ref_standardattributes.html" title="HTML Global Attributes">HTML 中的全局属性</a>。</p> </div> <div> <h2>事件属性</h2> <p><code><img></code> 标签还支持 <a href="/ha/tags/html_ref_eventattributes.html" title="Aiki Event Attribute">HTML 中的事件属性</a>。</p> </div> <div> <h2>更多实例</h2> <h3>例子 3</h3> <p>对齐图像（使用 CSS）：</p> <pre class="language-html"> <img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:bottom"> <img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:middle"> <img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:top"> <img src="flower.gif" alt="[#1#]" width="90" height="90" style="float:right"> <img src="flower.gif" alt="[#1#]" width="90" height="90" style="float:left"> </pre> <p class="tiy"><a target="_blank" href="/ha/tiy/t.html?f=tags_img_align_css">Try It Yourself</a></p> <h3>例子 4</h3> <p>添加图像边框（使用 CSS）：</p> <pre class="language-html"> <img src="flower.gif" alt="[#1#]" style="border:5px solid black"> </pre> <p class="tiy"><a target="_blank" href="/ha/tiy/t.html?f=tags_img_border_css">Try It Yourself</a></p> <h3>例子 5</h3> <p>为图像添加左右外边距（使用 CSS）：</p> <pre class="language-html"> <img src="flower.gif" alt="[#1#]" style="vertical-align:middle;margin:0px 50px"> </pre> <p class="tiy"><a target="_blank" href="/ha/tiy/t.html?f=tags_img_hspace_css">Try It Yourself</a></p> <h3>例子 6</h3> <p>为图像添加上下外边距（使用 CSS）：</p> <pre class="language-html"> <img src="flower.gif" alt="[#1#]" style="vertical-align:middle;margin:50px 0px"> </pre> <p class="tiy"><a target="_blank" href="/ha/tiy/t.html?f=tags_img_vspace_css">Try It Yourself</a></p> <h3>例子 7</h3> <p>如何从另一个文件夹或另一个网站插入图像：</p> <pre class="language-html"> <img src="/photo/flower.gif" alt="Flower" width="180" height="180"> <img src="https://www.codew3c.com/photo/tree.png" alt="Tree" width="150" height="161"> </pre> <p class="tiy"><a target="_blank" href="/ha/tiy/t.html?f=tags_img_diffloc">Try It Yourself</a></p> <h3>例子 8</h3> <p>如何给图片添加超链接：</p> <pre class="language-html"> <a href="https://www.codew3c.com"> <img src="w3logo.png" alt="codew3c.com" width="400" height="225"> </a> </pre> <p class="tiy"><a target="_blank" href="/ha/tiy/t.html?f=tags_img_link">Try It Yourself</a></p> <h3>例子 9</h3> <p>如何创建带有可点击区域的图像映射。每个区域都是一个超链接：</p> <pre class="language-html"> <img src="life.png" alt="Life" usemap="#lifemap" width="650" height="451"> <map name="lifemap"> <area shape="rect" coords="10,208,155,338" alt="AirPods" href="airpods.html"> <area shape="rect" coords="214,65,364,365" alt="iPhone" href="iphone.html"> <area shape="circle" coords="570,291,75" alt="Coffee" href="coffee.html"> </map> </pre> <p class="tiy"><a target="_blank" href="/ha/tiy/t.html?f=tags_areamap_1">Try It Yourself</a></p> </div> <div id="how-to-use-image"> <h2>延伸阅读 - 如何正确地使用图像</h2> <p>HTML 和 XHTML 最引人注目的特征之一，就是能够在文档的文本中包括图像，既可以把图像作为文档的内在对象（内联图像），也可以将其作为一个可通过超链接下载的单独文档，或者作为文档的背景。</p> <p>合理地在文档内容中加入图像（静态的或者具有动画效果的图标、照片、说明、绘画，等等）时，会使文档变得更加生动活泼，更加引人入胜，而且看上去更加专业，更具信息性并易于浏览。还可以专门使一个图像成为超链接的可视引导图。</p> <p>然而，如果过度使用图像，文档就会变得支离破碎，混乱不堪，而且无法阅读，用户在下载和查看该页面时，更会增加很多不必要的等待时间。</p> <p>Baca makala di bawah ini, iya kwarin wajenyan wajenyan wajenyan a Web: GIF da JPEG, kuma hauwa kwarin siffa imaji:</p> <ul> <li><a href="/ha/media/media_gif.html" title="Multimedia Tutorial - GIF Image">Imaji GIF</a></li> <li><a href="/ha/media/media_jpeg.html" title="Multimedia Tutorial - JPEG Image">Imaji JPEG</a></li> <li><a href="/ha/media/media_browserimages.html" title="Multimedia Tutorial - Using Images on the Web">Kwarin imaji a Web</a></li> </ul> </div> <div> <h2>Kwarin CSS a hawakawa</h2> <p>Kware kware yauyiya zai kwarin wajenyan a hawakawa <code><img></code> Element:</p> <pre class="language-css"> img { display: inline-block; } </pre> <p class="tiy"><a target="_blank" href="/ha/tiy/t.html?f=tags_img_default_css">Try It Yourself</a></p> </div> <div> <h2>Browser Support</h2> <table class="browser-support"> <tr> <th class="bsChrome">Chrome</th> <th class="bsEdge">Edge</th> <th class="bsFirefox">Firefox</th> <th class="bsSafari">Safari</th> <th class="bsOpera">Opera</th> </tr> <tr> <td>Chrome</td> <td>Edge</td> <td>Firefox</td> <td>Safari</td> <td>Opera</td> </tr> <tr> <td>Support</td> <td>Support</td> <td>Support</td> <td>Support</td> <td>Support</td> </tr> </table> </div> <div class="prenextnav"> <ul> <li> Previous Page <a href="/ha/tags/tag_iframe.html" title="النمذجة <iframe>"><iframe></a></li> <li> Next Page <a href="/ha/tags/tag_input.html" title="النمذجة <input>"><input></a></li> </ul> </div><div style="background-color:#fcfdf8; padding:0;"> </div> </div> <!-- maincontent end --> <div id="sidebar"> <div><h3><center> Toolbox </center><h3> <h5 id="tools_reference"><a href="/ha/tags/index.html">HTML Reference Manual</a></h5> <h5 id="tools_example"><a href="/ha/html/html_examples.html">HTML Example</a></h5> <h5 id="tools_quiz"><a href="/ha/html/html_quiz.html">HTML Quiz</a></h5> <h5 id="tools_tutorial"><a href="/ha/html/index.html">HTML Tutorial</a></h5> </div> <div><h3><center> Sponsor Links </center><h3> <div id="sbtg"> <script src="/myjs/zzsr.js"></script> </div> </div> </div> <div id="footer"> <p id="p1"> The content provided by CodeW3C.com is for training and testing purposes only and does not guarantee the accuracy of the content. Risks associated with the use of this site's content are not related to this site. All rights reserved. </p> <p id="p2"> <a href="/ha/about/index.html" title="About CodeW3C.com">About CodeW3C.com</a> <a href="/ha/about/about_helping.html" title="Help CodeW3C.com">Help CodeW3C.com</a> <a href="/ha/about/about_use.html" title="About Usage">Terms of Use</a> <a href="/ha/about/about_privacy.html" title="About Privacy">Privacy Terms</a> <a href="http://www.comfortsoftwaregroup.com/" target="_blank"><img src="/comfortsoftwaregroup.png"></a> <a href="http://www.ce4e.com/" target="_blank"><img src="/poweredby.png" alt="Alakawar da Ce4e.com"></a> </p> </div> </div> <!-- wrapper end --> <script src="/myjs/tongji.js"></script> </body> </html>