HTML标签教程
tags教程
HTML ASCII 参考手册
HTML Emoji
HTML ISO-8859-1 参考手册
HTML main 标签
HTML URL 编码 参考手册
HTML 事件属性
HTML 元素和有效 DOCTYPES
HTML 全局属性
HTML 参考手册- (HTML5 标准)
HTML 取色器-拾色器
HTML 国家-地区 参考手册
HTML 字符集
HTML 注释标签
HTML 符号实体参考手册
HTML 语言代码 参考手册
HTML 音频-视频 DOM 参考手册
HTML 颜色名
HTML 颜色混搭
HTML5 canvas参考手册
HTML5的mark标签
HTML5的progress标签
HTML的!DOCTYPE声明
HTML的abbr标签
HTML的acronym标签 - HTML5 不支持
HTML的address标签
HTML的applet标签 - HTML5 不支持
HTML的area标签
HTML的article标签
HTML的aside标签
HTML的audio标签
HTML的a标签
HTML的basefont标签 - HTML5 不支持
HTML的base标签
HTML的bdi标签
HTML的bdo标签
HTML的big标签 - HTML5 不支持
HTML的blockquote标签
HTML的body标签
HTML的br标签
HTML的button标签
HTML的b标签
HTML的canvas标签
HTML的caption标签
HTML的center标签 - HTML5 不支持
HTML的cite标签
HTML的code标签
HTML的colgroup标签
HTML的col标签
HTML的command标签
HTML的datalist标签
HTML的dd标签
HTML的del标签
HTML的details标签
HTML的dfn标签
HTML的dialog标签
HTML的dir标签 - HTML5 不支持
HTML的div标签
HTML的dl标签
HTML的dt标签
HTML的embed标签
HTML的em标签
HTML的fieldset标签
HTML的figcaption标签
HTML的figure标签
HTML的font标签 - HTML5 不支持
HTML的footer标签
HTML的form标签
HTML的frameset标签 - HTML5 不支持
HTML的frame标签 - HTML5 不支持
HTML的h1-的h6标签
HTML的header标签
HTML的head标签
HTML的hgroup标签
HTML的hr标签
HTML的html标签
HTML的iframe标签
HTML的img标签
HTML的input标签
HTML的ins标签
HTML的i标签
HTML的kbd标签
HTML的keygen标签
HTML的label标签
HTML的legend标签
HTML的link标签
HTML的li标签
HTML的map标签
HTML的menu标签
HTML的meta标签
HTML的meter标签
HTML的nav标签
HTML的noframes标签HTML5不支持该标签
HTML的noscript标签
HTML的object标签
HTML的ol标签
HTML的optgroup标签
HTML的option标签
HTML的output标签
HTML的param标签
HTML的picture元素
HTML的pre标签
HTML的p标签
HTML的q标签
HTML的rp标签
HTML的rt标签
HTML的ruby标签
HTML的samp标签
HTML的script标签
HTML的section标签
HTML的select标签
HTML的small标签
HTML的source标签
HTML的span标签
HTML的strike标签 - HTML5 不支持
HTML的strong标签
HTML的style标签
HTML的sub标签
HTML的summary标签
HTML的sup标签
HTML的s标签
HTML的table标签
HTML的tbody标签
HTML的td标签
HTML的template标签
HTML的textarea标签
HTML的tfoot标签
HTML的thead标签
HTML的th标签
HTML的time标签
HTML的title标签
HTML的track标签
HTML的tr标签
HTML的tt标签 - HTML5 不支持
HTML的ul标签
HTML的u标签
HTML的var标签
HTML的video标签
HTML的wbr标签
HTTP 方法：GET 对比 POST
HTTP 状态消息
Px、Em 换算工具
键盘快捷键
HTML中的noframes标签
HTML5不支持noframes标签的原因
替代方案
结论
HTML的noframes标签HTML5不支持该标签
HTML中的noframes标签
在HTML中，noframes标签用于定义在不支持框架的浏览器中显示的备用内容。它是HTML4的一部分，但在HTML5中已被废弃，因此不再被支持。
在使用HTML框架时，我们通常使用
标签来定义框架，然后使用
标签来定义每个框架的内容。在不支持框架的浏览器中，用户无法看到这些框架。这时，我们可以使用
标签来显示备用内容。例如：</p> <div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><<span style="color:#000080">frameset</span> <span style="color:#008080">cols</span><span style="color:#000;font-weight:bold">=</span><span style="color:#d14">"25%,75%"</span>> </span></span><span style="display:flex;"><span> <<span style="color:#000080">frame</span> <span style="color:#008080">src</span><span style="color:#000;font-weight:bold">=</span><span style="color:#d14">"menu.html"</span> /> </span></span><span style="display:flex;"><span> <<span style="color:#000080">frame</span> <span style="color:#008080">src</span><span style="color:#000;font-weight:bold">=</span><span style="color:#d14">"content.html"</span> /> </span></span><span style="display:flex;"><span> <<span style="color:#000080">noframes</span>> </span></span><span style="display:flex;"><span> <<span style="color:#000080">p</span>>Your browser does not support frames.</<span style="color:#000080">p</span>> </span></span><span style="display:flex;"><span> <<span style="color:#000080">p</span>>Please upgrade to a newer browser.</<span style="color:#000080">p</span>> </span></span><span style="display:flex;"><span> </<span style="color:#000080">noframes</span>> </span></span><span style="display:flex;"><span></<span style="color:#000080">frameset</span>> </span></span></code></pre></div><p>在上面的例子中，如果用户使用不支持框架的浏览器打开该页面，就会显示<noframes>标签中的内容，而不是框架布局。</p> <h3 id="html5不支持noframes标签的原因">HTML5不支持noframes标签的原因</h3> <p>HTML5已经放弃支持noframes标签，因为现代浏览器都支持框架，而且框架已经过时了，不再是Web标准的一部分。此外，noframes标签也会妨碍无障碍性的实现。无障碍性不仅是合规性的要求，而且还是让每个人都能更好地访问Web的一个重要方面。</p> <p>因此，在现代Web开发中，noframes标签已经不再使用，开发人员可以使用其他替代方案，如CSS或Javascript来实现备用内容的显示。</p> <h3 id="替代方案">替代方案</h3> <h4 id="1-使用html5的嵌套文档嵌入">1. 使用Html5的嵌套文档嵌入</h4> <p>可以使用HTML5的嵌套文档嵌入<nestediframe>标签来显示备用的内容，如下所示：</p> <div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><<span style="color:#000080">iframe</span> <span style="color:#008080">src</span><span style="color:#000;font-weight:bold">=</span><span style="color:#d14">"menu.html"</span>></<span style="color:#000080">iframe</span>> </span></span><span style="display:flex;"><span><<span style="color:#000080">iframe</span> <span style="color:#008080">src</span><span style="color:#000;font-weight:bold">=</span><span style="color:#d14">"content.html"</span>></<span style="color:#000080">iframe</span>> </span></span><span style="display:flex;"><span><<span style="color:#000080">nestediframe</span>> </span></span><span style="display:flex;"><span> <<span style="color:#000080">p</span>>Your browser does not support iframes.</<span style="color:#000080">p</span>> </span></span><span style="display:flex;"><span> <<span style="color:#000080">p</span>>Please upgrade to a newer browser.</<span style="color:#000080">p</span>> </span></span><span style="display:flex;"><span></<span style="color:#000080">nestediframe</span>> </span></span></code></pre></div><p>上面的代码演示了如何使用<nestediframe>标签来显示备用内容。如果用户的浏览器不支持嵌套文档嵌入，则会显示<nestediframe>标签中的内容。</p> <h4 id="2-使用css">2. 使用CSS</h4> <p>可以使用CSS来隐藏框架和其内容，并在不支持框架的浏览器上显示备用内容。如下所示：</p> <div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><<span style="color:#000080">div</span> <span style="color:#008080">id</span><span style="color:#000;font-weight:bold">=</span><span style="color:#d14">"frames"</span>> </span></span><span style="display:flex;"><span> <<span style="color:#000080">iframe</span> <span style="color:#008080">src</span><span style="color:#000;font-weight:bold">=</span><span style="color:#d14">"menu.html"</span>></<span style="color:#000080">iframe</span>> </span></span><span style="display:flex;"><span> <<span style="color:#000080">iframe</span> <span style="color:#008080">src</span><span style="color:#000;font-weight:bold">=</span><span style="color:#d14">"content.html"</span>></<span style="color:#000080">iframe</span>> </span></span><span style="display:flex;"><span></<span style="color:#000080">div</span>> </span></span><span style="display:flex;"><span><<span style="color:#000080">div</span> <span style="color:#008080">id</span><span style="color:#000;font-weight:bold">=</span><span style="color:#d14">"noframes"</span>> </span></span><span style="display:flex;"><span> <<span style="color:#000080">p</span>>Your browser does not support frames.</<span style="color:#000080">p</span>> </span></span><span style="display:flex;"><span> <<span style="color:#000080">p</span>>Please upgrade to a newer browser.</<span style="color:#000080">p</span>> </span></span><span style="display:flex;"><span></<span style="color:#000080">div</span>> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><<span style="color:#000080">style</span>> </span></span><span style="display:flex;"><span> #<span style="color:#555">frames</span> { </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">display</span>: <span style="color:#000;font-weight:bold">none</span>; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> #<span style="color:#555">noframes</span> { </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">display</span>: <span style="color:#000;font-weight:bold">block</span>; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> @<span style="color:#000;font-weight:bold">media</span> <span style="color:#000080">screen</span> <span style="color:#000080">and</span> <span style="color:#000;font-weight:bold">(</span><span style="color:#000080">min-width</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#000080">800px</span><span style="color:#000;font-weight:bold">)</span> { </span></span><span style="display:flex;"><span> #<span style="color:#555">frames</span> { </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">display</span>: <span style="color:#000;font-weight:bold">block</span>; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> #<span style="color:#555">noframes</span> { </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">display</span>: <span style="color:#000;font-weight:bold">none</span>; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span></<span style="color:#000080">style</span>> </span></span></code></pre></div><p>上述代码显示了如何使用CSS在不支持框架的浏览器上显示备用内容。这个方法的实现方式是使用阻止框架的display:none样式表，并使用媒体查询来检查屏幕大小。如果屏幕大小大于800像素，就会显示框架内容。</p> <h4 id="3-使用javascript">3. 使用Javascript</h4> <p>可以使用Javascript来检查浏览器是否支持框架，并在不支持的浏览器中显示备用内容。如下所示：</p> <div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><<span style="color:#000080">iframe</span> <span style="color:#008080">src</span><span style="color:#000;font-weight:bold">=</span><span style="color:#d14">"menu.html"</span>></<span style="color:#000080">iframe</span>> </span></span><span style="display:flex;"><span><<span style="color:#000080">iframe</span> <span style="color:#008080">src</span><span style="color:#000;font-weight:bold">=</span><span style="color:#d14">"content.html"</span>></<span style="color:#000080">iframe</span>> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><<span style="color:#000080">script</span>> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">if</span> (<span style="color:#000;font-weight:bold">!</span><span style="color:#0086b3">window</span>.frames) { </span></span><span style="display:flex;"><span> <span style="color:#0086b3">document</span>.write(<span style="color:#d14">"<p>Your browser does not support frames.</p><p>Please upgrade to a newer browser.</p>"</span>); </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span></<span style="color:#000080">script</span>> </span></span></code></pre></div><p>上面的代码演示了如何使用Javascript来显示备用内容。如果浏览器不支持框架，则会使用document.write方法来显示备用内容。</p> <h3 id="结论">结论</h3> <p>虽然HTML5不再支持noframes标签，但是我们有许多其他选择来显示备用内容：可以使用<nestediframe>标签、CSS或Javascript来实现备用内容的显示。选择适合你的项目的最佳方案来确保您的网站对所有用户和浏览器提供统一的体验。</p> </div> <div class="row"><div class="position-relative mx-auto col-lg-9"> <div class=" overflow-hidden p-3 mt-5 "> <div class="d-flex justify-content-between"><a class="p-1 mr-3 d-inline-block " href="/html-tags/tags%E6%95%99%E7%A8%8B/html%E7%9A%84nav%E6%A0%87%E7%AD%BE.html" title="HTML的nav标签"><i class="fas fa-chevron-left p-1"></i>HTML的nav标签</a> <a class="p-1 ml-3 d-inline-block text-right" href="/html-tags/tags%E6%95%99%E7%A8%8B/html%E7%9A%84noscript%E6%A0%87%E7%AD%BE.html" title="HTML的noscript标签">HTML的noscript标签<i class="fas fa-chevron-right p-1"></i></a> </div> </div> </div></div> </main> </main> </div> <script src="/lib/jquery.min.js"></script> <script src="/lib/popper.min.js"></script> <script src="/js/bootstrap.min.js"></script> <script src="/js/listen.js"></script> <script type="text/javascript" src="/plugins/lunr.min.js"></script> <script type="text/javascript" src="/plugins/auto-complete.js"></script> <link href="/plugins/auto-complete.css" rel="stylesheet"> <script type="text/javascript"> var baseurl = "\/"; </script> <script type="text/javascript" src="/plugins/search.js"></script> <script type="text/javascript" src="/plugins/favorites.js"></script> <script type="text/javascript" src="/plugins/clipboard.js"></script> <script> new ClipboardJS('.btn'); </script> <script> !function(p){"use strict";!function(t){var s=window,e=document,i=p,c="".concat("https:"===e.location.protocol?"https://":"http://","sdk.51.la/js-sdk-pro.min.js"),n=e.createElement("script"),r=e.getElementsByTagName("script")[0];n.type="text/javascript",n.setAttribute("charset","UTF-8"),n.async=!0,n.src=c,n.id="LA_COLLECT",i.d=n;var o=function(){s.LA.ids.push(i)};s.LA?s.LA.ids&&o():(s.LA=p,s.LA.ids=[],o()),r.parentNode.insertBefore(n,r)}()}({id:"Jvf7me2fcYRdEqf0",ck:"Jvf7me2fcYRdEqf0"}); </script> </body> </html>