【HTML 教程】iframeweb前端开发共 2082字，需浏览 5分钟 ·2020-12-08 01:29 作者 | 阮一峰标签用于在网页里面嵌入其他网页。</span></section><h2 style="text-align: left;margin-top: 15px;margin-bottom: 15px;line-height: 1.75em;"><span style="color: rgb(26, 177, 204);"><strong><span style="color: rgb(26, 177, 204);font-size: 16px;">1、基本用法</span></strong></span></h2><section style="text-align: left;margin-top: 15px;margin-bottom: 15px;line-height: 1.75em;"><span style="font-size: 16px;"><iframe>标签生成一个指定区域，在该区域中嵌入其他网页。它是一个容器元素，如果浏览器不支持<iframe>，就会显示内部的子元素。</span></section><pre style="box-sizing: inherit;margin-bottom: 1em;padding: 1.25em 1.5em;-webkit-font-smoothing: auto;background: rgb(35, 36, 31);color: rgb(88, 110, 117);font-size: 0.875em;overflow: auto;overflow-wrap: normal;border-radius: 0.5rem;text-align: left;"><code style="box-sizing: inherit;-webkit-font-smoothing: auto;font-family: Consolas, "Courier New", Courier, FreeMono, monospace;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;color: rgb(248, 248, 242);font-size: 1em;direction: ltr;"><span style="box-sizing: inherit;font-style: inherit;font-weight: inherit;"><<span style="box-sizing: inherit;font-style: inherit;font-weight: inherit;color: rgb(249, 38, 114);">iframe</span> <span style="box-sizing: inherit;font-style: inherit;font-weight: inherit;color: rgb(249, 38, 114);">src</span>=<span style="box-sizing: inherit;font-style: inherit;font-weight: inherit;color: rgb(230, 219, 116);">"https://www.example.com"</span><br> <span style="box-sizing: inherit;font-style: inherit;font-weight: inherit;color: rgb(249, 38, 114);">width</span>=<span style="box-sizing: inherit;font-style: inherit;font-weight: inherit;color: rgb(230, 219, 116);">"100%"</span> <span style="box-sizing: inherit;font-style: inherit;font-weight: inherit;color: rgb(249, 38, 114);">height</span>=<span style="box-sizing: inherit;font-style: inherit;font-weight: inherit;color: rgb(230, 219, 116);">"500"</span> <span style="box-sizing: inherit;font-style: inherit;font-weight: inherit;color: rgb(249, 38, 114);">frameborder</span>=<span style="box-sizing: inherit;font-style: inherit;font-weight: inherit;color: rgb(230, 219, 116);">"0"</span><br> <span style="box-sizing: inherit;font-style: inherit;font-weight: inherit;color: rgb(249, 38, 114);">allowfullscreen</span> <span style="box-sizing: inherit;font-style: inherit;font-weight: inherit;color: rgb(249, 38, 114);">sandbox</span>></span><br> <span style="box-sizing: inherit;font-style: inherit;font-weight: inherit;"><<span style="box-sizing: inherit;font-style: inherit;font-weight: inherit;color: rgb(249, 38, 114);">p</span>><<span style="box-sizing: inherit;font-style: inherit;font-weight: inherit;color: rgb(249, 38, 114);">a</span> <span style="box-sizing: inherit;font-style: inherit;font-weight: inherit;color: rgb(249, 38, 114);">href</span>=<span style="box-sizing: inherit;font-style: inherit;font-weight: inherit;color: rgb(230, 219, 116);">"https://www.example.com"</span>></span>点击打开嵌入页面<span style="box-sizing: inherit;font-style: inherit;font-weight: inherit;"></<span style="box-sizing: inherit;font-style: inherit;font-weight: inherit;color: rgb(249, 38, 114);">a</span>></<span style="box-sizing: inherit;font-style: inherit;font-weight: inherit;color: rgb(249, 38, 114);">p</span>></span><br><span style="box-sizing: inherit;font-style: inherit;font-weight: inherit;"></<span style="box-sizing: inherit;font-style: inherit;font-weight: inherit;color: rgb(249, 38, 114);">iframe</span>></span><br></code></pre><p style="text-align: left;margin-top: 15px;margin-bottom: 15px;line-height: 1.75em;"><span style="font-size: 16px;">上面的代码在当前网页嵌入https://www.example.com，显示区域的宽度是100%，高度是500像素。如果当前浏览器不支持<iframe>，则会显示一个链接，让用户点击。</span></p><p style="text-align: left;margin-top: 15px;margin-bottom: 15px;line-height: 1.75em;"><span style="font-size: 16px;">浏览器普遍支持<iframe>，所以内部的子元素可以不写。</span></p><p style="text-align: left;margin-top: 15px;margin-bottom: 15px;line-height: 1.75em;"><span style="font-size: 16px;"><iframe>的属性如下。</span></p><ul class="list-paddingleft-2" style="list-style-type: disc;"><li><p style="text-align: left;"><span style="font-size: 16px;">allowfullscreen：允许嵌入的网页全屏显示，需要全屏 API 的支持，请参考相关的 JavaScript 教程。</span></p></li><li><p style="text-align: left;"><span style="font-size: 16px;">frameborder：是否绘制边框，0为不绘制，1为绘制（默认值）。建议尽量少用这个属性，而是在 CSS 里面设置样式。</span></p></li><li><p style="text-align: left;"><span style="font-size: 16px;">src：嵌入的网页的 URL。</span></p></li><li><p style="text-align: left;"><span style="font-size: 16px;">width：显示区域的宽度。</span></p></li><li><p style="text-align: left;"><span style="font-size: 16px;">height：显示区域的高度。</span></p></li><li><p style="text-align: left;"><span style="font-size: 16px;">sandbox：设置嵌入的网页的权限，详见下文。</span></p></li><li><p style="text-align: left;"><span style="font-size: 16px;">importance：浏览器下载嵌入的网页的优先级，可以设置三个值。high表示高优先级，low表示低优先级，auto表示由浏览器自行决定。</span></p></li><li><p style="text-align: left;"><span style="font-size: 16px;">name：内嵌窗口的名称，可以用于<a>、<form>、<base>的target属性。</span></p></li><li><p style="text-align: left;"><span style="font-size: 16px;">referrerpolicy：请求嵌入网页时，HTTP 请求的Referer字段的设置。参见<a>标签的介绍。</span></p></li></ul><h2 style="text-align: left;margin-top: 15px;margin-bottom: 15px;line-height: 1.75em;"><strong><span style="font-size: 16px;color: rgb(26, 177, 204);">2、sandbox 属性</span></strong></h2><p style="text-align: left;margin-top: 15px;margin-bottom: 15px;line-height: 1.75em;"><span style="font-size: 16px;">嵌入的网页默认具有正常权限，比如执行脚本、提交表单、弹出窗口等。如果嵌入的网页是其他网站的页面，你不了解对方会执行什么操作，因此就存在安全风险。为了限制<iframe>的风险，HTML 提供了sandbox属性，允许设置嵌入的网页的权限，等同于提供了一个隔离层，即“沙箱”。</span></p><p style="text-align: left;margin-top: 15px;margin-bottom: 15px;line-height: 1.75em;"><span style="font-size: 16px;">sandbox可以当作布尔属性使用，表示打开所有限制。</span></p><pre style="box-sizing: inherit;margin-bottom: 1em;padding: 1.25em 1.5em;-webkit-font-smoothing: auto;background: rgb(35, 36, 31);color: rgb(88, 110, 117);font-size: 0.875em;overflow: auto;overflow-wrap: normal;border-radius: 0.5rem;text-align: left;"><code style="box-sizing: inherit;-webkit-font-smoothing: auto;font-family: Consolas, "Courier New", Courier, FreeMono, monospace;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;color: rgb(248, 248, 242);font-size: 1em;direction: ltr;"><span style="box-sizing: inherit;font-style: inherit;font-weight: inherit;"><<span style="box-sizing: inherit;font-style: inherit;font-weight: inherit;color: rgb(249, 38, 114);">iframe</span> <span style="box-sizing: inherit;font-style: inherit;font-weight: inherit;color: rgb(249, 38, 114);">src</span>=<span style="box-sizing: inherit;font-style: inherit;font-weight: inherit;color: rgb(230, 219, 116);">"https://www.example.com"</span> <span style="box-sizing: inherit;font-style: inherit;font-weight: inherit;color: rgb(249, 38, 114);">sandbox</span>></span><br><span style="box-sizing: inherit;font-style: inherit;font-weight: inherit;"></<span style="box-sizing: inherit;font-style: inherit;font-weight: inherit;color: rgb(249, 38, 114);">iframe</span>></span><br></code></pre><p style="text-align: left;margin-top: 15px;margin-bottom: 15px;line-height: 1.75em;"><span style="font-size: 16px;">sandbox属性可以设置具体的值，表示逐项打开限制。未设置某一项，就表示不具有该权限。</span></p><ul class="list-paddingleft-2" style="list-style-type: disc;"><li><p style="text-align: left;"><span style="font-size: 16px;">allow-forms：允许提交表单。</span></p></li><li><p style="text-align: left;"><span style="font-size: 16px;">allow-modals：允许提示框，即允许执行window.alert()等会产生弹出提示框的 JavaScript 方法。</span></p></li><li><p style="text-align: left;"><span style="font-size: 16px;">allow-popups：允许嵌入的网页使用window.open()方法弹出窗口。</span></p></li><li><p style="text-align: left;"><span style="font-size: 16px;">allow-popups-to-escape-sandbox：允许弹出窗口不受沙箱的限制。</span></p></li><li><p style="text-align: left;"><span style="font-size: 16px;">allow-orientation-lock：允许嵌入的网页用脚本锁定屏幕的方向，即横屏或竖屏。</span></p></li><li><p style="text-align: left;"><span style="font-size: 16px;">allow-pointer-lock：允许嵌入的网页使用 Pointer Lock API，锁定鼠标的移动。</span></p></li><li><p style="text-align: left;"><span style="font-size: 16px;">allow-presentation：允许嵌入的网页使用 Presentation API。</span></p></li><li><p style="text-align: left;"><span style="font-size: 16px;">allow-same-origin：不打开该项限制，将使得所有加载的网页都视为跨域。</span></p></li><li><p style="text-align: left;"><span style="font-size: 16px;">allow-scripts：允许嵌入的网页运行脚本（但不创建弹出窗口）。</span></p></li><li><p style="text-align: left;"><span style="font-size: 16px;">allow-storage-access-by-user-activation：允许在用户激动的情况下，嵌入的网页通过 Storage Access API 访问父窗口的储存。</span></p></li><li><p style="text-align: left;"><span style="font-size: 16px;">allow-top-navigation：允许嵌入的网页对顶级窗口进行导航。</span></p></li><li><p style="text-align: left;"><span style="font-size: 16px;">allow-top-navigation-by-user-activation：允许嵌入的网页对顶级窗口进行导航，但必须由用户激活。</span></p></li><li><p style="text-align: left;"><span style="font-size: 16px;">allow-downloads-without-user-activation：允许在没有用户激活的情况下，嵌入的网页启动下载。</span></p></li></ul><p style="text-align: left;margin-top: 15px;margin-bottom: 15px;line-height: 1.75em;"><span style="font-size: 16px;">注意，不要同时设置allow-scripts和allow-same-origin属性，这将使得嵌入的网页可以改变或删除sandbox属性。</span></p><h2 style="text-align: left;margin-top: 15px;margin-bottom: 15px;line-height: 1.75em;"><strong><span style="font-size: 16px;color: rgb(26, 177, 204);">3、loading 属性</span></strong></h2><p style="text-align: left;margin-top: 15px;margin-bottom: 15px;line-height: 1.75em;"><span style="font-size: 16px;"><iframe>指定的网页会立即加载，有时这不是希望的行为。<iframe>滚动进入视口以后再加载，这样会比较节省带宽。</span></p><p style="text-align: left;margin-top: 15px;margin-bottom: 15px;line-height: 1.75em;"><span style="font-size: 16px;">loading属性可以触发<iframe>网页的懒加载。该属性可以取以下三个值。</span></p><ul class="list-paddingleft-2" style="list-style-type: disc;"><li><p style="text-align: left;"><span style="font-size: 16px;">auto：浏览器的默认行为，与不使用loading属性效果相同。</span></p></li><li><p style="text-align: left;"><span style="font-size: 16px;">lazy：<iframe>的懒加载，即将滚动进入视口时开始加载。</span></p></li><li><p style="text-align: left;"><span style="font-size: 16px;">eager：立即加载资源，无论在页面上的位置如何。</span></p><p style="text-align: left;"><span style="font-size: 16px;"></span></p></li></ul><pre style="box-sizing: inherit;margin-bottom: 1em;padding: 1.25em 1.5em;-webkit-font-smoothing: auto;background: rgb(35, 36, 31);color: rgb(88, 110, 117);font-size: 0.875em;overflow: auto;overflow-wrap: normal;border-radius: 0.5rem;text-align: left;"><code style="box-sizing: inherit;-webkit-font-smoothing: auto;font-family: Consolas, "Courier New", Courier, FreeMono, monospace;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;color: rgb(248, 248, 242);font-size: 1em;direction: ltr;"><span style="box-sizing: inherit;font-style: inherit;font-weight: inherit;"><<span style="box-sizing: inherit;font-style: inherit;font-weight: inherit;color: rgb(249, 38, 114);">iframe</span> <span style="box-sizing: inherit;font-style: inherit;font-weight: inherit;color: rgb(249, 38, 114);">src</span>=<span style="box-sizing: inherit;font-style: inherit;font-weight: inherit;color: rgb(230, 219, 116);">"https://example.com"</span> <span style="box-sizing: inherit;font-style: inherit;font-weight: inherit;color: rgb(249, 38, 114);">loading</span>=<span style="box-sizing: inherit;font-style: inherit;font-weight: inherit;color: rgb(230, 219, 116);">"lazy"</span>></<span style="box-sizing: inherit;font-style: inherit;font-weight: inherit;color: rgb(249, 38, 114);">iframe</span>></span><br></code></pre><p style="text-align: left;margin-top: 15px;margin-bottom: 15px;line-height: 1.75em;"><span style="font-size: 16px;">上面代码会启用<iframe>的懒加载。</span></p><p style="text-align: left;margin-top: 15px;margin-bottom: 15px;line-height: 1.75em;"><span style="font-size: 16px;">有一点需要注意，如果<iframe>是隐藏的，则loading属性无效，将会立即加载。只要满足以下任一个条件，Chrome 浏览器就会认为<iframe>是隐藏的。</span></p><ul class="list-paddingleft-2" style="list-style-type: disc;"><li><p style="text-align: left;"><code style="box-sizing: inherit;-webkit-font-smoothing: auto;color: rgb(241, 70, 104);font-size: 0.875em;padding: 0.25em 0.5em;"><span style="font-size: 16px;"><iframe></span></code><span style="font-size: 16px;">的宽度和高度为4像素或更小。</span></p></li><li><p style="text-align: left;"><span style="font-size: 16px;">样式设为</span><code style="box-sizing: inherit;-webkit-font-smoothing: auto;color: rgb(241, 70, 104);font-size: 0.875em;padding: 0.25em 0.5em;"><span style="font-size: 16px;">display: none</span></code><span style="font-size: 16px;">或</span><code style="box-sizing: inherit;-webkit-font-smoothing: auto;color: rgb(241, 70, 104);font-size: 0.875em;padding: 0.25em 0.5em;"><span style="font-size: 16px;">visibility: hidden</span></code><span style="font-size: 16px;">。</span></p></li><li><p style="text-align: left;"><span style="font-size: 16px;">使用定位坐标为负</span><code style="box-sizing: inherit;-webkit-font-smoothing: auto;color: rgb(241, 70, 104);font-size: 0.875em;padding: 0.25em 0.5em;"><span style="font-size: 16px;">X</span></code><span style="font-size: 16px;">或负</span><code style="box-sizing: inherit;-webkit-font-smoothing: auto;color: rgb(241, 70, 104);font-size: 0.875em;padding: 0.25em 0.5em;"><span style="font-size: 16px;">Y</span></code><span style="font-size: 16px;">，将</span><code style="box-sizing: inherit;-webkit-font-smoothing: auto;color: rgb(241, 70, 104);font-size: 0.875em;padding: 0.25em 0.5em;"><span style="font-size: 16px;"><iframe</span></code><span style="font-size: 16px;">>放置在屏幕外。</span></p></li></ul><p style="text-align: left;"><br></p><p style="text-align: left;"><span style="font-size: 16px;">本文完~<br></span></p><p style="text-align: left;"><span style="font-size: 16px;"><br></span></p><p style="text-align: left;"><span style="font-size: 16px;"> 推荐阅读</span></p><p style="white-space: normal;text-align: left;"><a target="_blank" data-itemshowtype="0" tab="innerlink" data-linktype="2">【HTML 教程】HTML 语言简介</a><br></p><p style="white-space: normal;text-align: left;"><a target="_blank" data-itemshowtype="0" tab="innerlink" data-linktype="2">【HTML 教程】URL 简介</a><br></p><p style="white-space: normal;text-align: left;"><a target="_blank" data-itemshowtype="0" tab="innerlink" data-linktype="2">【HTML 教程】网页元素的属性</a><br></p><p style="white-space: normal;text-align: left;"><a target="_blank" data-itemshowtype="0" tab="innerlink" data-linktype="2">【HTML 教程】HTML 字符编码</a><br></p><p style="white-space: normal;text-align: left;"><a target="_blank" data-itemshowtype="0" tab="innerlink" data-linktype="2">【HTML 教程】网页的语义结构</a><br></p><p style="white-space: normal;text-align: left;"><a target="_blank" data-itemshowtype="0" tab="innerlink" data-linktype="2">【HTML 教程】文本标签</a><br></p><p style="white-space: normal;text-align: left;"><a target="_blank" data-itemshowtype="0" tab="innerlink" data-linktype="2">【HTML 教程】列表标签</a><br></p><p style="white-space: normal;text-align: left;"><a target="_blank" data-itemshowtype="0" tab="innerlink" data-linktype="2">【HTML 教程】图像标签</a><br></p><p style="white-space: normal;text-align: left;"><a target="_blank" data-itemshowtype="0" tab="innerlink" data-linktype="2">【HTML 教程】链接标签</a><br></p><p style="white-space: normal;text-align: left;"><a target="_blank" data-itemshowtype="0" tab="innerlink" data-linktype="2">【HTML 教程】多媒体标签</a><br></p><p style="white-space: normal;text-align: left;"><br></p><p style="text-align: left;"><span style="font-size: 16px;"><br></span></p><section style="margin: 15px 8px;font-family: -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;letter-spacing: 0.544px;white-space: normal;background-color: rgb(255, 255, 255);text-align: left;line-height: 1.75em;"><span style="font-size: 16px;color: rgb(0, 0, 0);">本文完~</span></section><section style="margin-right: 8px;margin-left: 8px;font-family: -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;letter-spacing: 0.544px;white-space: normal;background-color: rgb(255, 255, 255);text-align: left;"><img data-ratio="0.044444444444444446" data-s="300,640" data-type="jpeg" data-w="900" src="https://filescdn.proginn.com/ffde68501514a5df9e9a9833e7fbb841/5dd36660b3701a1beac85a798ab84c90.webp" style="box-sizing: border-box !important;visibility: visible !important;width: 677px !important;"></section><section style="margin-right: 8px;margin-left: 8px;font-family: -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;letter-spacing: 0.544px;white-space: normal;background-color: rgb(255, 255, 255);text-align: left;"></section> </div></div></div><div class="tag-list-box"><div class="tag-list"><div class="tag-list-container"></div></div></div><span class="view_num">浏览 1</span><div class="float-bar float-bar-relative" id="float-bar-relative"><div class="float-bar-body"><div class="item qinglite-zan"><i class="iconfont icon-dianzan"></i>点赞 </div><div class="gap"></div><a href="#comments" class="item"><i class="iconfont iconfont icon-pinglun1"></i><span class="com_num"></span>评论 </a><div class="item qinglite-collect"><i class="iconfont icon-shoucang"></i>收藏 </div><div class="item qinglite_share"><i class="iconfont icon-fenxiang1"></i>分享 <div class="qrcode-modal"><img src="/api/pub/ewm" alt=""><p>手机扫一扫分享</p></div></div><div class="expand"></div><a onclick="miniProgram_navigateTo_func()" class="item qinglite_share_miniapp miniapp_show"><i class="iconfont icon-fenxiang1"></i>分享 </a><div class="item jubao qinglite-jubao miniapp_hide"><i class="iconfont icon-jubao"></i> 举报 </div></div></div></div><div class="comments_wrapper comments"><div class="title">评论</div><div id="comments" class="comments"><div class="error"></div><div class="textarea-wrapper"><textarea class="comment-content" cols="30" rows="5" placeholder="输入评论"></textarea></div><div class="button"><div class="error"><div class="comment-emojis"><div class="comment-choose-img qinglite_upload"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-tupianyangshi2"></use></svg><span>图片</span></div><div class="comment-choose-img comment-emoji-btn"><svg class="icon show-emoji-list" aria-hidden="true"><use xlink:href="#icon-biaoqing"></use></svg><span class="show-emoji-list">表情</span><div class="comment-emoji-list"></div></div><div style="display: none" class="comment-choose-img"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-shipinwenjian1"></use></svg><span>视频</span></div></div></div><button class="qinglite-comment">评价</button></div><div class="medias qinglite_upload_content"></div></div></div><div style="display: none" class="comments"><div class="title">全部评论</div><div class="comments comment-item-content"></div></div><div id="recommend" class="comments hide_app"><div class="title">推荐 <a href="#qs_detail" class="iconfont icon-huidaodingbu"></a></div></div><div class="qs_post_list flow_post_list hide_app"><div class="item qinglite_item"><a href="/pedia/f0055804651a8ac28a1bb" title="Pym.js响应式嵌入 iframe" class="content"><div class="qinglite_item_top_wrapper"><div class="title">Pym.js响应式嵌入 iframe</div><div class="right-top-icon-tag"></div></div><div class="desc">Pym.js可以让你在嵌入iframe的时候可自动的对iframe的大小进行调整以适应父一层容器，并且可以避免跨域问题。支持浏览器：InternetExplorer9,10(Windows7),11(</div></a><a href="https://jishu.proginn.com/pedia/f0055804651a8ac28a1bb" title="Pym.js响应式嵌入 iframe" class="up_info"><div style="background-image:url(https://qinglite-1253448069.cos.ap-shanghai.myqcloud.com/qinglite_user/217/0956a245d4df4f6082b037db08f55ea2.png)" class="avatar"></div><div class="username">Pym.js响应式嵌入 iframe</div><div class="expand"></div><div class="likes"><i class="iconfont icon-dianzan"></i></div><span class="num">0</span></a></div><div class="item qinglite_item"><a href="/pedia/f0056885650c6dc47926b" title="HTML Purifier" class="content"><div class="qinglite_item_top_wrapper"><div class="title">HTML Purifier</div><div class="right-top-icon-tag"></div></div><div class="desc">HTMLPurifier是一个可以用来移除所有恶意代码(XSS)，而且还能确保你的页面遵循W3C的标准规范的PHP类库。</div></a><a href="https://jishu.proginn.com/pedia/f0056885650c6dc47926b" title="HTML Purifier" class="up_info"><div style="background-image:url(https://qinglite-1253448069.cos.ap-shanghai.myqcloud.com/qinglite_user/217/0956a245d4df4f6082b037db08f55ea2.png)" class="avatar"></div><div class="username">HTML Purifier</div><div class="expand"></div><div class="likes"><i class="iconfont icon-dianzan"></i></div><span class="num">0</span></a></div><div class="item qinglite_item"><a href="/doc/f0052505650c6dc5981e9" title="HTML Purifier" class="content"><div class="qinglite_item_top_wrapper"><div class="title">HTML Purifier</div><div class="right-top-icon-tag"></div></div><div class="desc">HTML Purifier是一个可以用来移除所有恶意代码(XSS)，而且还能确保你的页面遵循W3C的</div></a><a href="https://jishu.proginn.com/pedia/f0056885650c6dc47926b" title="HTML Purifier" class="up_info"><div style="background-image:url(https://qinglite-1253448069.cos.ap-shanghai.myqcloud.com/qinglite_user/217/0956a245d4df4f6082b037db08f55ea2.png)" class="avatar"></div><div class="username">HTML Purifier</div><div class="expand"></div><div class="likes"><i class="iconfont icon-dianzan"></i></div><span class="num">0</span></a></div><div class="item qinglite_item"><a href="/pedia/f005643265150aa1db4bb" title="Html Validator" class="content"><div class="qinglite_item_top_wrapper"><div class="title">Html Validator</div><div class="right-top-icon-tag"></div></div><div class="desc">HTMLValidatorisaMozillaextensionthataddsHTMLvalidationinsideFirefoxandMozilla.ThenumberoferrorsofaHT</div></a><a href="https://jishu.proginn.com/pedia/f005643265150aa1db4bb" title="Html Validator" class="up_info"><div style="background-image:url(https://qinglite-1253448069.cos.ap-shanghai.myqcloud.com/qinglite_user/217/0956a245d4df4f6082b037db08f55ea2.png)" class="avatar"></div><div class="username">Html Validator</div><div class="expand"></div><div class="likes"><i class="iconfont icon-dianzan"></i></div><span class="num">0</span></a></div><div class="item qinglite_item"><a href="/doc/f005561965150aa2ef1bc" title="Html Validator" class="content"><div class="qinglite_item_top_wrapper"><div class="title">Html Validator</div><div class="right-top-icon-tag"></div></div><div class="desc">HTML Validator is a Mozilla extension that adds HT</div></a><a href="https://jishu.proginn.com/pedia/f005643265150aa1db4bb" title="Html Validator" class="up_info"><div style="background-image:url(https://qinglite-1253448069.cos.ap-shanghai.myqcloud.com/qinglite_user/217/0956a245d4df4f6082b037db08f55ea2.png)" class="avatar"></div><div class="username">Html Validator</div><div class="expand"></div><div class="likes"><i class="iconfont icon-dianzan"></i></div><span class="num">0</span></a></div><div class="item qinglite_item"><a href="/pedia/f005332965157cee9e9de" title="HTML Preview" class="content"><div class="qinglite_item_top_wrapper"><div class="title">HTML Preview</div><div class="right-top-icon-tag"></div></div><div class="desc">HTMLPreview是一个用.NET平台实现的用于对一个网页进行预览并生成预览图的小程序。</div></a><a href="https://jishu.proginn.com/pedia/f005332965157cee9e9de" title="HTML Preview" class="up_info"><div style="background-image:url(https://qinglite-1253448069.cos.ap-shanghai.myqcloud.com/qinglite_user/217/0956a245d4df4f6082b037db08f55ea2.png)" class="avatar"></div><div class="username">HTML Preview</div><div class="expand"></div><div class="likes"><i class="iconfont icon-dianzan"></i></div><span class="num">0</span></a></div><div class="item qinglite_item"><a href="/doc/f005475965157cef9c705" title="HTML Preview" class="content"><div class="qinglite_item_top_wrapper"><div class="title">HTML Preview</div><div class="right-top-icon-tag"></div></div><div class="desc">HTML Preview 是一个用 .NET 平台实现的用于对一个网页进行预览并生成预览图的小程序。</div></a><a href="https://jishu.proginn.com/pedia/f005332965157cee9e9de" title="HTML Preview" class="up_info"><div style="background-image:url(https://qinglite-1253448069.cos.ap-shanghai.myqcloud.com/qinglite_user/217/0956a245d4df4f6082b037db08f55ea2.png)" class="avatar"></div><div class="username">HTML Preview</div><div class="expand"></div><div class="likes"><i class="iconfont icon-dianzan"></i></div><span class="num">0</span></a></div><div class="item img qinglite_item"><a href="/doc/5937647567f0a2ee7" title="【HTML】905- 5个隐藏的 HTML 技巧" class="content"><div class="bg" style="background-image:url(https://filescdn.proginn.com/b0ce3bb8fa54da177420f7694995a564/eed3867dab78d8a9dc68f93b35b74377.webp?x-oss-process=image/resize,w_300)"></div></a><a href="/doc/5937647567f0a2ee7" title="【HTML】905- 5个隐藏的 HTML 技巧" class="title_middle">【HTML】905- 5个隐藏的 HTML 技巧</a><a href="https://jishu.proginn.com/u/63446447295dc213d" title="前端自习课" class="up_info"><div style="background-image:url(https://inn.proginn.com/useralbum/465980/cps_wx_0173a36605ea.jpg!mediumicon?imageMogr2/format/webp/thumbnail/!200x200r)" class="avatar"></div><div class="username">前端自习课</div><div class="expand"></div><div class="likes"><i class="iconfont icon-dianzan"></i></div><span class="num">0</span></a></div><div class="item img qinglite_item"><a href="/doc/54506477202b826ad" title="什么不用 iframe 做微前端" class="content"><div class="bg" style="background-image:url(https://filescdn.proginn.com/f7b9f260f49be42f30fc8287df3249e0/adfb18b0326c15fe99a6700307078882.webp?x-oss-process=image/resize,w_300)"></div></a><a href="/doc/54506477202b826ad" title="什么不用 iframe 做微前端" class="title_middle">什么不用 iframe 做微前端</a><a href="https://jishu.proginn.com/u/5316646f172667988" title="前端精髓" class="up_info"><div style="background-image:url(https://inn.proginn.com/useralbum/523079/cps_wx_017660a49abf.jpg!mediumicon?imageMogr2/format/webp/thumbnail/!200x200r)" class="avatar"></div><div class="username">前端精髓</div><div class="expand"></div><div class="likes"><i class="iconfont icon-dianzan"></i></div><span class="num">0</span></a></div><div class="item qinglite_item"><a href="/doc/f0054748651a52eb93ffb" title="Scrollable HTML Table" class="content"><div class="qinglite_item_top_wrapper"><div class="title">Scrollable HTML Table</div><div class="right-top-icon-tag"></div></div><div class="desc">Scrollable HTML Table 这个 jQuery 插件用来在一个固定高度的表格中显示滚</div></a><a href="https://jishu.proginn.com/pedia/f0054751651a52ea4af0f" title="Scrollable HTML Table" class="up_info"><div style="background-image:url(https://qinglite-1253448069.cos.ap-shanghai.myqcloud.com/qinglite_user/217/0956a245d4df4f6082b037db08f55ea2.png)" class="avatar"></div><div class="username">Scrollable HTML Table</div><div class="expand"></div><div class="likes"><i class="iconfont icon-dianzan"></i></div><span class="num">0</span></a></div><i></i><i></i><i></i><i></i><i></i></div><div class="float-bar" id="float-bar"><div class="float-bar-body"><div class="item qinglite-zan"><i class="iconfont icon-dianzan"></i>点赞 </div><div class="gap"></div><a href="#comments" class="item"><i class="iconfont iconfont icon-pinglun1"></i><span class="com_num"></span>评论 </a><div class="item qinglite-collect"><i class="iconfont icon-shoucang"></i>收藏 </div><div class="item qinglite_share"><i class="iconfont icon-fenxiang1"></i>分享 <div class="qrcode-modal"><img src="/api/pub/ewm" alt=""><p>手机扫一扫分享</p></div></div><div class="expand"></div><a onclick="miniProgram_navigateTo_func()" class="item qinglite_share_miniapp miniapp_show"><i class="iconfont icon-fenxiang1"></i>分享 </a><div class="item jubao qinglite-jubao miniapp_hide"><i class="iconfont icon-jubao"></i> 举报 </div><a href="#recommend" class="item iconfont icon-huidaodingbu"></a></div></div></article></div></main><script> let act_type = 1; let act_pro_id="75854"; let act_point = 0; let act_kind = 0; let act_time =30000; let act_page_id=""; </script><footer id="footer"><div class="container"><div class="links"><i class="copyright">2023©技术圈</i><a href="https://jishu.proginn.com">隐私协议</a><a href="https://jishu.proginn.com">用户协议</a><a href="https://jishu.proginn.com/about">关于我们</a></div></div></footer><link href="https://qinglite-1253448069.cos.ap-shanghai.myqcloud.com/css/layui/css/layui.css" rel="stylesheet"><script src="https://qinglite-1253448069.cos.ap-shanghai.myqcloud.com/css/layui/layui.js?v=v202311290174"></script><script> let token = ""; var $ = layui.jquery; </script><script src="https://cdn.qinglite.cn/js/pub.js?v=v202311290174"></script><script src="https://cdn.qinglite.cn/js/news_info.js?v=v202311290174"></script><link rel="stylesheet" href="https://qinglite-1253448069.cos.ap-shanghai.myqcloud.com/css/icon/iconfont.css?v=v202311290174"><script src="https://qinglite-1253448069.cos.ap-shanghai.myqcloud.com/css/icon/iconfont.js?v=v202311290174"></script></body></html>
