Analyse des inconvénients de la méthode d'écriture à fermeture automatique des balises XHTML_Experience Exchange

Si vous êtes familier avec le développement lié à XML, vous êtes peut-être habitué à cette façon d'écrire. En pensant que tout élément XML qui ne contient pas de nœuds enfants peut être écrit de cette manière, les balises sans contenu en XHTML peuvent également être écrites. Par ici. Bien sûr, XHTML permet théoriquement d'écrire n'importe quelle balise avec une méthode de fermeture automatique. Cependant, la compatibilité des navigateurs a entraîné un nouveau problème, c'est-à-dire qu'IE ne peut pas reconnaître correctement la méthode d'écriture à fermeture automatique de certaines balises.

Veuillez essayer de saisir le code XHTML suivant et de le parcourir dans IE : <strong><font face="新宋体" size="3"><p>hello <script type="text/javascript" /> world</p></font></strong>, vous constaterez que vous ne pouvez voir que le bonjour au recto mais pas le monde à l'arrière. C'est assez inexplicable. De nombreuses personnes ont peut-être rencontré ce problème et y ont passé plusieurs heures, mais n'ont toujours pas trouvé d'explication raisonnable.

L'explication vient d'un autre morceau de code similaire : <strong><font face="新宋体" size="3"><p>hello <textarea /> world</p></font></strong> Pouvez-vous voir l'effet d'affichage dans IE et obtenir une explication raisonnable ? Nous pouvons voir que le bonjour au premier plan est affiché normalement, tandis que le monde à l'arrière est affiché dans la zone de texte. Cela prouve qu'IE ne reconnaît pas correctement que la balise textarea s'est fermée. Au lieu de cela, il traite le contenu suivant comme un. zone de texte lorsqu'elle n'est pas fermée avec le contenu interne.

À ce stade, nous comprenons pourquoi le code précédent ne peut pas voir le monde derrière lui, car il est reconnu comme faisant partie du script. Cela montre que lorsque nous utilisons XHTML, nous ne pouvons pas utiliser l'écriture à fermeture automatique aussi librement que XML. Seules quelques balises qui n'ont pas besoin d'être fermées peuvent être écrites en fermeture automatique. D'autres balises sont mieux utilisées par paires, même si elles le font. n'ont aucun contenu. méthode d'écriture fermée.

Enfin, je dois rappeler à tout le monde qu'en fait, IE n'est pas le seul à avoir des analyseurs faibles. Dans de nombreux endroits, vous pouvez rencontrer des problèmes causés par des analyseurs lâches. Par conséquent, lors de l'écriture de XHTML, nous devons encore tenir compte d'un certain héritage. à partir de l'ancienne habitude HTML, vous ne pouvez pas l'écrire avec désinvolture comme du vrai XML parce que vous pensez qu'il répond aux normes. Vous n'y croyez pas ? Alors essayez-en un autre : <strong><font face="新宋体" size="3"><p>hello <br></br> world</p></font></strong>, faites attention à l'effet d'affichage dans IE et Opera.

Mise à jour : Certains lecteurs pensent que les exemples que j'ai donnés ne sont pas conformes à la spécification XHTML, veuillez donc lire d'abord la spécification XHTML . La traduction chinoise de la section Éléments vides est la suivante : "Les éléments vides doivent soit avoir une balise de fermeture, soit se terminer par />, comme
ou < ;hr> . Veuillez vous référer à la Norme de compatibilité HTML pour plus d'informations sur la compatibilité ascendante avec les navigateurs HTML4, qui est également donnée dans la spécification. montrent que la méthode d'écriture de

est conforme à la spécification XHTML, mais n'est pas compatible avec la norme HTML4. Alors, XHTML est-il compatible avec HTML4 ? Regardons la section Problèmes de compatibilité. La traduction chinoise est la suivante : « Bien qu'il ne soit pas nécessaire que les documents XHTML1.0 soient compatibles avec les navigateurs existants, en pratique, ce n'est pas difficile à faire. "Par conséquent, XHTML ne stipule pas que les documents doivent être rétrocompatibles. Les exemples que j'ai donnés sont tous des fragments de documents XHTML légaux, et ils peuvent tous passer le Service de validation de balisage du W3C.

Mise à jour à nouveau : En fait, le but de la rédaction de cet article n'est pas de souligner que se conformer à la spécification XHTML suffit, ni de souligner que se conformer à XHTML et être compatible avec HTML4 suffit , mais cette plus grande compatibilité devrait être considérée comme une situation. Par exemple, votre CMS permet aux utilisateurs de soumettre du code HTML, et le code HTML soumis est formaté en XHTML via SgmlReader ou d'autres méthodes, et d'autres traitements XML peuvent également être effectués. À ce stade, il est possible de convertir le fichier < /textarea> soumis par l'utilisateur. Convertir en <textarea /> Dans ce cas, vous devez tracer et déboguer pour découvrir le problème, car le traitement XML ne viole aucune spécification, et à chaque étape. du traitement est sémantique. De plus, il est préférable de ne pas écrire <br /> comme <br/>, car il existe effectivement des analyseurs mentalement retardés qui ne peuvent pas le reconnaître correctement simplement parce qu'il manque un espace. </strong></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="Analyse des raisons pour lesquelles vous ne devriez pas utiliser l'échange CSS Expression_Experience" href="http://m.php.cn/fr/faq/667.html">Analyse des raisons pour lesquelles vous ne devriez pas utiliser l'échange CSS Expression_Experience</a></span><span>Article suivant：<a class="dBlack" title="Analyse des raisons pour lesquelles vous ne devriez pas utiliser l'échange CSS Expression_Experience" href="http://m.php.cn/fr/faq/669.html">Analyse des raisons pour lesquelles vous ne devriez pas utiliser l'échange CSS Expression_Experience</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/1796680410.html" title="Comment résoudre les problèmes de taille d'arrière-plan : problèmes de couverture sur Safari mobile ?" class="aBlack">Comment résoudre les problèmes de taille d'arrière-plan : problèmes de couverture sur Safari mobile ?</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/1796680125.html" title="Comment geler le panneau Chrome DevTools pour l'inspection Popover ?" class="aBlack">Comment geler le panneau Chrome DevTools pour l'inspection Popover ?</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/1796680283.html" title="Pourquoi ma zone de texte apparaît-elle plus haute que la durée de sa sœur ?" class="aBlack">Pourquoi ma zone de texte apparaît-elle plus haute que la durée de sa sœur ?</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/1796680292.html" title="Comment limiter les limites de défilement des éléments en CSS ?" class="aBlack">Comment limiter les limites de défilement des éléments en CSS ?</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/1796680314.html" title="Comment donner à tous les éléments la même largeur que le plus large en CSS sans JavaScript ?" class="aBlack">Comment donner à tous les éléments la même largeur que le plus large en CSS sans JavaScript ?</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><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/fr/"><b class="icon1"></b><p>Maison</p></a></li><li><a href="http://m.php.cn/fr/course.html"><b class="icon2"></b><p>Cours</p></a></li><li><a href="http://m.php.cn/fr/wenda.html"><b class="icon4"></b><p>Questions et réponses</p></a></li><li><a href="http://m.php.cn/fr/login"><b class="icon5"></b><p>Mon</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/fr/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/fr/"><b class="icon1"></b><span>Maison</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/course.html"><b class="icon2"></b><span>Cours</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/article.html"><b class="icon3"></b><span>Article</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/wenda.html"><b class="icon4"></b><span>Questions et réponses</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/dic.html"><b class="icon6"></b><span>Dictionnaire</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/course/type/99.html"><b class="icon7"></b><span>Manuel</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/xiazai/"><b class="icon8"></b><span>Télécharger</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/faq/zt" title="Sujet"><b class="icon12"></b><span>Sujet</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/fr/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/fr/" >Maison</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/article.html" class="hover">Article</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/wenda.html" >Questions et réponses</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/course.html" >Cours</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/faq/zt" >Sujet</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/xiazai" >Télécharger</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/game" >Jeu</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/dic.html" >Dictionnaire</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a onclick="javascript:setlang('en');" class="language course-right-orders chooselan " href="javascript:;"><span>English</span><span>（EN）</span></a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a><a onclick="javascript:setlang('ja');" class="language course-right-orders chooselan " href="javascript:;"><span>日本語</span><span>（JA）</span></a><a onclick="javascript:setlang('ko');" class="language course-right-orders chooselan " href="javascript:;"><span>한국어</span><span>（KO）</span></a><a onclick="javascript:setlang('ms');" class="language course-right-orders chooselan " href="javascript:;"><span>Melayu</span><span>（MS）</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>Français</span><span>（FR）</span></a><a onclick="javascript:setlang('de');" class="language course-right-orders chooselan " href="javascript:;"><span>Deutsch</span><span>（DE）</span></a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', { slidesPerView : 'auto', observer: true,//修改swiper自己或子元素时，自动初始化swiper observeParents: true,//修改swiper的父元素时，自动初始化swiper }); </script></div></div><!--顶部导航 end--><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>