Heim  >  Artikel  >  Web-Frontend  >  Beispiel für das Einfügen von Bildern in HTML (Hinzufügen von Bildern zu HTML)_HTML/Xhtml_Webseitenproduktion

Beispiel für das Einfügen von Bildern in HTML (Hinzufügen von Bildern zu HTML)_HTML/Xhtml_Webseitenproduktion

WBOY
WBOYOriginal
2016-05-16 16:37:592356Durchsuche

Bilder in HTML einfügen. Um Bilder anzuzeigen, benötigen Sie HTML-Tags. Sie können das img-Tag verwenden.

1. HTML-Bild-Tag-Syntax


Code kopieren
Der Code lautet wie folgt:


img-Einführung:

Auf

src folgt die Bildpfadadresse

width legt die Bildbreite fest

Höhe legt die Bildhöhe fest

2. Spezifisches Beispiel für die HTML-Bildanzeige – TOP

Wir fügen drei Bilder in den HTML-Quellcode ein, eines in Originalgröße, eines mit geänderter Breite und Höhe in „Klein“ und eines mit geänderter Breite und Höhe in „Groß“.

1. Der vollständige HTML-Code des Beispiels:


Kopieren Sie den Code
Der Code lautet wie folgt:

;Bildeinfügung in HTML-Online-Demonstration< ;a href="http://www.vcss.com</title">www.vcss.com</title</a>> 🎜> <br>< body> <br><p>Original großes Bild</p> <br><p> 165" height="60 " /> <br></p> <br><p>Ändern Sie das Bild in eine kleinere Größe</p> <br><p> <br><img src ="divcss5-logo-201305.gif " width="105" height="30" /> <br></p> <br><p>Ändern Sie das Bild in eine größere Größe</p> 🎜><p> <br><img src="divcss5-logo-201305.gif" width="365" height="120" /></p> body> <br></html> <br><br><br>2 <br><br> <br> <br>Screenshot eines Anzeigebeispiels für das Einfügen von HTML-Bildern<br> </div></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Stellungnahme:</span><div>Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn</div></div></div><div class="nphpSytBox"><span>Vorheriger Artikel:<a class="dBlack" title="Beschreibung des Meta-Viewport-Attributs bei der Produktion von HTML-Webseiten_HTML/Xhtml_Webseiten" href="http://m.php.cn/de/faq/11229.html">Beschreibung des Meta-Viewport-Attributs bei der Produktion von HTML-Webseiten_HTML/Xhtml_Webseiten</a></span><span>Nächster Artikel:<a class="dBlack" title="Beschreibung des Meta-Viewport-Attributs bei der Produktion von HTML-Webseiten_HTML/Xhtml_Webseiten" href="http://m.php.cn/de/faq/11234.html">Beschreibung des Meta-Viewport-Attributs bei der Produktion von HTML-Webseiten_HTML/Xhtml_Webseiten</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>In Verbindung stehende Artikel</h2><em><a href="http://m.php.cn/de/article.html" class="bBlack"><i>Mehr sehen</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/de/faq/348757.html" title="Zusammenfassung der HTML-Kenntnisse" class="aBlack">Zusammenfassung der HTML-Kenntnisse</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/348804.html" title="So lernen Sie schnell HTML" class="aBlack">So lernen Sie schnell HTML</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/348873.html" title="Der Unterschied zwischen HTML xHTML XML" class="aBlack">Der Unterschied zwischen HTML xHTML XML</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/348884.html" title="Der Unterschied zwischen src- und href-Attributen" class="aBlack">Der Unterschied zwischen src- und href-Attributen</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/348902.html" title="Über die Verwendung von HTML5 und CSS-Ersatz" class="aBlack">Über die Verwendung von HTML5 und CSS-Ersatz</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!</p></div><div class="footermid"><a href="http://m.php.cn/de/about/us.html">Über uns</a><a href="http://m.php.cn/de/about/disclaimer.html">Haftungsausschluss</a><a href="http://m.php.cn/de/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了,就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>