recherche

Maison  >  Article  >  interface Web  >  Exemples d'insertion d'images en HTML et d'ajout d'images en HTML

Exemples d'insertion d'images en HTML et d'ajout d'images en HTML

高洛峰
高洛峰original
2017-03-03 16:27:571965parcourir

Insérer des images en HTML. Pour afficher des images, vous avez besoin de balises HTML. Vous pouvez utiliser la balise img.

1. Syntaxe des balises d'image HTML

Le code est le suivant :

<img  src="pcss5-logo-201305.gif"    style="max-width:90%"  style="max-width:90%" / alt="Exemples d'insertion d'images en HTML et d'ajout d'images en HTML" >

introduction img :

src est suivi du adresse du chemin de l'image

largeur Définir la largeur de l'image

hauteur Définir la hauteur de l'image

2. Exemple d'affichage d'image HTML spécifique - TOP

Nous sommes dans la source html Insérez trois images dans le code, une est à l'origine grande, une a la largeur et la hauteur modifiées en petites, et une a la largeur et la hauteur modifiées en grandes.

1. Le code html complet de l'exemple :

Le code est le suivant : 

 
 
 
 
图片插入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="Exemples d'insertion d'images en HTML et d'ajout d'images en HTML" > 
</p> 
<p>改小图片</p> 
<p> 
<img  src="pcss5-logo-201305.gif"    style="max-width:90%"  style="max-width:90%" / alt="Exemples d'insertion d'images en HTML et d'ajout d'images en HTML" > 
</p> 
<p>改大图片</p> 
<p> 
<img  src="pcss5-logo-201305.gif"    style="max-width:90%"  style="max-width:90%" / alt="Exemples d'insertion d'images en HTML et d'ajout d'images en HTML" > 
</p> 
</body> 
</html></pre><p>2. ></p>
<p><img alt="Exemples dinsertion dimages en HTML et dajout dimages en HTML" src="https://img.php.cn/upload/article/000/000/013/01a9772901e3e927a85b643220ded383-0.png"    style="max-width:90%"  style="max-width:90%" title="Exemples dinsertion dimages en HTML et dajout dimages en HTML"> </p>Captures d'écran d'exemples d'affichage d'insertion d'images HTML<p></p>Pour plus d'exemples d'insertion d'images HTML et d'articles liés à l'ajout d'images HTML, veuillez faire attention au site Web PHP chinois ! <p></p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Déclaration：</span><div>Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn</div></div></div><div class="nphpSytBox"><span>Article précédent：<a class="dBlack" title="Présentation des compétences d'attribut de méta-fenêtre dans les pages Web HTML" href="http://m.php.cn/fr/faq/354743.html">Présentation des compétences d'attribut de méta-fenêtre dans les pages Web HTML</a></span><span>Article suivant：<a class="dBlack" title="Présentation des compétences d'attribut de méta-fenêtre dans les pages Web HTML" href="http://m.php.cn/fr/faq/354748.html">Présentation des compétences d'attribut de méta-fenêtre dans les pages Web HTML</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Articles Liés</h2><em><a href="http://m.php.cn/fr/article.html" class="bBlack"><i>Voir plus</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/fr/faq/348757.html" title="Résumé des connaissances HTML" class="aBlack">Résumé des connaissances HTML</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/348804.html" title="Comment apprendre le HTML rapidement" class="aBlack">Comment apprendre le HTML rapidement</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/348873.html" title="La différence entre htmlxhtmlxml" class="aBlack">La différence entre htmlxhtmlxml</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/348884.html" title="La différence entre les attributs src et href" class="aBlack">La différence entre les attributs src et href</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/348902.html" title="关于HTML5和CSS替换使用" class="aBlack">关于HTML5和CSS替换使用</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>Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！</p></div><div class="footermid"><a href="http://m.php.cn/fr/about/us.html">À propos de nous</a><a href="http://m.php.cn/fr/about/disclaimer.html">Clause de non-responsabilité</a><a href="http://m.php.cn/fr/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>