wzj_110

html(六)iframe标签

一 iframe官方文档

① 需求背景

背景：需要用iframe标签引入一个别人'封装好'的'第三方资源',避免'重复造轮子'

通俗：在一个网页中'嵌入'另一个网页

② 关注点

1) iframe标签的'业界'使用方法                         --> '前端'

2) iframe的'csp'和'referrerpolicy'属性的'深入'探究    --> '开发和运维'

③ 通过案例感性认识

需求：如下'后台页面布局',纯用'html'的,划分'4'部分

iframe 阮一峰

前端'代码'

细节点：宽'不'指定,默认100%,就是'浏览器的宽度'

效果'展示'：搭框的布局

继续： '左侧'菜单栏'默认页' --> 'src 嵌入资源,引入资源'

标签生成一个'指定区域',在该区域中'嵌入其他网页'</code></pre> 
  <p><a href="http://img.e-com-net.com/image/info8/d53ae4fd2e4a4705b54d1817e725d7cc.jpg" target="_blank"><img alt="" height="78" src="http://img.e-com-net.com/image/info8/d53ae4fd2e4a4705b54d1817e725d7cc.jpg" width="650"></a>  </p> 
  <p><a href="http://img.e-com-net.com/image/info8/7ce88e102f504754a5fca1daffef0b87.jpg" target="_blank"><img alt="html(六)iframe标签_第4张图片" height="249" src="http://img.e-com-net.com/image/info8/7ce88e102f504754a5fca1daffef0b87.jpg" width="650" style="border:1px solid black;"></a></p> 
  <p><a href="http://img.e-com-net.com/image/info8/79390dd5cde54290a4ba9702290d028b.jpg" target="_blank"><img alt="html(六)iframe标签_第5张图片" height="106" src="http://img.e-com-net.com/image/info8/79390dd5cde54290a4ba9702290d028b.jpg" width="586" style="border:1px solid black;"></a>  </p> 
  <pre><code class="language-bash">更进一步：点击'左侧'的'侧边栏',相应的内容在'右边'展示

说明：'画框'的为细节点</code></pre> 
  <p><a href="http://img.e-com-net.com/image/info8/9a39c17110fd44c89167f543c1e9a746.jpg" target="_blank"><img alt="" height="75" src="http://img.e-com-net.com/image/info8/9a39c17110fd44c89167f543c1e9a746.jpg" width="650"></a></p> 
  <p><a href="http://img.e-com-net.com/image/info8/6c0ce611931b426f944a62bfbf612e41.jpg" target="_blank"><img alt="html(六)iframe标签_第6张图片" height="252" src="http://img.e-com-net.com/image/info8/6c0ce611931b426f944a62bfbf612e41.jpg" width="650" style="border:1px solid black;"></a></p> 
  <pre><code class="language-bash">明白： 'a标签的target属性'与'iframe标签name属性'的关系

理解上：src相当于把'iframe-left.html'页面'引入'到当前页面,相当于在一个页面里面找'target'

通俗： 页面的引入相当于'代码复制'过来,整体是一个页面,所以可以使用'name=wzj'形式</code></pre> 
  <p><a href="http://img.e-com-net.com/image/info8/95afd73161424612b26a7a39e5ce7dc2.jpg" target="_blank"><img alt="html(六)iframe标签_第7张图片" height="145" src="http://img.e-com-net.com/image/info8/95afd73161424612b26a7a39e5ce7dc2.jpg" width="650" style="border:1px solid black;"></a></p> 
  <p>使用iframe实现一个后台管理页面 </p> 
  <p>标签框架frameset框架 </p> 
  <p>④  <span style="color:#a2e043;">iframe属性</span></p> 
  <pre><code class="language-bash">1) 属性的'含义'

2) 属性的'默认行为'

3) 区分'实验'属性和'常规'属性,不同'浏览器'支持程度不一样

iframe '全称'：Inline Frame</code></pre> 
  <p>sandbox沙箱和loading懒加载</p> 
  <pre><code class="language-bash">1、name属性： 见'上面'的案例</code></pre> 
  <p><a href="http://img.e-com-net.com/image/info8/2e4a3def160445498146395dc2e69e30.jpg" target="_blank"><img alt="html(六)iframe标签_第8张图片" height="102" src="http://img.e-com-net.com/image/info8/2e4a3def160445498146395dc2e69e30.jpg" width="650" style="border:1px solid black;"></a></p> 
  <pre><code class="language-bash">2、allowfullscreen: 通过'js'控制是否'全屏'展示,默认是'false'</code></pre> 
  <p><a href="http://img.e-com-net.com/image/info8/42ac6435eb56436d92121a4e5005faf4.jpg" target="_blank"><img alt="html(六)iframe标签_第9张图片" height="160" src="http://img.e-com-net.com/image/info8/42ac6435eb56436d92121a4e5005faf4.jpg" width="650" style="border:1px solid black;"></a></p> 
  <pre><code class="language-bash">3、csp: 暂时'了解','未来'重点</code></pre> 
  <p><a href="http://img.e-com-net.com/image/info8/495f628fd635412796c23cc69affa1eb.jpg" target="_blank"><img alt="" height="70" src="http://img.e-com-net.com/image/info8/495f628fd635412796c23cc69affa1eb.jpg" width="650"></a></p> 
  <pre><code class="language-bash">4、loading : '加载机制'

备注： 作为一个'运维人员',了解含义即可,暂时'不需要'追究该'属性'细节</code></pre> 
  <p><a href="http://img.e-com-net.com/image/info8/e3d277b2ee774fbdb05a0822e0bc6244.jpg" target="_blank"><img alt="html(六)iframe标签_第10张图片" height="159" src="http://img.e-com-net.com/image/info8/e3d277b2ee774fbdb05a0822e0bc6244.jpg" width="650" style="border:1px solid black;"></a></p> 
  <p><a href="http://img.e-com-net.com/image/info8/a18441c39c0446fc8110c2abfea93069.jpg" target="_blank"><img alt="html(六)iframe标签_第11张图片" height="403" src="http://img.e-com-net.com/image/info8/a18441c39c0446fc8110c2abfea93069.jpg" width="650" style="border:1px solid black;"></a>  </p> 
  <pre><code class="language-bash">6、sandbox : '沙盒安全机制'

说明： 安全'细粒度'的控制</code></pre> 
  <p><a href="http://img.e-com-net.com/image/info8/beffcd3eaa644c0f9a87a553109f5611.jpg" target="_blank"><img alt="html(六)iframe标签_第12张图片" height="665" src="http://img.e-com-net.com/image/info8/beffcd3eaa644c0f9a87a553109f5611.jpg" width="650" style="border:1px solid black;"></a>  </p> 
  <pre><code class="language-bash">6、src'属性'  --> "重点"

背景： 由于'Content-Security-Policy frame-ancestor属性的限制',服务器只允许特定域名访问

思考： 'iframe'也涉及跨域,通过'CORS Access-Control-Allow-Origin'可以解决吗?

深入： 也即设置'X-Frame-Options'或'CSP'头,不用设置'CORS'就可以跨域吗？</code></pre> 
  <p>CSP之frame-ancestor   如何使用CORS访问iframe</p> 
  <p><a href="http://img.e-com-net.com/image/info8/90b4677b55f144c88d37a0034f397bb0.jpg" target="_blank"><img alt="html(六)iframe标签_第13张图片" height="119" src="http://img.e-com-net.com/image/info8/90b4677b55f144c88d37a0034f397bb0.jpg" width="650" style="border:1px solid black;"></a></p> 
  <p>HTML5的window对象的postMessage方法可以允许来自不同源脚本采用异步方式进行有限的通信</p> 
  <p>iframe嵌入第三方资源未设置Set-Cookie中的SameSite=Mone导致跨站点Cookie失效</p> 
  <pre><code class="language-bash">X-Frame-Options其实就是将'前端js'对iframe的'把控'交给'服务器'来进行处理</code></pre> 
  <p>⑤  <span style="color:#a2e043;"> referrer</span><span style="color:#956fe7;">policy</span></p> 
  <pre><code class="language-bash">1) 发不发送'Referer'请求头

2) 如果发送'Referer'请求头,内容形式是'什么'?</code></pre> 
  <p><a href="http://img.e-com-net.com/image/info8/5f05d89b8dc14fca9ac00d8bd37702d3.jpg" target="_blank"><img alt="html(六)iframe标签_第14张图片" height="438" src="http://img.e-com-net.com/image/info8/5f05d89b8dc14fca9ac00d8bd37702d3.jpg" width="650" style="border:1px solid black;"></a></p> 
  <p>各种值案例讲解</p> 
  <pre><code class="language-bash">思考：可以在哪些地方'设置'或'修改'控制Referer行为

 1) header 设置   --> '传递Referer请求头'

   <meta name="referrer" content="origin">

 2) body里面的标签 --> 控制'传递Referer请求头'行为

  <a>、<area>、<img>、<iframe>、<script> 、 <link> 元素上的 referrerpolicy 属性

 3) Referrer-Policy '请求头'设置

 思考： 1、2、3的'优先级'?

 4) nginx的'valid_referers指令和$invalid_referer变量'校验  --> '服务端校验Referer'

补充： Referer是可以'伪造'的,我们讨论'浏览器'访问的'一般场景'</code></pre> 
  <p> iframe特性深入解读</p> 
  <p>⑥  <span style="color:#38d8f0;">杂谈</span></p> 
  <pre><code class="language-bash">思考1： nginx的CSP 的属性是否可以'分开写',用add_header 形式,每个属性'一行'--> '可读性'

思考2： 如果在Content-Security-Policy 标头和meta元素中都指定了'CSP'指令

结论：则无论指定'多少个'CSP头,浏览器都将使用'限制最大'的CSP指令 --> 回答了'思考1和2'</code></pre> 
 </div> 
</div>
                            </div>
                        </div>
                    </div>
                    <!--PC和WAP自适应版-->
                    <div id="SOHUCS" sid="1686775152882298880"></div>
                    <script type="text/javascript" src="/views/front/js/chanyan.js"></script>
                    <!-- 文章页-底部 动态广告位 -->
                    <div class="youdao-fixed-ad" id="detail_ad_bottom"></div>
                </div>
                <div class="col-md-3">
                    <div class="row" id="ad">
                        <!-- 文章页-右侧1 动态广告位 -->
                        <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                            <div class="youdao-fixed-ad" id="detail_ad_1"> </div>
                        </div>
                        <!-- 文章页-右侧2 动态广告位 -->
                        <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                            <div class="youdao-fixed-ad" id="detail_ad_2"></div>
                        </div>
                        <!-- 文章页-右侧3 动态广告位 -->
                        <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                            <div class="youdao-fixed-ad" id="detail_ad_3"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(#,html,html,前端,iframe)</h4>
        <div id="paradigm-article-related">
            <div class="recommend-post mb30">
                <ul class="widget-links">
                    <li><a href="/article/1835509897106649088.htm"
                           title="Long类型前后端数据不一致" target="_blank">Long类型前后端数据不一致</a>
                        <span class="text-muted">igotyback</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问</div>
                    </li>
                    <li><a href="/article/1835509770287673344.htm"
                           title="swagger访问路径" target="_blank">swagger访问路径</a>
                        <span class="text-muted">igotyback</span>
<a class="tag" taget="_blank" href="/search/swagger/1.htm">swagger</a>
                        <div>Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip</div>
                    </li>
                    <li><a href="/article/1835508130608410624.htm"
                           title="html 中如何使用 uniapp 的部分方法" target="_blank">html 中如何使用 uniapp 的部分方法</a>
                        <span class="text-muted">某公司摸鱼前端</span>
<a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了</div>
                    </li>
                    <li><a href="/article/1835499615491813376.htm"
                           title="四章-32-点要素的聚合" target="_blank">四章-32-点要素的聚合</a>
                        <span class="text-muted">彩云飘过</span>

                        <div>本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.</div>
                    </li>
                    <li><a href="/article/1835498925755297792.htm"
                           title="DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理" target="_blank">DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理</a>
                        <span class="text-muted">STU学生网页设计</span>
<a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E7%BD%91%E9%A1%B5%E4%BD%9C%E4%B8%9A/1.htm">期末网页作业</a><a class="tag" taget="_blank" href="/search/html%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5/1.htm">html静态网页</a><a class="tag" taget="_blank" href="/search/html5%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html5期末大作业</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web大作业</a>
                        <div>️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程</div>
                    </li>
                    <li><a href="/article/1835497792265613312.htm"
                           title="【加密社】Solidity 中的事件机制及其应用" target="_blank">【加密社】Solidity 中的事件机制及其应用</a>
                        <span class="text-muted">加密社</span>
<a class="tag" taget="_blank" href="/search/%E9%97%B2%E4%BE%83/1.htm">闲侃</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a><a class="tag" taget="_blank" href="/search/%E6%99%BA%E8%83%BD%E5%90%88%E7%BA%A6/1.htm">智能合约</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a>
                        <div>加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件</div>
                    </li>
                    <li><a href="/article/1835496149843275776.htm"
                           title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript</a>
                        <span class="text-muted">二挡起步</span>
<a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a><a class="tag" taget="_blank" href="/search/%E9%A3%8E%E6%99%AF/1.htm">风景</a>
                        <div>⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip</div>
                    </li>
                    <li><a href="/article/1835496148601761792.htm"
                           title="HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动" target="_blank">HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动</a>
                        <span class="text-muted">二挡起步</span>
<a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/web%E8%AE%BE%E8%AE%A1%E7%BD%91%E9%A1%B5%E8%A7%84%E5%88%92%E4%B8%8E%E8%AE%BE%E8%AE%A1/1.htm">web设计网页规划与设计</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线</div>
                    </li>
                    <li><a href="/article/1835448238103162880.htm"
                           title="springboot+vue项目实战一-创建SpringBoot简单项目" target="_blank">springboot+vue项目实战一-创建SpringBoot简单项目</a>
                        <span class="text-muted">苹果酱0567</span>
<a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E9%A2%98%E6%B1%87%E6%80%BB%E4%B8%8E%E8%A7%A3%E6%9E%90/1.htm">面试题汇总与解析</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E4%B8%AD%E9%97%B4%E4%BB%B6/1.htm">中间件</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一</div>
                    </li>
                    <li><a href="/article/1835437775344726016.htm"
                           title="博客网站制作教程" target="_blank">博客网站制作教程</a>
                        <span class="text-muted">2401_85194651</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a>
                        <div>首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java</div>
                    </li>
                    <li><a href="/article/1835435506645692416.htm"
                           title="00. 这里整理了最全的爬虫框架（Java + Python）" target="_blank">00. 这里整理了最全的爬虫框架（Java + Python）</a>
                        <span class="text-muted">有一只柴犬</span>
<a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB%E7%B3%BB%E5%88%97/1.htm">爬虫系列</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a>
                        <div>目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2</div>
                    </li>
                    <li><a href="/article/1835435141535723520.htm"
                           title="详解：如何设计出健壮的秒杀系统？" target="_blank">详解：如何设计出健壮的秒杀系统？</a>
                        <span class="text-muted">夜空_2cd3</span>

                        <div>作者：Yrion博客园：cnblogs.com/wyq178/p/11261711.html前言：秒杀系统相信很多人见过，比如京东或者淘宝的秒杀，小米手机的秒杀。那么秒杀系统的后台是如何实现的呢？我们如何设计一个秒杀系统呢？对于秒杀系统应该考虑哪些问题？如何设计出健壮的秒杀系统？本期我们就来探讨一下这个问题：image目录一：****秒杀系统应该考虑的问题二：****秒杀系统的设计和技术方案三：*</div>
                    </li>
                    <li><a href="/article/1835428317084348416.htm"
                           title="最简单将静态网页挂载到服务器上(不用nginx)" target="_blank">最简单将静态网页挂载到服务器上(不用nginx)</a>
                        <span class="text-muted">全能全知者</span>
<a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a>
                        <div>最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl</div>
                    </li>
                    <li><a href="/article/1835427057752961024.htm"
                           title="补充元象二面" target="_blank">补充元象二面</a>
                        <span class="text-muted">Redstone Monstrosity</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a>
                        <div>1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重</div>
                    </li>
                    <li><a href="/article/1835420753252675584.htm"
                           title="微信小程序开发注意事项" target="_blank">微信小程序开发注意事项</a>
                        <span class="text-muted">jun778895</span>
<a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">微信小程序</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a>
                        <div>微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂</div>
                    </li>
                    <li><a href="/article/1835411044768509952.htm"
                           title="字节二面" target="_blank">字节二面</a>
                        <span class="text-muted">Redstone Monstrosity</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a>
                        <div>1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文</div>
                    </li>
                    <li><a href="/article/1835403246865313792.htm"
                           title="斟一小组鸡血视频" target="_blank">斟一小组鸡血视频</a>
                        <span class="text-muted">和自己一起成长</span>

                        <div>http://m.v.qq.com/play/play.html?coverid=&vid=c0518henl2a&ptag=2_6.0.0.14297_copy有一种努力叫做靠自己http://m.v.qq.com/play/play.html?coverid=&vid=i0547o426g4&ptag=2_6.0.0.14297_copy世界最励志短片https://v.qq.com/x/pa</div>
                    </li>
                    <li><a href="/article/1835398064727224320.htm"
                           title="前端代码上传文件" target="_blank">前端代码上传文件</a>
                        <span class="text-muted">余生逆风飞翔</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i</div>
                    </li>
                    <li><a href="/article/1835395039572881408.htm"
                           title="Dockerfile命令详解之 FROM" target="_blank">Dockerfile命令详解之 FROM</a>
                        <span class="text-muted">清风怎不知意</span>
<a class="tag" taget="_blank" href="/search/%E5%AE%B9%E5%99%A8%E5%8C%96/1.htm">容器化</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
                        <div>许多同学不知道Dockerfile应该如何写，不清楚Dockerfile中的指令分别有什么意义，能达到什么样的目的，接下来我将在容器化专栏中详细的为大家解释每一个指令的含义以及用法。专栏订阅传送门https://blog.csdn.net/qq_38220908/category_11989778.html指令不区分大小写。但是，按照惯例，它们应该是大写的，以便更容易地将它们与参数区分开来。(引用</div>
                    </li>
                    <li><a href="/article/1835389111658180608.htm"
                           title="《HTML 与 CSS—— 响应式设计》" target="_blank">《HTML 与 CSS—— 响应式设计》</a>
                        <span class="text-muted">陈在天box</span>
<a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在</div>
                    </li>
                    <li><a href="/article/1835387977480630272.htm"
                           title="【C语言】- 自定义类型：结构体、枚举、联合" target="_blank">【C语言】- 自定义类型：结构体、枚举、联合</a>
                        <span class="text-muted">Cavalier_01</span>
<a class="tag" taget="_blank" href="/search/C%E8%AF%AD%E8%A8%80/1.htm">C语言</a>
                        <div>【C语言】：操作符（https://mp.csdn.net/editor/html/115218055）数据类型（https://mp.csdn.net/editor/html/115219664）自定义类型：结构体、枚举、联合（https://mp.csdn.net/editor/html/115373785）变量、常量（https://mp.csdn.net/editor/html/11523</div>
                    </li>
                    <li><a href="/article/1835385458356482048.htm"
                           title="uniapp实现动态标记效果详细步骤【前端开发】" target="_blank">uniapp实现动态标记效果详细步骤【前端开发】</a>
                        <span class="text-muted">2401_85123349</span>
<a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a>
                        <div>第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。</div>
                    </li>
                    <li><a href="/article/1835382685745377280.htm"
                           title="html+css网页设计 旅游网站首页1个页面" target="_blank">html+css网页设计 旅游网站首页1个页面</a>
                        <span class="text-muted">html+css+js网页设计</span>
<a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a>
                        <div>html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击</div>
                    </li>
                    <li><a href="/article/1835379153730367488.htm"
                           title="spring mvc @RequestBody String类型参数" target="_blank">spring mvc @RequestBody String类型参数</a>
                        <span class="text-muted">zoyation</span>
<a class="tag" taget="_blank" href="/search/spring-mvc/1.htm">spring-mvc</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/mvc/1.htm">mvc</a>
                        <div>通过如下配置：text/html;charset=UTF-8application/json;charset=UTF-8在springmvc的Controller层使用@RequestBody接收Content-Type为application/json的数据时，默认支持Map方式和对象方式参数@RequestMapping(value="/{code}/saveUser",method=Requ</div>
                    </li>
                    <li><a href="/article/1835377684025274368.htm"
                           title="ubuntu安装opencv最快的方法" target="_blank">ubuntu安装opencv最快的方法</a>
                        <span class="text-muted">Derek重名了</span>

                        <div>最快方法，当然不能太多文字$sudoapt-getinstallpython-opencv借助python就可以把ubuntu的opencv环境搞起来，非常快非常容易参考：https://docs.opencv.org/trunk/d2/de6/tutorial_py_setup_in_ubuntu.html</div>
                    </li>
                    <li><a href="/article/1835376759739084800.htm"
                           title="处理标签包裹的字符串，并取出前250字符" target="_blank">处理标签包裹的字符串，并取出前250字符</a>
                        <span class="text-muted">周bro</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>//假设这是你的HTML字符串varhtmlString=`这是一个段落。这是一个标题这是另一个段落，包含一些链接。`;//解析HTML字符串并提取文本functionextractTextFromHTML(html){varparser=newDOMParser();vardoc=parser.parseFromString(html,"text/html");vartextContent=do</div>
                    </li>
                    <li><a href="/article/1835373236217540608.htm"
                           title="360前端星计划-动画可以这么玩" target="_blank">360前端星计划-动画可以这么玩</a>
                        <span class="text-muted">马小蜗</span>

                        <div>动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能</div>
                    </li>
                    <li><a href="/article/1835372727582683136.htm"
                           title="h5小游戏定制开发" target="_blank">h5小游戏定制开发</a>
                        <span class="text-muted">红匣子实力推荐</span>

                        <div>随着科技的不断发展，移动互联网已经成为人们生活中不可或缺的一部分。在这个背景下，H5小游戏应运而生，为人们带来了丰富的娱乐体验。H5小游戏定制开发作为一种新兴的游戏开发方式，正逐渐受到市场的关注和青睐。那么，什么是H5小游戏定制开发呢？它又具有哪些特点和优势呢？让我们一起来深入了解一下。首先，我们来了解一下H5小游戏的基本概念。H5小游戏是一种基于HTML5技术的游戏，可以在移动端、PC端等多平台</div>
                    </li>
                    <li><a href="/article/1835368019430305792.htm"
                           title="Vue + Express实现一个表单提交" target="_blank">Vue + Express实现一个表单提交</a>
                        <span class="text-muted">九旬大爷的梦</span>

                        <div>最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo</div>
                    </li>
                    <li><a href="/article/1835354700392787968.htm"
                           title="Nginx的使用场景：构建高效、可扩展的Web架构" target="_blank">Nginx的使用场景：构建高效、可扩展的Web架构</a>
                        <span class="text-muted">张某布响丸辣</span>
<a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a>
                        <div>Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin</div>
                    </li>
                                <li><a href="/article/95.htm"
                                       title="PHP，安卓，UI，java，linux视频教程合集" target="_blank">PHP，安卓，UI，java，linux视频教程合集</a>
                                    <span class="text-muted">cocos2d-x小菜</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/UI/1.htm">UI</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/android/1.htm">android</a>
                                    <div>╔-----------------------------------╗┆&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
                                </li>
                                <li><a href="/article/222.htm"
                                       title="zookeeper admin 笔记" target="_blank">zookeeper admin 笔记</a>
                                    <span class="text-muted">braveCS</span>
<a class="tag" taget="_blank" href="/search/zookeeper/1.htm">zookeeper</a>
                                    <div>&nbsp; 
Required Software 
1) JDK&gt;=1.6 
2)推荐使用ensemble的ZooKeeper(至少3台)，并run on separate machines 
3)在Yahoo!，zk配置在特定的RHEL boxes里，2个cpu，2G内存，80G硬盘 
&nbsp;  


数据和日志目录  
1)数据目录里的文件是zk节点的持久化备份，包括快照和事务日</div>
                                </li>
                                <li><a href="/article/349.htm"
                                       title="Spring配置多个连接池" target="_blank">Spring配置多个连接池</a>
                                    <span class="text-muted">easterfly</span>
<a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a>
                                    <div>项目中需要同时连接多个数据库的时候，如何才能在需要用到哪个数据库就连接哪个数据库呢？ 
Spring中有关于dataSource的配置： 
&nbsp;&nbsp;&nbsp; &lt;bean id=&quot;dataSource&quot; class=&quot;com.mchange.v2.c3p0.ComboPooledDataSource&quot; 
&nbsp;&nbsp;&nb</div>
                                </li>
                                <li><a href="/article/476.htm"
                                       title="Mysql" target="_blank">Mysql</a>
                                    <span class="text-muted">171815164</span>
<a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a>
                                    <div>例如，你想myuser使用mypassword从任何主机连接到mysql服务器的话。 
 
GRANT ALL PRIVILEGES ON *.* TO 'myuser'@'%'IDENTIFIED BY 'mypassword' WI 
 
TH GRANT OPTION; 
 
如果你想允许用户myuser从ip为192.168.1.6的主机连接到mysql服务器，并使用mypassword作</div>
                                </li>
                                <li><a href="/article/603.htm"
                                       title="CommonDAO（公共/基础DAO）" target="_blank">CommonDAO（公共/基础DAO）</a>
                                    <span class="text-muted">g21121</span>
<a class="tag" taget="_blank" href="/search/DAO/1.htm">DAO</a>
                                    <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 好久没有更新博客了，最近一段时间工作比较忙，所以请见谅，无论你是爱看呢还是爱看呢还是爱看呢，总之或许对你有些帮助。 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; DAO(Data Access Object)是一个数据访问（顾名思义就是与数据库打交道）接口，DAO一般在业</div>
                                </li>
                                <li><a href="/article/730.htm"
                                       title="直言有讳" target="_blank">直言有讳</a>
                                    <span class="text-muted">永夜-极光</span>
<a class="tag" taget="_blank" href="/search/%E6%84%9F%E6%82%9F/1.htm">感悟</a><a class="tag" taget="_blank" href="/search/%E9%9A%8F%E7%AC%94/1.htm">随笔</a>
                                    <div>&nbsp; 
1.转载地址:http://blog.csdn.net/jasonblog/article/details/10813313 
&nbsp; 
精华: 
“直言有讳”是阿里巴巴提倡的一种观念，而我在此之前并没有很深刻的认识。为什么呢？就好比是读书时候做阅读理解，我喜欢我自己的解读，并不喜欢老师给的意思。在这里也是。我自己坚持的原则是互相尊重，我觉得阿里巴巴很多价值观其实是基本的做人</div>
                                </li>
                                <li><a href="/article/857.htm"
                                       title="安装CentOS 7 和Win 7后，Win7 引导丢失" target="_blank">安装CentOS 7 和Win 7后，Win7 引导丢失</a>
                                    <span class="text-muted">随便小屋</span>
<a class="tag" taget="_blank" href="/search/centos/1.htm">centos</a>
                                    <div>一般安装双系统的顺序是先装Win7，然后在安装CentOS，这样CentOS可以引导WIN 7启动。但安装CentOS7后，却找不到Win7 的引导，稍微修改一点东西即可。 
一、首先具有root 的权限。 
&nbsp;&nbsp;&nbsp;&nbsp; 即进入Terminal后输入命令su，然后输入密码即可 
二、利用vim编辑器打开/boot/grub2/grub.cfg文件进行修改 
v</div>
                                </li>
                                <li><a href="/article/984.htm"
                                       title="Oracle备份与恢复案例" target="_blank">Oracle备份与恢复案例</a>
                                    <span class="text-muted">aijuans</span>
<a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a>
                                    <div>Oracle备份与恢复案例 
一. 理解什么是数据库恢复当我们使用一个数据库时，总希望数据库的内容是可靠的、正确的，但由于计算机系统的故障（硬件故障、软件故障、网络故障、进程故障和系统故障）影响数据库系统的操作，影响数据库中数据的正确性，甚至破坏数据库，使数据库中全部或部分数据丢失。因此当发生上述故障后，希望能重构这个完整的数据库，该处理称为数据库恢复。恢复过程大致可以分为复原(Restore)与</div>
                                </li>
                                <li><a href="/article/1111.htm"
                                       title="JavaEE开源快速开发平台G4Studio v5.0发布" target="_blank">JavaEE开源快速开发平台G4Studio v5.0发布</a>
                                    <span class="text-muted">無為子</span>

                                    <div>&nbsp; 
我非常高兴地宣布,今天我们最新的JavaEE开源快速开发平台G4Studio_V5.0版本已经正式发布。 
&nbsp; 
访问G4Studio网站  
http://www.g4it.org   &nbsp;   
2013-04-06 发布G4Studio_V5.0版本 
功能新增 
(1). 新增了调用Oracle存储过程返回游标，并将游标映射为Java List集合对象的标</div>
                                </li>
                                <li><a href="/article/1238.htm"
                                       title="Oracle显示根据高考分数模拟录取" target="_blank">Oracle显示根据高考分数模拟录取</a>
                                    <span class="text-muted">百合不是茶</span>
<a class="tag" taget="_blank" href="/search/PL%2FSQL%E7%BC%96%E7%A8%8B/1.htm">PL/SQL编程</a><a class="tag" taget="_blank" href="/search/oracle%E4%BE%8B%E5%AD%90/1.htm">oracle例子</a><a class="tag" taget="_blank" href="/search/%E6%A8%A1%E6%8B%9F%E9%AB%98%E8%80%83%E5%BD%95%E5%8F%96/1.htm">模拟高考录取</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E4%BA%A4%E6%B5%81/1.htm">学习交流</a>
                                    <div>题目要求: 
1,创建student表和result表
2,pl/sql对学生的成绩数据进行处理
3,处理的逻辑是根据每门专业课的最低分线和总分的最低分数线自动的将录取和落选 
&nbsp; 
&nbsp; 
1,创建student表,和result表 
学生信息表; 
create table student(
   student_id number primary key,--学生id</div>
                                </li>
                                <li><a href="/article/1365.htm"
                                       title="优秀的领导与差劲的领导" target="_blank">优秀的领导与差劲的领导</a>
                                    <span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/%E9%A2%86%E5%AF%BC/1.htm">领导</a><a class="tag" taget="_blank" href="/search/%E7%AE%A1%E7%90%86/1.htm">管理</a><a class="tag" taget="_blank" href="/search/%E5%9B%A2%E9%98%9F/1.htm">团队</a>
                                    <div>责任 

  优秀的领导：优秀的领导总是对他所负责的项目担负起责任。如果项目不幸失败了，那么他知道该受责备的人是他自己，并且敢于承认错误。 
  
 差劲的领导：差劲的领导觉得这不是他的问题，因此他会想方设法证明是他的团队不行，或是将责任归咎于团队中他不喜欢的那几个成员身上。 
 
努力工作 

  优秀的领导：团队领导应该是团队成员的榜样。至少，他应该与团队中的其他成员一样努力工作。这仅仅因为他</div>
                                </li>
                                <li><a href="/article/1492.htm"
                                       title="js函数在浏览器下的兼容" target="_blank">js函数在浏览器下的兼容</a>
                                    <span class="text-muted">Bill_chen</span>
<a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/%E6%B5%8F%E8%A7%88%E5%99%A8/1.htm">浏览器</a><a class="tag" taget="_blank" href="/search/IE/1.htm">IE</a><a class="tag" taget="_blank" href="/search/DWR/1.htm">DWR</a><a class="tag" taget="_blank" href="/search/ext/1.htm">ext</a>
                                    <div>&nbsp; 做前端开发的工程师，少不了要用FF进行测试，纯js函数在不同浏览器下，名称也可能不同。对于IE6和FF，取得下一结点的函数就不尽相同： 
 
&nbsp; IE6：node.nextSibling,对于FF是不能识别的； 
 
&nbsp; FF：node.nextElementSibling,对于IE是不能识别的； 
 
兼容解决方式：var Div = node.nextSibl</div>
                                </li>
                                <li><a href="/article/1619.htm"
                                       title="【JVM四】老年代垃圾回收：吞吐量垃圾收集器(Throughput GC)" target="_blank">【JVM四】老年代垃圾回收：吞吐量垃圾收集器(Throughput GC)</a>
                                    <span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/%E5%9E%83%E5%9C%BE%E5%9B%9E%E6%94%B6/1.htm">垃圾回收</a>
                                    <div>吞吐量与用户线程暂停时间 
&nbsp; 
衡量垃圾回收算法优劣的指标有两个： 
 
 吞吐量越高，则算法越好 
 暂停时间越短，则算法越好 
 
首先说明吞吐量和暂停时间的含义。 
&nbsp; 
垃圾回收时，JVM会启动几个特定的GC线程来完成垃圾回收的任务，这些GC线程与应用的用户线程产生竞争关系，共同竞争处理器资源以及CPU的执行时间。GC线程不会对用户带来的任何价值，因此，好的GC应该占</div>
                                </li>
                                <li><a href="/article/1746.htm"
                                       title="J2EE监听器和过滤器基础" target="_blank">J2EE监听器和过滤器基础</a>
                                    <span class="text-muted">白糖_</span>
<a class="tag" taget="_blank" href="/search/J2EE/1.htm">J2EE</a>
                                    <div> Servlet程序由Servlet，Filter和Listener组成，其中监听器用来监听Servlet容器上下文。 
监听器通常分三类：基于Servlet上下文的ServletContex监听，基于会话的HttpSession监听和基于请求的ServletRequest监听。 
&nbsp; 
 
 ServletContex监听器 
   ServletContex又叫application</div>
                                </li>
                                <li><a href="/article/1873.htm"
                                       title="博弈AngularJS讲义(16) - 提供者" target="_blank">博弈AngularJS讲义(16) - 提供者</a>
                                    <span class="text-muted">boyitech</span>
<a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/AngularJS/1.htm">AngularJS</a><a class="tag" taget="_blank" href="/search/api/1.htm">api</a><a class="tag" taget="_blank" href="/search/Angular/1.htm">Angular</a><a class="tag" taget="_blank" href="/search/Provider/1.htm">Provider</a>
                                    <div>&nbsp; Angular框架提供了强大的依赖注入机制，这一切都是有注入器(injector)完成. 注入器会自动实例化服务组件和符合Angular API规则的特殊对象，例如控制器，指令，过滤器动画等。 
&nbsp; 那注入器怎么知道如何去创建这些特殊的对象呢？ Angular提供了5种方式让注入器创建对象，其中最基础的方式就是提供者(provider), 其余四种方式(Value, Fac</div>
                                </li>
                                <li><a href="/article/2000.htm"
                                       title="java-写一函数f(a,b)，它带有两个字符串参数并返回一串字符，该字符串只包含在两个串中都有的并按照在a中的顺序。" target="_blank">java-写一函数f(a,b)，它带有两个字符串参数并返回一串字符，该字符串只包含在两个串中都有的并按照在a中的顺序。</a>
                                    <span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                                    <div>

public class CommonSubSequence {

	/**
	 * 题目：写一函数f(a,b)，它带有两个字符串参数并返回一串字符，该字符串只包含在两个串中都有的并按照在a中的顺序。
	 * 写一个版本算法复杂度O(N^2)和一个O(N) 。
	 * 
	 * O(N^2)：对于a中的每个字符，遍历b中的每个字符，如果相同，则拷贝到新字符串中。
	 * O(</div>
                                </li>
                                <li><a href="/article/2127.htm"
                                       title="sqlserver 2000 无法验证产品密钥" target="_blank">sqlserver 2000 无法验证产品密钥</a>
                                    <span class="text-muted">Chen.H</span>
<a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/windows/1.htm">windows</a><a class="tag" taget="_blank" href="/search/SQL+Server/1.htm">SQL Server</a><a class="tag" taget="_blank" href="/search/Microsoft/1.htm">Microsoft</a>
                                    <div>在 Service Pack 4 (SP 4), 是运行 Microsoft Windows Server 2003、 Microsoft Windows Storage Server 2003 或 Microsoft Windows 2000 服务器上您尝试安装 Microsoft SQL Server 2000 通过卷许可协议 (VLA) 媒体。 这样做, 收到以下错误信息CD KEY的 SQ</div>
                                </li>
                                <li><a href="/article/2254.htm"
                                       title="[新概念武器]气象战争" target="_blank">[新概念武器]气象战争</a>
                                    <span class="text-muted">comsci</span>

                                    <div> 
 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 气象战争的发动者必须是拥有发射深空航天器能力的国家或者组织.... 
 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 原因如下: 
 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 地球上的气候变化和大气层中的云层涡旋场有密切的关系,而维持一个在大气层某个层次</div>
                                </li>
                                <li><a href="/article/2381.htm"
                                       title="oracle 中 rollup、cube、grouping 使用详解" target="_blank">oracle 中 rollup、cube、grouping 使用详解</a>
                                    <span class="text-muted">daizj</span>
<a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/grouping/1.htm">grouping</a><a class="tag" taget="_blank" href="/search/rollup/1.htm">rollup</a><a class="tag" taget="_blank" href="/search/cube/1.htm">cube</a>
                                    <div>oracle 中 rollup、cube、grouping 使用详解 -- 使用oracle 样例表演示 转自namesliu 
 
-- 使用oracle 的样列库，演示 rollup, cube, grouping 的用法与使用场景&nbsp; 
&nbsp; 
--- ROLLUP ， 为了理解分组的成员数量，我增加了 分组的计数&nbsp; COUNT(SAL)&nbsp; 
&nbsp;</div>
                                </li>
                                <li><a href="/article/2508.htm"
                                       title="技术资料汇总分享" target="_blank">技术资料汇总分享</a>
                                    <span class="text-muted">Dead_knight</span>
<a class="tag" taget="_blank" href="/search/%E6%8A%80%E6%9C%AF%E8%B5%84%E6%96%99%E6%B1%87%E6%80%BB+%E5%88%86%E4%BA%AB/1.htm">技术资料汇总 分享</a>
                                    <div>本人汇总的技术资料，分享出来，希望对大家有用。 
 
http://pan.baidu.com/s/1jGr56uE 
 
资料主要包含： 
Workflow-&gt;工作流相关理论、框架(OSWorkflow、JBPM、Activiti、fireflow...) 
Security-&gt;java安全相关资料(SSL、SSO、SpringSecurity、Shiro、JAAS...) 
Ser</div>
                                </li>
                                <li><a href="/article/2635.htm"
                                       title="初一下学期难记忆单词背诵第一课" target="_blank">初一下学期难记忆单词背诵第一课</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/english/1.htm">english</a><a class="tag" taget="_blank" href="/search/word/1.htm">word</a>
                                    <div>could 能够 
minute 分钟 
Tuesday 星期二 
February 二月 
eighteenth 第十八 
listen 听 
careful 小心的，仔细的 
short 短的 
heavy 重的 
empty 空的 
certainly 当然 
carry 携带；搬运 
tape 磁带 
basket 蓝子 
bottle 瓶 
juice 汁，果汁 
head 头；头部 
</div>
                                </li>
                                <li><a href="/article/2762.htm"
                                       title="截取视图的图片, 然后分享出去" target="_blank">截取视图的图片, 然后分享出去</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/OS/1.htm">OS</a><a class="tag" taget="_blank" href="/search/Objective-C/1.htm">Objective-C</a>
                                    <div>OS 7 has a new method that allows you to draw a view hierarchy into the current graphics context. This can be used to get an UIImage very fast. 
I implemented a category method on UIView to get the vi</div>
                                </li>
                                <li><a href="/article/2889.htm"
                                       title="MySql重置密码" target="_blank">MySql重置密码</a>
                                    <span class="text-muted">fanxiaolong</span>
<a class="tag" taget="_blank" href="/search/MySql%E9%87%8D%E7%BD%AE%E5%AF%86%E7%A0%81/1.htm">MySql重置密码</a>
                                    <div>方法一: 
&nbsp;在my.ini的[mysqld]字段加入： 
skip-grant-tables 
重启mysql服务，这时的mysql不需要密码即可登录数据库 
&nbsp;然后进入mysql 
mysql&gt;use mysql; 
&nbsp;mysql&gt;更新 user set password=password('新密码') WHERE User='root'; 
mysq</div>
                                </li>
                                <li><a href="/article/3016.htm"
                                       title="Ehcache（03）——Ehcache中储存缓存的方式" target="_blank">Ehcache（03）——Ehcache中储存缓存的方式</a>
                                    <span class="text-muted">234390216</span>
<a class="tag" taget="_blank" href="/search/ehcache/1.htm">ehcache</a><a class="tag" taget="_blank" href="/search/MemoryStore/1.htm">MemoryStore</a><a class="tag" taget="_blank" href="/search/DiskStore/1.htm">DiskStore</a><a class="tag" taget="_blank" href="/search/%E5%AD%98%E5%82%A8/1.htm">存储</a><a class="tag" taget="_blank" href="/search/%E9%A9%B1%E9%99%A4%E7%AD%96%E7%95%A5/1.htm">驱除策略</a>
                                    <div>Ehcache中储存缓存的方式 
&nbsp; 
目录 
1&nbsp;&nbsp;&nbsp;&nbsp; 堆内存（MemoryStore） 
1.1&nbsp;&nbsp;&nbsp;&nbsp; 指定可用内存 
1.2&nbsp;&nbsp;&nbsp;&nbsp; 驱除策略 
1.3&nbsp;&nbsp;&nbsp;&nbsp; 元素过期 
2&nbsp;&nbsp;&nbsp;&nbs</div>
                                </li>
                                <li><a href="/article/3143.htm"
                                       title="spring mvc中的@propertysource" target="_blank">spring mvc中的@propertysource</a>
                                    <span class="text-muted">jackyrong</span>
<a class="tag" taget="_blank" href="/search/spring+mvc/1.htm">spring mvc</a>
                                    <div>&nbsp; 在spring mvc中，在配置文件中的东西，可以在java代码中通过注解进行读取了： 
 
@PropertySource&nbsp; 在spring 3.1中开始引入 
 
比如有配置文件 
config.properties 
 
mongodb.url=1.2.3.4 
mongodb.db=hello 
 
则代码中 
&nbsp; 

@PropertySource(&</div>
                                </li>
                                <li><a href="/article/3270.htm"
                                       title="重学单例模式" target="_blank">重学单例模式</a>
                                    <span class="text-muted">lanqiu17</span>
<a class="tag" taget="_blank" href="/search/%E5%8D%95%E4%BE%8B/1.htm">单例</a><a class="tag" taget="_blank" href="/search/Singleton/1.htm">Singleton</a><a class="tag" taget="_blank" href="/search/%E6%A8%A1%E5%BC%8F/1.htm">模式</a>
                                    <div>最近在重新学习设计模式，感觉对模式理解更加深刻。觉得有必要记下来。 
	第一个学的就是单例模式，单例模式估计是最好理解的模式了。它的作用就是防止外部创建实例，保证只有一个实例。
	单例模式的常用实现方式有两种，就人们熟知的饱汉式与饥汉式，具体就不多说了。这里说下其他的实现方式
	静态内部类方式: 
package test.pattern.singleton.statics;

publ</div>
                                </li>
                                <li><a href="/article/3397.htm"
                                       title=".NET开源核心运行时，且行且珍惜" target="_blank">.NET开源核心运行时，且行且珍惜</a>
                                    <span class="text-muted">netcome</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/.net/1.htm">.net</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E6%BA%90/1.htm">开源</a>
                                    <div>背景 
2014年11月12日，ASP.NET之父、微软云计算与企业级产品工程部执行副总裁Scott Guthrie，在Connect全球开发者在线会议上宣布，微软将开源全部.NET核心运行时，并将.NET 扩展为可在 Linux 和 Mac OS 平台上运行。.NET核心运行时将基于MIT开源许可协议发布，其中将包括执行.NET代码所需的一切项目——CLR、JIT编译器、垃圾收集器（GC）和核心</div>
                                </li>
                                <li><a href="/article/3524.htm"
                                       title="使用oscahe缓存技术减少与数据库的频繁交互" target="_blank">使用oscahe缓存技术减少与数据库的频繁交互</a>
                                    <span class="text-muted">Everyday都不同</span>
<a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/%E9%AB%98%E5%B9%B6%E5%8F%91/1.htm">高并发</a><a class="tag" taget="_blank" href="/search/oscahe%E7%BC%93%E5%AD%98/1.htm">oscahe缓存</a>
                                    <div>此前一直不知道缓存的具体实现，只知道是把数据存储在内存中，以便下次直接从内存中读取。对于缓存的使用也没有概念，觉得缓存技术是一个比较”神秘陌生“的领域。但最近要用到缓存技术，发现还是很有必要一探究竟的。 
&nbsp; 
缓存技术使用背景：一般来说，对于web项目，如果我们要什么数据直接jdbc查库好了，但是在遇到高并发的情形下，不可能每一次都是去查数据库，因为这样在高并发的情形下显得不太合理——</div>
                                </li>
                                <li><a href="/article/3651.htm"
                                       title="Spring+Mybatis 手动控制事务" target="_blank">Spring+Mybatis 手动控制事务</a>
                                    <span class="text-muted">toknowme</span>
<a class="tag" taget="_blank" href="/search/mybatis/1.htm">mybatis</a>
                                    <div>@Override 
&nbsp;&nbsp;&nbsp;public&nbsp;boolean&nbsp;testDelete(String&nbsp;jobCode)&nbsp;throws&nbsp;Exception { 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;boolean&nbsp;flag&nbsp;=&nbsp;false; 
&nbsp;&nbs</div>
                                </li>
                                <li><a href="/article/3778.htm"
                                       title="菜鸟级的android程序员面试时候需要掌握的知识点" target="_blank">菜鸟级的android程序员面试时候需要掌握的知识点</a>
                                    <span class="text-muted">xp9802</span>
<a class="tag" taget="_blank" href="/search/android/1.htm">android</a>
                                    <div>熟悉Android开发架构和API调用 
掌握APP适应不同型号手机屏幕开发技巧 
熟悉Android下的数据存储&nbsp; 
熟练Android Debug Bridge Tool 
熟练Eclipse/ADT及相关工具&nbsp; 
熟悉Android框架原理及Activity生命周期 
熟练进行Android UI布局 
熟练使用SQLite数据库； 
熟悉Android下网络通信机制，S</div>
                                </li>
                </ul>
            </div>
        </div>
    </div>

<div>
    <div class="container">
        <div class="indexes">
            <strong>按字母分类：</strong>
            <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a
                href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a
                href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a
                href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a
                href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a
                href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a
                href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a
                href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a
                href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a>
        </div>
    </div>
</div>
<footer id="footer" class="mb30 mt30">
    <div class="container">
        <div class="footBglm">
            <a target="_blank" href="/">首页</a> -
            <a target="_blank" href="/custom/about.htm">关于我们</a> -
            <a target="_blank" href="/search/Java/1.htm">站内搜索</a> -
            <a target="_blank" href="/sitemap.txt">Sitemap</a> -
            <a target="_blank" href="/custom/delete.htm">侵权投诉</a>
        </div>
        <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.
<!--            <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>-->
        </div>
    </div>
</footer>
<!-- 代码高亮 -->
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script>
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script>
<link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/>
<script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script>





</body>

</html>