XHTML 태그의 자기 폐쇄형 작성 방식의 단점 분석_체험교류

XML 관련 개발에 익숙하다면 이러한 작성 방식에 익숙할 것입니다. 자식 노드를 포함하지 않는 XML의 모든 요소를 ​​이런 방식으로 작성할 수 있다고 생각하면 XHTML에서 내용이 없는 태그도 작성할 수 있습니다. 이쪽으로. 물론 XHTML에서는 이론적으로 모든 태그를 자체 닫는 방식으로 작성할 수 있습니다. 그러나 브라우저 호환성으로 인해 IE가 일부 태그의 자체 닫는 방식을 올바르게 인식할 수 없다는 문제가 발생했습니다.

다음 XHTML 코드를 입력하고 IE에서 찾아보세요. <strong><font face="新宋体" size="3"><p>hello <script type="text/javascript" /> world</p></font></strong>, 앞쪽에는 hello만 표시되고 뒤쪽에는 world가 표시되지 않는 것을 알 수 있습니다. 많은 사람들이 이 문제에 직면하여 몇 시간을 소비했지만 여전히 합리적인 설명을 찾지 못했습니다.

설명은 또 다른 유사한 코드인 <strong><font face="新宋体" size="3"><p>hello <textarea /> world</p></font></strong>에서 나왔습니다. IE의 표시 효과를 보고 합리적인 설명을 얻을 수 있습니까? 앞부분의 hello는 정상적으로 표시되고 뒷부분의 world는 텍스트 영역에 표시되는 것을 볼 수 있습니다. 이는 IE가 textarea 태그 자체가 닫혔음을 올바르게 인식하지 못하고 다음 내용을 다음과 같은 내용으로 처리한다는 것을 의미합니다. 내부 콘텐츠가 닫히지 않은 경우 텍스트 영역입니다.

이제 우리는 이전 코드가 스크립트의 일부로 인식되기 때문에 왜 뒤에 있는 세계를 볼 수 없는지 이해합니다. 이는 XHTML을 사용할 때 XML만큼 자유롭게 자체 닫는 쓰기를 사용할 수 없음을 보여줍니다. 닫힐 필요가 없는 몇 가지 태그만 자체 닫는 태그로 작성할 수 있습니다. 폐쇄형 글쓰기 방식이 없습니다.

마지막으로, 사실 IE만이 파서가 약한 것이 아니라는 사실을 상기시켜 드리고 싶습니다. 많은 곳에서 느슨한 파서로 인해 문제가 발생할 수 있습니다. 따라서 XHTML을 작성할 때 일부 상속을 수용해야 합니다. 오래된 HTML에서는 그것이 표준을 충족한다고 생각하기 때문에 실제 XML처럼 그냥 작성할 수는 없습니다. 믿을 수 없나요? 그런 다음 다른 것을 시도해보세요: <strong><font face="新宋体" size="3"><p>hello <br></br> world</p></font></strong>, IE와 Opera의 디스플레이 효과에 주목하세요.

업데이트: 일부 독자들은 내가 제시한 예제가 XHTML 사양을 따르지 않는다고 생각하므로 XHTML 사양을 먼저 읽어보시기 바랍니다. 빈 요소 섹션의 중국어 번역은 다음과 같습니다. "빈 요소에는 닫는 태그가 있거나 />로 끝나야 합니다(예:
또는 <). ;hr>. HTML4 브라우저와의 하위 호환성 보장에 대한 자세한 내용은 HTML 호환성 표준을 참조하세요. 이는 사양에도 나와 있습니다. 는
의 작성 방법이 XHTML 사양을 준수하지만 HTML4 표준과 호환되지 않음을 보여줍니다. 그렇다면 XHTML은 HTML4와 호환됩니까? 호환성 문제 섹션을 살펴보겠습니다. 중국어 번역은 다음과 같습니다. “XHTML1.0 문서는 기존 브라우저와 호환될 필요가 없지만 실제로는 어렵지 않습니다. "따라서 XHTML은 문서가 이전 버전과 호환되어야 한다고 규정하지 않습니다. 제가 제공한 예는 모두 합법적인 XHTML 문서 조각이며 완전한 XHTML에 나타날 때 모두 W3C Markup Validation Service 확인.

다시 업데이트: 사실 이 글을 쓰는 목적은 XHTML 사양을 준수하는 것만으로 충분하다는 것을 강조하려는 것도 아니고, XHTML을 준수하고 HTML4와 호환되는 것만으로도 충분하다는 것을 강조하려는 것도 아닙니다. 하지만 그 이상의 호환성을 고려해야 할 상황입니다. 예를 들어 CMS에서는 사용자가 HTML을 제출할 수 있으며, 제출된 HTML은 SgmlReader 또는 기타 방법을 통해 XHTML로 형식화되며, 이때 < /textarea> 사용자가 제출한 것입니다. 이 경우에는 XML 처리가 어떠한 사양도 위반하지 않으며 각 단계에서 문제를 찾기 위해 추적 및 디버그가 필요합니다. 처리의 의미는 입니다. 게다가 <br />를 <br/>로 쓰지 않는 것이 가장 좋은데, 공백이 하나만 빠져도 제대로 인식하지 못하는 정신지체 파서가 있기 때문이다. </strong></p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>성명：</span><div>본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.</div></div></div><div class="nphpSytBox"><span>이전 기사：<a class="dBlack" title="CSS Expression_Experience 교환을 사용하면 안되는 이유 분석" href="http://m.php.cn/ko/faq/667.html">CSS Expression_Experience 교환을 사용하면 안되는 이유 분석</a></span><span>다음 기사：<a class="dBlack" title="CSS Expression_Experience 교환을 사용하면 안되는 이유 분석" href="http://m.php.cn/ko/faq/669.html">CSS Expression_Experience 교환을 사용하면 안되는 이유 분석</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>관련 기사</h2><em><a href="http://m.php.cn/ko/article.html" class="bBlack"><i>더보기</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/ko/faq/1796683910.html" title="Bootstrap을 사용하여 검색 입력 필드에 아이콘을 추가하는 방법은 무엇입니까?" class="aBlack">Bootstrap을 사용하여 검색 입력 필드에 아이콘을 추가하는 방법은 무엇입니까?</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/1796683911.html" title="SASS/SCSS를 위한 프로덕션용 JavaScript 구현이 있습니까?" class="aBlack">SASS/SCSS를 위한 프로덕션용 JavaScript 구현이 있습니까?</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/1796683914.html" title="Firefox 및 Internet Explorer에서 인쇄할 때 배경 이미지가 사라지는 이유는 무엇입니까?" class="aBlack">Firefox 및 Internet Explorer에서 인쇄할 때 배경 이미지가 사라지는 이유는 무엇입니까?</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/1796683920.html" title="HTML/CSS에서 세로 열을 가로로 재정렬하는 방법은 무엇입니까?" class="aBlack">HTML/CSS에서 세로 열을 가로로 재정렬하는 방법은 무엇입니까?</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/1796683940.html" title="CSS3 및 SVG를 사용하여 테두리가 있는 물결 모양을 만드는 방법은 무엇입니까?" class="aBlack">CSS3 및 SVG를 사용하여 테두리가 있는 물결 모양을 만드는 방법은 무엇입니까?</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>공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！</p></div><div class="footermid"><a href="http://m.php.cn/ko/about/us.html">회사 소개</a><a href="http://m.php.cn/ko/about/disclaimer.html">부인 성명</a><a href="http://m.php.cn/ko/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>