suchen

Heim  >  Artikel  >  Web-Frontend  >  Beispiele für das Einfügen von Bildern in HTML und das Hinzufügen von Bildern in HTML

Beispiele für das Einfügen von Bildern in HTML und das Hinzufügen von Bildern in HTML

高洛峰
高洛峰Original
2017-03-03 16:27:571972Durchsuche

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

Der Code lautet wie folgt:

<img  src="pcss5-logo-201305.gif"    style="max-width:90%"  style="max-width:90%" / alt="Beispiele für das Einfügen von Bildern in HTML und das Hinzufügen von Bildern in HTML" >

img-Einführung:

src folgt Bildpfadadresse

Breite Stellen Sie die Bildbreite ein

Höhe Stellen Sie die Bildhöhe ein

2. Spezifisches HTML-Bildanzeigebeispiel – OBEN

Wir sind in der HTML-Quelle. Fügen Sie drei Bilder in den Code ein, eines ist ursprünglich groß, eines hat die Breite und Höhe auf klein geändert und eines hat die Breite und Höhe auf groß geändert.

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

Der Code lautet wie folgt: 

 
 
 
 
图片插入html 在线演示 <a href="http://www.vcss.com</title">www.vcss.com</title</a>> 
</head> 

<body> 
<p>原始大图片</p> 
<p> 
<img  src="pcss5-logo-201305.gif"    style="max-width:90%"  style="max-width:90%" / alt="Beispiele für das Einfügen von Bildern in HTML und das Hinzufügen von Bildern in HTML" > 
</p> 
<p>改小图片</p> 
<p> 
<img  src="pcss5-logo-201305.gif"    style="max-width:90%"  style="max-width:90%" / alt="Beispiele für das Einfügen von Bildern in HTML und das Hinzufügen von Bildern in HTML" > 
</p> 
<p>改大图片</p> 
<p> 
<img  src="pcss5-logo-201305.gif"    style="max-width:90%"  style="max-width:90%" / alt="Beispiele für das Einfügen von Bildern in HTML und das Hinzufügen von Bildern in HTML" > 
</p> 
</body> 
</html></pre><p>2. Screenshot des Beispiels zum Einfügen eines Bildes in HTML</p>
<p><img alt="Beispiele für das Einfügen von Bildern in HTML und das Hinzufügen von Bildern in HTML" src="https://img.php.cn/upload/article/000/000/013/01a9772901e3e927a85b643220ded383-0.png"    style="max-width:90%"  style="max-width:90%" title="Beispiele für das Einfügen von Bildern in HTML und das Hinzufügen von Bildern in HTML"></p> <p>Screenshots von Beispielen für das Einfügen von HTML-Bildern</p>
<p>Weitere Artikel zu Beispielen zum Einfügen von HTML-Bildern und zum Hinzufügen von HTML-Bildern finden Sie auf der chinesischen PHP-Website! </p></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="Einführung in die Meta-Viewport-Attributfähigkeiten in HTML-Webseiten" href="https://m.php.cn/de/faq/354743.html">Einführung in die Meta-Viewport-Attributfähigkeiten in HTML-Webseiten</a></span><span>Nächster Artikel：<a class="dBlack" title="Einführung in die Meta-Viewport-Attributfähigkeiten in HTML-Webseiten" href="https://m.php.cn/de/faq/354748.html">Einführung in die Meta-Viewport-Attributfähigkeiten in HTML-Webseiten</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>In Verbindung stehende Artikel</h2><em><a href="https://m.php.cn/de/article.html" class="bBlack"><i>Mehr sehen</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="https://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="https://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="https://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="https://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="https://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><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="https://m.php.cn/de/about/us.html">Über uns</a><a href="https://m.php.cn/de/about/disclaimer.html">Haftungsausschluss</a><a href="https://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>