Tebili cha HTML <img>

CodeW3C Mafunzo ya Mawasiliano

HTML Mafunzo wa Sera
Skripti ya Mfumo wa Kifunguo
Skripti ya Mfumo wa Serikali
Mafunzo ya XML wa Sera
Mashirika ya Kusaduka
Kitabu cha Kusaduka
Mashirika ya Kielewa

Jadwali cha Kufanyia Mafunzo

Mashirika ya Kielewa

Viungo vya HTML (michakato wa herufi)
Viungo vya HTML (michakato wa muundo)
Matoleo ya Mfumo wa HTML
Mashirika ya Kielewa ya HTML - Mafano ya Mafanikio
Matukio ya HTML
Mashirika ya Kielewa ya HTML - Mafano ya rangi
Kanvasi cha HTML
Vidio au Audio cha HTML
Mashirika ya Kielewa ya HTML Chati
Makao wa HTML
Mashirika ya Kielewa ya HTML URL Chati
Kitingo cha HTML
HTML Namba ya Dola
HTTP Jumla
HTTP Muhimu
Mashirika ya Kielewa ya Keyboard Shortcut

HTML Taabu

<!-->
<!DOCTYPE>
<a>
<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="/sw/tags/tag_tr.html" title="HTML <tr> inglezo"><tr></a></li> <li><a href="/sw/tags/tag_track.html" title="HTML <track> inglezo"><track></a></li> <li><a href="/sw/tags/tag_tt.html" title="HTML <tt> inglezo"><tt></a></li> <li><a href="/sw/tags/tag_u.html" title="HTML <u> inglezo"><u></a></li> <li><a href="/sw/tags/tag_ul.html" title="HTML <ul> inglezo"><ul></a></li> <li><a href="/sw/tags/tag_var.html" title="HTML <var> inglezo"><var></a></li> <li><a href="/sw/tags/tag_video.html" title="HTML <video> inglezo"><video></a></li> <li><a href="/sw/tags/tag_wbr.html" title="HTML <wbr> inglezo"><wbr></a></li> </ul> </div> <div><h3><center> 选修课 </center><h3> <h2>课程推荐：</h2> <ul> <li><a href="/sw/howto/index.html" title="CodeW3C.com Kizi cha Kizi">CodeW3C.com Kizi cha Kizi</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>Tebili cha HTML <img></h1> <div class="prenextnav"> <ul> <li> Page ya Kwanza <a href="/sw/tags/tag_iframe.html" title="Tebili cha HTML <iframe>"><iframe></a></li> <li> Page ya Kifo <a href="/sw/tags/tag_input.html" title="Tebili cha HTML <input>"><input></a></li> </ul> </div> <div> <h2>定义和用法</h2> <p><code><img></code> 标签用于在 HTML 页面中嵌入图像。</p> <p>从技术上讲，实际上并没有将图像插入到网页中，而是将图像链接到了网页。<code><img></code> Kitabu kina kina kinatokana na mchakato wa kina kina wa kina kina.</p> <p><code><img></code> Kitabu kina kina inaathiriwa na majengo ya kina kina kumi.</p> <ul> <li><a href="/sw/tags/att_img_src.html" title="HTML <img> src iche">src</a> - Mfanyikoza inaonekana kwa picha</li> <li><a href="/sw/tags/att_img_alt.html" title="HTML <img> alt iche">alt</a> - Ikiwa picha inasababisha kufikirika kwa sababu ya sababu fulani, tukifanyia matukio ya picha ya kina.</li> </ul> <p class="important"><span>Kumekadiri:</span>Inaonekana pia, inahitaji kuwasiliana na umbo wa picha na umbo wa kina. Kama haingawekwa umbo wa picha na umbo wa kina, ukurasa unaweza kufikirika wakati wa kusanyia picha.</p> <p class="tip"><span>Tahadhari:</span>Kuwaingiza picha katika mafanikio mengine, tuwe na taarifa za picha. <code><img></code> Inaonekana kwenye <a href="/sw/tags/tag_a.html" title="Mashirika ya Kielewa ya HTML <a> Tag"><a></a> Kwenye kitabu (tazama mafanikio ya hivi karibuni).</p> <h3>Tazama pia:</h3> <p>Kiswali cha HTML:<a href="/sw/html/html_images.html" title="HTML Image">HTML Image</a></p> <p>Kitabu cha thamani cha HTML DOM:<a href="/sw/jsref/dom_obj_image.html" title="HTML DOM Image Mtu">Mfano wa Image Object</a></p> <p>Kiswali cha CSS:<a href="/sw/css/css3_images.html" title="CSS Image Style">Mfano wa kusababisha picha kwa kina</a></p> <p class="note"><span>Mfano kidogo zaidi:</span><a href="#how-to-use-image">Jinsi ya kusababisha picha kwa kina kwa uwanja wa kina.</a></p> </div> <div> <h2>Mfano</h2> <h3>Mfano 1</h3> <p>Kwenye mafanikio ya hivi karibuni, tunapata picha ya tulip ya kiondoka ya CodeW3C.com ya mteja wa kiondoka katika Shanghai Flower Port:</p> <pre class="language-html"> <img src="tulip.jpg" alt="Shanghai Flower Port - Tulip" /> </pre> <p class="tiy"><a target="_blank" href="/sw/tiy/t.html?f=tags_img_1">Jifunze Kwa Binafsi</a></p> <img src="/i/photo/tulip.jpg" alt="Shanghai Flower Port - Tulip" style="display: block; margin: 0 auto;" /> <h3>Mfano 2</h3> <p>Mfano mengine wa kuingiza picha ni:</p> <pre class="language-html"> <img src="dancer.png" alt="Dancer" width="500" height="749"> </pre> <p class="tiy"><a target="_blank" href="/sw/tiy/t.html?f=tags_img_2">Jifunze Kwa Binafsi</a></p> <p class="tip"><span>Tahadhari:</span>Inaofaa kusababisha mafanikio zaidi kwenye chakula cha ukuta wa ukurasa.</p> </div> <div> <h2>Mfano</h2> <table class="dataintable"> <tr> <th style="width:20%;">Mfano</th> <th style="width:30%;">Tupu</th> <th>Maelezo</th> </tr> <tr> <td><a href="/sw/tags/att_img_alt.html" title="HTML <img> alt iche">alt</a></td> <td><i>Matukio</i></td> <td>Mfanyikoza matukio ya picha ya kina.</td> </tr> <tr> <td>crossorigin</td> <td> <ul> <li>anonymous</li> <li>use-credentials</li> </ul> </td> <td>Iningaa kutumia picha kutoka kwa watoambizi wa kubalika na kushiriki picha kwa kina (canvas).</td> </tr> <tr> <td><a href="/sw/tags/att_img_height.html" title="HTML <img> height iche">height</a></td> <td><i>Pikseli</i></td> <td>Mfanyikoza umbo wa picha.</td> </tr> <tr> <td><a href="/sw/tags/att_img_ismap.html" title="HTML <img> ismap iche">ismap</a></td> <td>ismap</td> <td>Kuandika picha kama picha ya kiondoka kwenye msimbo wa kiondoka.</td> </tr> <tr> <td><a href="/sw/tags/att_img_loading.html" title="HTML <img> loading iche">loading</a></td> <td> <ul> <li>eager</li> <li>lazy</li> </ul> </td> <td>Inasababisha kama mkusanyiko wa browser lazima wakusanya picha kwa kina, au kuagiza hadi kufikia mashirika fulani.</td> </tr> <tr> <td><a href="/sw/tags/att_img_longdesc.html" title="HTML <img> longdesc iche">longdesc</a></td> <td><i>URL</i></td> <td>Mfanyikoza URL yenye kueleza picha kwa kina.</td> </tr> <tr> <td><a href="/sw/tags/att_img_referrepolicy.html" title="HTML <img> referrerpolicy iche">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>Mfanyikoza taarifa za kinachotumiwa wakati wa kumpata picha.</td> </tr> <tr> <td>sizes</td> <td><i>Saizi</i></td> <td>Mfanyikoza ukurata saizi ya picha kwa muundo wa ukurasa wake.</td> </tr> <tr> <td><a href="/sw/tags/att_img_src.html" title="HTML <img> src iche">src</a></td> <td><i>URL</i></td> <td>Mfanyikoza inayopewa naenda ya picha.</td> </tr> <tr> <td>srcset</td> <td><i>URL-list</i></td> <td>Inasababisha kutumia orodha ya faili ya picha zilizotumiwa kwenye matukio mbalimbali.</td> </tr> <tr> <td><a href="/sw/tags/att_img_usemap.html" title="HTML <img> usemap iche">usemap</a></td> <td>#<i>mapname</i></td> <td>Inasababisha kumtumia picha kama picha ya kijana.</td> </tr> <tr> <td><a href="/sw/tags/att_img_width.html" title="HTML <img> width iche">width</a></td> <td><i>Pikseli</i></td> <td>Inasababisha kuzingatia ukanda wa picha.</td> </tr> </table> </div> <div> <h2>Masharti ya jumla</h2> <p><code><img></code> Tovuti hizi inahusiana na <a href="/sw/tags/html_ref_standardattributes.html" title="Mashirika ya Kielewa ya HTML - Mafano ya Mafanikio">Masharti ya jumla katika HTML</a>。</p> </div> <div> <h2>masharti ya matukio</h2> <p><code><img></code> Tovuti hizi inahusiana na <a href="/sw/tags/html_ref_eventattributes.html" title="HTML属性 za Matukio">Masharti ya matukio katika HTML</a>。</p> </div> <div> <h2>Mafano mengi</h2> <h3>Mfano 3</h3> <p>Kueneza picha (kutumia 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="/sw/tiy/t.html?f=tags_img_align_css">Jifunze Kwa Binafsi</a></p> <h3>Mfano 4</h3> <p>Ongea kwenye maweka wa picha (kutumia 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="/sw/tiy/t.html?f=tags_img_border_css">Jifunze Kwa Binafsi</a></p> <h3>Mfano 5</h3> <p>Ongea kwenye maweko wa kushoto na kulia cha picha (kutumia 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="/sw/tiy/t.html?f=tags_img_hspace_css">Jifunze Kwa Binafsi</a></p> <h3>Mfano 6</h3> <p>Ongea kwenye maweko wa kimoja na kijani cha picha (kutumia 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="/sw/tiy/t.html?f=tags_img_vspace_css">Jifunze Kwa Binafsi</a></p> <h3>Mfano 7</h3> <p>Kutumia habari ya picha kutoka kwa dosari ya kina au tovuti nyingine:</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="/sw/tiy/t.html?f=tags_img_diffloc">Jifunze Kwa Binafsi</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="/sw/tiy/t.html?f=tags_img_link">Jifunze Kwa Binafsi</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="/sw/tiy/t.html?f=tags_areamap_1">Jifunze Kwa Binafsi</a></p> </div> <div id="how-to-use-image"> <h2>延伸阅读 - 如何正确地使用图像</h2> <p>HTML 和 XHTML 最引人注目的特征之一，就是能够在文档的文本中包括图像，既可以把图像作为文档的内在对象（内联图像），也可以将其作为一个可通过超链接下载的单独文档，或者作为文档的背景。</p> <p>合理地在文档内容中加入图像（静态的或者具有动画效果的图标、照片、说明、绘画，等等）时，会使文档变得更加生动活泼，更加引人入胜，而且看上去更加专业，更具信息性并易于浏览。还可以专门使一个图像成为超链接的可视引导图。</p> <p>然而，如果过度使用图像，文档就会变得支离破碎，混乱不堪，而且无法阅读，用户在下载和查看该页面时，更会增加很多不必要的等待时间。</p> <p>Tafadhali soma machapisho ya hapa chini, kusoma maelfu ya picha kwa kuzingatia kwa Web: GIF na JPEG, na kuhakikisha kuwa inatumika kwa haki picha:</p> <ul> <li><a href="/sw/media/media_gif.html" title="Makini ya Multimedia - GIF Image">Picha za GIF</a></li> <li><a href="/sw/media/media_jpeg.html" title="Makini ya Multimedia - JPEG Image">Picha za JPEG</a></li> <li><a href="/sw/media/media_browserimages.html" title="Makini ya Multimedia - Kupiaza Image kwenye Web">Kutumia picha kwenye Web</a></li> </ul> </div> <div> <h2>Mingineyo ya muungano wa CSS</h2> <p>Kawaida kimo kikubalianza kwa vifaa vya kueleza vingine vitafutia vitotumia taarifa hizi kwa kuzingatia kwa uangalifu wa kuzingatia <code><img></code> Elementi:</p> <pre class="language-css"> img { display: inline-block; } </pre> <p class="tiy"><a target="_blank" href="/sw/tiy/t.html?f=tags_img_default_css">Jifunze Kwa Binafsi</a></p> </div> <div> <h2>Msaada wa Kifungu</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>Msaada</td> <td>Msaada</td> <td>Msaada</td> <td>Msaada</td> <td>Msaada</td> </tr> </table> </div> <div class="prenextnav"> <ul> <li> Page ya Kwanza <a href="/sw/tags/tag_iframe.html" title="Tebili cha HTML <iframe>"><iframe></a></li> <li> Page ya Kifo <a href="/sw/tags/tag_input.html" title="Tebili cha HTML <input>"><input></a></li> </ul> </div><div style="background-color:#fcfdf8; padding:0;"> </div> </div>  <div id="sidebar"> <div><h3><center> Kifaa cha Kumbukumbu </center><h3> <h5 id="tools_reference"><a href="/sw/tags/index.html">Kitabu cha Mbinu ya HTML</a></h5> <h5 id="tools_example"><a href="/sw/html/html_examples.html">Mifano ya HTML</a></h5> <h5 id="tools_quiz"><a href="/sw/html/html_quiz.html">Matokeo ya HTML</a></h5> <h5 id="tools_tutorial"><a href="/sw/html/index.html">Makina ya HTML</a></h5> </div> <div><h3><center> Viungo vya Mshambuliaji </center><h3> <div id="sbtg"> <script src="/myjs/zzsr.js"></script> </div> </div> </div> <div id="footer"> <p id="p1"> Matokeo ya CodeW3C.com inatumiwa kwa mafunzo na michezo, hatuwa na uhusiano na uharibifu wa matokeo. Uharibifu wa kutumia matokeo hii na matokeo hii haikuchukuliwa. Hata hazina hisia zaidi. Hata hazina hisia zaidi. </p> <p id="p2"> <a href="/sw/about/index.html" title="Kuhusu CodeW3C.com">Kuhusu CodeW3C.com</a> <a href="/sw/about/about_helping.html" title="Msaada wa CodeW3C.com">Msaada wa CodeW3C.com</a> <a href="/sw/about/about_use.html" title="Kuhusu Kusaidia">Maua wa Kusaidia</a> <a href="/sw/about/about_privacy.html" title="Kuhusu Hafu">Maua wa Hafu</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="Inaendeleke Ce4e.com"></a> </p> </div> </div>  <script src="/myjs/tongji.js"></script> </body> </html>