2015-09-06

忽略浏览器对部分HTML的解析

当我们需要忽略浏览器对部分HTML解析的时候，HTML代码中的<plaintext>和<xmp></xmp>可以帮我们实现。

<plaintext>是单标签，它插入到HTML代码中时，其__后面的所有HTML标签全部失效__，即浏览器对<plaintext>后面所有的HTML标签不作解析，直接在页面上显示。因为本博客是用markdown写的，当时没有给<plaintext>标签加反单引号，结果导致其后所有代码浏览器都不解析了0.0

<xmp></xmp>是双标签，它__只使其包含的内容中的标签失效__，<xmp></xmp>的使用更为普遍。

###效果：

未使用<xmp></xmp>：
使用<xmp></xmp>：

``标签的效果大家可以自己试试 :)</plaintext> </div> <footer> <div class="nirdonkey"> <div class="tags"> <a href="/tags/前端/">前端</a> </div> </div> <div class="bdsharebuttonbox"><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网"></a><a href="#" class="bds_tieba" data-cmd="tieba" title="分享到百度贴吧"></a><a href="#" class="bds_bdhome" data-cmd="bdhome" title="分享到百度新首页"></a><a href="#" class="bds_mshare" data-cmd="mshare" title="分享到一键分享"></a><a href="#" class="bds_more" data-cmd="more"></a> </div> <div class="clearfix"></div> <div class="clearfix"></div> </footer> </div> </article> <nav id="pagination" > <a href="/2015/11/06/微信分享之后点击不能生成签名（invalid-signature）/" class="alignleft prev" >上一页</a> <a href="/2015/07/16/雅虎十四条/" class="alignright next" >下一页</a> <div class="clearfix"></div> </nav> <section id="comment">  <div class="ds-thread"></div>   <script type="text/javascript"> var duoshuoQuery = {short_name:"landerqi"}; (function() { var ds = document.createElement('script'); ds.type = 'text/javascript';ds.async = true; ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js'; ds.charset = 'UTF-8'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ds); })(); </script>  </section> </div></div> <aside id="sidebar" class="alignright"> <div class="search"> <form action="//google.com/search" method="get" accept-charset="utf-8"> <input type="search" name="q" results="0" placeholder="搜索"> <input type="hidden" name="q" value="site:landerqi.com"> </form> </div> <div class="widget tag"> <h3 class="title">标签</h3> <ul class="entry"> <li><a href="/tags/AI/">AI</a><small>2</small></li> <li><a href="/tags/Linux/">Linux</a><small>1</small></li> <li><a href="/tags/codebase/">codebase</a><small>1</small></li> <li><a href="/tags/css3/">css3</a><small>2</small></li> <li><a href="/tags/git/">git</a><small>2</small></li> <li><a href="/tags/hexo/">hexo</a><small>4</small></li> <li><a href="/tags/javascript/">javascript</a><small>11</small></li> <li><a href="/tags/python/">python</a><small>2</small></li> <li><a href="/tags/前端/">前端</a><small>8</small></li> <li><a href="/tags/工具/">工具</a><small>7</small></li> <li><a href="/tags/微信/">微信</a><small>3</small></li> <li><a href="/tags/摄影/">摄影</a><small>2</small></li> <li><a href="/tags/数据库/">数据库</a><small>1</small></li> <li><a href="/tags/解决问题/">解决问题</a><small>4</small></li> <li><a href="/tags/读书笔记/">读书笔记</a><small>5</small></li> </ul> </div> <div class="widget tagcloud"> <h3 class="title">标签云</h3> <div class="entry"> <a href="/tags/AI/" style="font-size: 11.43px;">AI</a> <a href="/tags/Linux/" style="font-size: 10px;">Linux</a> <a href="/tags/codebase/" style="font-size: 10px;">codebase</a> <a href="/tags/css3/" style="font-size: 11.43px;">css3</a> <a href="/tags/git/" style="font-size: 11.43px;">git</a> <a href="/tags/hexo/" style="font-size: 14.29px;">hexo</a> <a href="/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/tags/python/" style="font-size: 11.43px;">python</a> <a href="/tags/%E5%89%8D%E7%AB%AF/" style="font-size: 18.57px;">前端</a> <a href="/tags/%E5%B7%A5%E5%85%B7/" style="font-size: 17.14px;">工具</a> <a href="/tags/%E5%BE%AE%E4%BF%A1/" style="font-size: 12.86px;">微信</a> <a href="/tags/%E6%91%84%E5%BD%B1/" style="font-size: 11.43px;">摄影</a> <a href="/tags/%E6%95%B0%E6%8D%AE%E5%BA%93/" style="font-size: 10px;">数据库</a> <a href="/tags/%E8%A7%A3%E5%86%B3%E9%97%AE%E9%A2%98/" style="font-size: 14.29px;">解决问题</a> <a href="/tags/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/" style="font-size: 15.71px;">读书笔记</a> </div> </div> <div class="widget tag"> <h3 class="title">简介</h3> <ul class="entry"> <li>真名：谢奇</li> <li>网名：夢想家 | landerqi</li> <li>所在地：广州</li> <li>Theme: <a target="_blank" rel="noopener" href="https://github.com/landerqi/lightqi">Lightqi</a></li> <li>想交友的朋友<a href="http://landerqi.com/about">联系我</a> :)</li> <li>QQ 号：379394707</li> </ul> </div> <div class="widget tag"> <h3 class="title">友情链接</h3> <ul class="entry"> <li><a href="http://landerqi.com/" title="Landerqi's Blog">Landerqi Blog</a></li> </ul> </div> </aside> <div class="clearfix"></div> </div> <footer id="footer" class="inner"><div class="alignleft"> © 2021 Landerqi </div> <div class="clearfix"></div></footer> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="/js/jquery.imagesloaded.min.js"></script> <script src="/js/gallery.js"></script> <link rel="stylesheet" href="/fancybox/jquery.fancybox.css" media="screen" type="text/css"> <script src="/fancybox/jquery.fancybox.pack.js"></script> <script type="text/javascript"> (function($){ $('.fancybox').fancybox(); })(jQuery); </script> <script> window._bd_share_config = { "common": { "bdSnsKey": {}, "bdText": "", "bdMini": "2", "bdPic": "", "bdStyle": "0", "bdSize": "16" }, "share": {}, "image": { "viewList": ["qzone", "tsina", "tqq", "renren", "t163"], "viewText": "分享到：", "viewSize": "16" }, "selectShare": { "bdContainerClass": null, "bdSelectMiniList": ["qzone", "tsina", "tqq", "renren", "t163"] } }; with(document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=857b0ced057ae80679bef08f6ee865cf.js?cdnversion=' + ~ ( - new Date() / 36e5)]; </script> </body> <script> var tocEx = function(el){ var imgNameArray = ['26218_1569385509547936555', '26218_1569385571948012698', '26218_1569385588416891393', '26218_1569385624870002563', '26218_1569385644100191591', '26218_1569385674244674777', '26218_1569385689852633253', '26218_1569385707148100060', '26218_1569385724292974086', '26218_1569385995556145672'] var bg = document.getElementById(el); var dataPrefix = bg.attributes["data-prefix"].value; var dataExt = bg.attributes["data-ext"].value; var randomNumber = Math.floor(Math.random() * 10); var bgUrl = dataPrefix + imgNameArray[randomNumber] + dataExt; bg.style.backgroundImage='url('+ bgUrl +')'; }('bg'); </script> </html>