ITzhongzi

iframe和HTML5 blob实现JS,CSS,HTML直接当前页预览

原理：

此效果实现的核心原理是：

创建</code>元素；</li> <li>将CSS，HTML字符串转换为<code style="border:1px solid rgb(234,234,234);margin-left:2px;font-family:Consolas, monospace;">Blob</code>对象；</li> <li>使用<code style="border:1px solid rgb(234,234,234);margin-left:2px;font-family:Consolas, monospace;">URL.createObjectURL()</code>方法将<code style="border:1px solid rgb(234,234,234);margin-left:2px;font-family:Consolas, monospace;">Blob</code>对象转换为URL对象并赋予我们创建的<code style="border:1px solid rgb(234,234,234);margin-left:2px;font-family:Consolas, monospace;"><iframe></code>元素的<code style="border:1px solid rgb(234,234,234);margin-left:2px;font-family:Consolas, monospace;">src</code>属性；</li> </ol> <p style="list-style-type:none;color:rgb(51,51,51);font-family:Arial;font-size:14px;">使用JavaScript代码表示更加一目了然：</p> <pre style="font-size:13px;background:rgba(0,0,0,.05);color:rgb(0,0,221);font-family:'Lucida Console', Consolas, Monaco;"><span style="color:#008000;">// 1. 创建<code style="border:1px solid rgb(234,234,234);margin-left:2px;font-family:Consolas, monospace;"><iframe></code>元素</span> var iframe = document.createElement('iframe'); <span style="color:#008000;">// 2. 将CSS，HTML字符串转换为<code style="border:1px solid rgb(234,234,234);margin-left:2px;font-family:Consolas, monospace;">Blob</code>对象</span> var blob = new Blob([htmlCode], { 'type': 'text/html' }); <span style="color:#008000;">// 3. 使用<code style="border:1px solid rgb(234,234,234);margin-left:2px;font-family:Consolas, monospace;">URL.createObjectURL()</code>方法将...</span> iframe.src = URL.createObjectURL(blob); </pre> <p style="list-style-type:none;color:rgb(51,51,51);font-family:Arial;font-size:14px;"><strong>需要注意</strong>的是，当我们使用 <code style="border:1px solid rgb(234,234,234);margin-left:2px;font-family:Consolas, monospace;">new Blob()</code> 对我们的字符数据进行转换的时候，一定要指定<code style="border:1px solid rgb(234,234,234);margin-left:2px;font-family:Consolas, monospace;">type</code>为<code style="border:1px solid rgb(234,234,234);margin-left:2px;font-family:Consolas, monospace;">text/html</code>，否则，HTML代码会被自动转移为安全的纯文本显示在<code style="border:1px solid rgb(234,234,234);margin-left:2px;font-family:Consolas, monospace;"><iframe></code>元素中。</p> <p style="list-style-type:none;color:rgb(51,51,51);font-family:Arial;font-size:14px;"><strong>兼容性</strong><br>IE浏览器遗憾并不支持<code style="border:1px solid rgb(234,234,234);margin-left:2px;font-family:Consolas, monospace;">src</code>直接是URL对象。</p> <p style="list-style-type:none;color:rgb(51,51,51);font-family:Arial;font-size:14px;">所以此技术只适用于对兼容性没有严格要求的一些项目。</p> <p>示例代码：</p> <p></p> <div style="color:rgb(248,248,242);font-family:Consolas, 'Courier New', monospace;font-size:14px;line-height:19px;"> <div> <!DOCTYPE html> </div> <div> < <span style="color:#f92672;">html</span> <span style="color:#a6e22e;">lang</span>= <span style="color:#e6db74;">"en"</span>> </div> <br> <div> < <span style="color:#f92672;">head</span>> </div> <div> < <span style="color:#f92672;">meta</span> <span style="color:#a6e22e;">charset</span>= <span style="color:#e6db74;">"UTF-8"</span>> </div> <div> < <span style="color:#f92672;">meta</span> <span style="color:#a6e22e;">name</span>= <span style="color:#e6db74;">"viewport"</span> <span style="color:#a6e22e;">content</span>= <span style="color:#e6db74;">"width=device-width, initial-scale=1.0"</span>> </div> <div> < <span style="color:#f92672;">meta</span> <span style="color:#a6e22e;">http-equiv</span>= <span style="color:#e6db74;">"X-UA-Compatible"</span> <span style="color:#a6e22e;">content</span>= <span style="color:#e6db74;">"ie=edge"</span>> </div> <div> < <span style="color:#f92672;">title</span>>Document</ <span style="color:#f92672;">title</span>> </div> <div> < <span style="color:#f92672;">style</span>> </div> <div> <span style="color:#a6e22e;">.show</span> { </div> <div> <span style="color:#66d9ef;"><em>width</em></span>: <span style="color:#ae81ff;">600</span> <span style="color:#f92672;">px</span>; </div> <div> <span style="color:#66d9ef;"><em>height</em></span>: <span style="color:#ae81ff;">600</span> <span style="color:#f92672;">px</span>; </div> <div> <span style="color:#66d9ef;"><em>margin</em></span>: <span style="color:#66d9ef;">auto</span>; </div> <div> <span style="color:#66d9ef;"><em>position</em></span>: <span style="color:#66d9ef;">absolute</span>; </div> <div> <span style="color:#66d9ef;"><em>top</em></span>: <span style="color:#ae81ff;">10</span> <span style="color:#f92672;">px</span>; </div> <div> <span style="color:#66d9ef;"><em>right</em></span>: <span style="color:#ae81ff;">0</span>; </div> <div> <span style="color:#66d9ef;"><em>z-index</em></span>: <span style="color:#ae81ff;">2</span>; </div> <div> } </div> <div> <span style="color:#a6e22e;">.show</span> <span style="color:#f92672;">iframe</span> { </div> <div> <span style="color:#66d9ef;"><em>width</em></span>: <span style="color:#ae81ff;">100</span> <span style="color:#f92672;">%</span>; </div> <div> <span style="color:#66d9ef;"><em>height</em></span>: <span style="color:#ae81ff;">100</span> <span style="color:#f92672;">%</span>; </div> <br> <div> } </div> <div> </ <span style="color:#f92672;">style</span>> </div> <div> </ <span style="color:#f92672;">head</span>> </div> <br> <div> < <span style="color:#f92672;">body</span>> </div> <div> < <span style="color:#f92672;">div</span>> </div> <div> < <span style="color:#f92672;">h4</span>>示例代码</ <span style="color:#f92672;">h4</span>> </div> <div> < <span style="color:#f92672;">button</span>>运行</ <span style="color:#f92672;">button</span>> </div> <div> < <span style="color:#f92672;">pre</span>> </div> <div> < <span style="color:#f92672;">script</span> <span style="color:#a6e22e;">type</span>= <span style="color:#e6db74;">"text/html"</span> <span style="color:#a6e22e;">style</span>= <span style="color:#e6db74;">"display: block;"</span> <span style="color:#a6e22e;">id</span>= <span style="color:#e6db74;">"code1"</span>> </div> <div> < <span style="color:#f92672;">style</span>> </div> <div> <span style="color:#f92672;">html</span> { </div> <div> <span style="color:#66d9ef;"><em>height</em></span>: <span style="color:#ae81ff;">100</span> <span style="color:#f92672;">vh</span>; </div> <div> } </div> <div> <span style="color:#f92672;">body</span> { </div> <div> <span style="color:#66d9ef;"><em>height</em></span>: <span style="color:#66d9ef;">inherit</span>; </div> <div> <span style="color:#66d9ef;"><em>background</em></span>: <span style="color:#ae81ff;">#2e576b</span>; </div> <div> <span style="color:#66d9ef;"><em>display</em></span>: <span style="color:#66d9ef;">-ms-grid</span>; </div> <div> <span style="color:#66d9ef;"><em>display</em></span>: <span style="color:#66d9ef;">grid</span>; </div> <div> } </div> <div> <span style="color:#a6e22e;">.container</span> { </div> <div> <span style="color:#66d9ef;"><em>margin</em></span>: <span style="color:#66d9ef;">auto</span>; </div> <div> } </div> <div> <span style="color:#a6e22e;">.card</span> { </div> <div> <span style="color:#66d9ef;"><em>position</em></span>: <span style="color:#66d9ef;">relative</span>; </div> <div> <span style="color:#66d9ef;"><em>width</em></span>: <span style="color:#ae81ff;">300</span> <span style="color:#f92672;">px</span>; <span style="color:#66d9ef;"><em>height</em></span>: <span style="color:#ae81ff;">350</span> <span style="color:#f92672;">px</span>; </div> <div> <span style="color:#66d9ef;"><em>background</em></span>: <span style="color:#ae81ff;">#fff</span>; </div> <div> <span style="color:#66d9ef;"><em>border-radius</em></span>: <span style="color:#ae81ff;">2</span> <span style="color:#f92672;">px</span>; </div> <div> <span style="color:#66d9ef;"><em>box-shadow</em></span>: <span style="color:#ae81ff;">0</span> <span style="color:#ae81ff;">2</span> <span style="color:#f92672;">px</span> <span style="color:#ae81ff;">15</span> <span style="color:#f92672;">px</span> <span style="color:#ae81ff;">3</span> <span style="color:#f92672;">px</span> <span style="color:#66d9ef;">rgba</span>( <span style="color:#ae81ff;">0</span>, <span style="color:#ae81ff;">0</span>, <span style="color:#ae81ff;">0</span>, <span style="color:#ae81ff;">0.08</span>); </div> <div> <span style="color:#66d9ef;"><em>overflow</em></span>: <span style="color:#66d9ef;">hidden</span>; </div> <div> } </div> <div> <span style="color:#a6e22e;">.card::after</span> { </div> <div> <span style="color:#66d9ef;"><em>content</em></span>: <span style="color:#e6db74;">''</span>; </div> <div> <span style="color:#66d9ef;"><em>display</em></span>: <span style="color:#66d9ef;">block</span>; </div> <div> <span style="color:#66d9ef;"><em>width</em></span>: <span style="color:#ae81ff;">100</span> <span style="color:#f92672;">%</span>; <span style="color:#66d9ef;"><em>height</em></span>: <span style="color:#ae81ff;">100</span> <span style="color:#f92672;">%</span>; </div> <div> <span style="color:#66d9ef;"><em>background</em></span>: <span style="color:#66d9ef;">linear-gradient</span>( <span style="color:#f92672;">to</span> <span style="color:#66d9ef;">bottom</span>, <span style="color:#ae81ff;">#0065a8</span>, <span style="color:#66d9ef;">rgba</span>( <span style="color:#ae81ff;">221</span>, <span style="color:#ae81ff;">238</span>, <span style="color:#ae81ff;">255</span>, <span style="color:#ae81ff;">0.4</span>) <span style="color:#ae81ff;">46</span> <span style="color:#f92672;">%</span>, <span style="color:#66d9ef;">rgba</span>( <span style="color:#ae81ff;">255</span>, <span style="color:#ae81ff;">255</span>, <span style="color:#ae81ff;">255</span>, <span style="color:#ae81ff;">0.5</span>)); </div> <div> } </div> <div> <span style="color:#a6e22e;">.wave</span> { </div> <div> <span style="color:#66d9ef;"><em>position</em></span>: <span style="color:#66d9ef;">absolute</span>; </div> <div> <span style="color:#66d9ef;"><em>top</em></span>: <span style="color:#ae81ff;">3</span> <span style="color:#f92672;">%</span>; <span style="color:#66d9ef;"><em>left</em></span>: <span style="color:#ae81ff;">50</span> <span style="color:#f92672;">%</span>; </div> <div> <span style="color:#66d9ef;"><em>width</em></span>: <span style="color:#ae81ff;">400</span> <span style="color:#f92672;">px</span>; <span style="color:#66d9ef;"><em>height</em></span>: <span style="color:#ae81ff;">400</span> <span style="color:#f92672;">px</span>; </div> <div> <span style="color:#66d9ef;"><em>margin-top</em></span>: <span style="color:#ae81ff;">-200</span> <span style="color:#f92672;">px</span>; <span style="color:#66d9ef;"><em>margin-left</em></span>: <span style="color:#ae81ff;">-200</span> <span style="color:#f92672;">px</span>; </div> <div> <span style="color:#66d9ef;"><em>background</em></span>: <span style="color:#ae81ff;">#0af</span>; </div> <div> <span style="color:#66d9ef;"><em>border-radius</em></span>: <span style="color:#ae81ff;">40</span> <span style="color:#f92672;">%</span>; </div> <div> <span style="color:#66d9ef;"><em>opacity</em></span>: <span style="color:#ae81ff;">.4</span>; </div> <div> <span style="color:#66d9ef;"><em>animation</em></span>: shift <span style="color:#ae81ff;">3</span> <span style="color:#f92672;">s</span> <span style="color:#66d9ef;">infinite</span> <span style="color:#66d9ef;">linear</span>; </div> <div> } </div> <div> <span style="color:#a6e22e;">.wave.w2</span> { </div> <div> <span style="color:#66d9ef;"><em>background</em></span>: <span style="color:#66d9ef;">yellow</span>; </div> <div> <span style="color:#66d9ef;"><em>opacity</em></span>: <span style="color:#ae81ff;">.1</span>; </div> <div> <span style="color:#66d9ef;"><em>animation</em></span>: shift <span style="color:#ae81ff;">7</span> <span style="color:#f92672;">s</span> <span style="color:#66d9ef;">infinite</span> <span style="color:#66d9ef;">linear</span>; </div> <div> } </div> <div> <span style="color:#a6e22e;">.wave.w3</span> { </div> <div> <span style="color:#66d9ef;"><em>animation</em></span>: shift <span style="color:#ae81ff;">5</span> <span style="color:#f92672;">s</span> <span style="color:#66d9ef;">infinite</span> <span style="color:#66d9ef;">linear</span>; </div> <div> <span style="color:#66d9ef;"><em>background</em></span>: <span style="color:#66d9ef;">crimson</span>; </div> <div> <span style="color:#66d9ef;"><em>opacity</em></span>: <span style="color:#ae81ff;">0.1</span>; </div> <div> } </div> <div> <span style="color:#f92672;">@-webkit-keyframes</span> <span style="color:#fd971f;"><em>shift</em></span> { </div> <div> from { </div> <div> <span style="color:#66d9ef;"><em>transform</em></span>: <span style="color:#66d9ef;">rotate</span>( <span style="color:#ae81ff;">360</span> <span style="color:#f92672;">deg</span>); </div> <div> } </div> <div> } </div> <div> <span style="color:#f92672;">@keyframes</span> <span style="color:#fd971f;"><em>shift</em></span> { </div> <div> from { </div> <div> <span style="color:#66d9ef;"><em>transform</em></span>: <span style="color:#66d9ef;">rotate</span>( <span style="color:#ae81ff;">360</span> <span style="color:#f92672;">deg</span>); </div> <div> } </div> <div> } </div> <div> </ <span style="color:#f92672;">style</span>> </div> <div> </div> <div> < <span style="color:#f92672;">div</span> <span style="color:#a6e22e;">class</span>= <span style="color:#e6db74;">"container"</span>> </div> <div> < <span style="color:#f92672;">div</span> <span style="color:#a6e22e;">class</span>= <span style="color:#e6db74;">"card"</span>> </div> <div> < <span style="color:#f92672;">div</span> <span style="color:#a6e22e;">class</span>= <span style="color:#e6db74;">"wave w1"</span>></ <span style="color:#f92672;">div</span>> </div> <div> < <span style="color:#f92672;">div</span> <span style="color:#a6e22e;">class</span>= <span style="color:#e6db74;">"wave w2"</span>></ <span style="color:#f92672;">div</span>> </div> <div> < <span style="color:#f92672;">div</span> <span style="color:#a6e22e;">class</span>= <span style="color:#e6db74;">"wave w3"</span>></ <span style="color:#f92672;">div</span>> </div> <div> </ <span style="color:#f92672;">div</span>> </div> <div> </ <span style="color:#f92672;">div</span>> </div> <div> </ <span style="color:#f92672;">script</span>> </div> <div> </ <span style="color:#f92672;">pre</span>> </div> <div> < <span style="color:#f92672;">div</span> <span style="color:#a6e22e;">class</span>= <span style="color:#e6db74;">"show"</span>> </div> <br> <div> </ <span style="color:#f92672;">div</span>> </div> <br> <div> </ <span style="color:#f92672;">div</span>> </div> <div> </ <span style="color:#f92672;">body</span>> </div> <div> < <span style="color:#f92672;">script</span>> </div> <div> <span style="color:#66d9ef;"><em>var</em></span> btn <span style="color:#f92672;">=</span> document. <span style="color:#66d9ef;">getElementsByTagName</span>( <span style="color:#e6db74;">"button"</span>)[ <span style="color:#ae81ff;">0</span>]; </div> <div> <span style="color:#66d9ef;"><em>var</em></span> htmlCode <span style="color:#f92672;">=</span> document. <span style="color:#66d9ef;">getElementById</span>( <span style="color:#e6db74;">"code1"</span>).innerHTML; </div> <div> <span style="color:#66d9ef;"><em>var</em></span> showDom <span style="color:#f92672;">=</span> document. <span style="color:#66d9ef;">getElementsByClassName</span>( <span style="color:#e6db74;">"show"</span>)[ <span style="color:#ae81ff;">0</span>]; </div> <br> <div> btn. <span style="color:#a6e22e;">onclick</span> <span style="color:#f92672;">=</span> <span style="color:#66d9ef;"><em>function</em></span> ( <span style="color:#fd971f;"><em>param</em></span>) { </div> <div> <span style="color:#66d9ef;"><em>var</em></span> blob <span style="color:#f92672;">=</span> <span style="color:#f92672;">new</span> <span style="color:rgb(166,226,46);">Blob</span>([htmlCode],{type: <span style="color:#e6db74;">"text/html"</span>}); </div> <div> <span style="color:#66d9ef;"><em>var</em></span> iframeDom <span style="color:#f92672;">=</span> document. <span style="color:#66d9ef;">createElement</span>( <span style="color:#e6db74;">"iframe"</span>); </div> <div> iframeDom.src <span style="color:#f92672;">=</span> URL. <span style="color:#a6e22e;">createObjectURL</span>(blob); </div> <div> showDom. <span style="color:#66d9ef;">appendChild</span>(iframeDom); </div> <div> } </div> <div> </ <span style="color:#f92672;">script</span>> </div> <br> <div> </ <span style="color:#f92672;">html</span>> </div> </div> <br> </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1306392876850122752"></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">  <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>  <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>  <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">你可能感兴趣的:(前端学习笔记)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1756032433184063488.htm" title="人力资源智能化管理项目（day04:组织架构）" target="_blank">人力资源智能化管理项目（day04:组织架构）</a> <span class="text-muted">我是如此相信ᯤ⁶⁶ᴳ</span> <a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%8A%9B%E8%B5%84%E6%BA%90%E6%99%BA%E8%83%BD%E5%8C%96%E7%AE%A1%E7%90%86%E9%A1%B9%E7%9B%AE/1.htm">人力资源智能化管理项目</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>学习源码可以看我的个人前端学习笔记(github.com):qdxzw/humanResourceIntelligentManagementProject觉得有帮助的同学，可以点心心支持一下哈树组件应用depts:[{name:'传智教育',children:[{name:'总裁办'},{name:'行政部'},{name:'人事部',children:[{name:'财务核算部'},{name:</div> </li> <li><a href="/article/1756032179529334784.htm" title="人力资源智能化管理项目（day03:主页模块）" target="_blank">人力资源智能化管理项目（day03:主页模块）</a> <span class="text-muted">我是如此相信ᯤ⁶⁶ᴳ</span> <a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%8A%9B%E8%B5%84%E6%BA%90%E6%99%BA%E8%83%BD%E5%8C%96%E7%AE%A1%E7%90%86%E9%A1%B9%E7%9B%AE/1.htm">人力资源智能化管理项目</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>学习源码可以看我的个人前端学习笔记(github.com):qdxzw/humanResourceIntelligentManagementProject觉得有帮助的同学，可以点心心支持一下哈主页权限验证(permission.js)importrouterfrom'@/router'importnprogressfrom'nprogress'//进度条import'nprogress/nprog</div> </li> <li><a href="/article/1755621366918299648.htm" title="Web前端学习笔记" target="_blank">Web前端学习笔记</a> <span class="text-muted">jusw123456</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>文章目录HTML+CSS系列学习笔记①之拨云见日1、什么是HTML、CSS？2、VSCode编译器（宇宙第一编译器）3、五大浏览器4、深入了解网站开发5、web前端的三大核心技术6、HTML基本结构和属性7、HTML初始代码8、HTML注释9、标题与段落10、文本修饰标签11、引入文件的地址路径12、图片标签13、跳转链接14、跳转锚点15、特殊符号16、列表标签17、表格标签18、表格属性19、</div> </li> <li><a href="/article/1754699924143882240.htm" title="前端学习笔记day02--CSS" target="_blank">前端学习笔记day02--CSS</a> <span class="text-muted">m0_38077048</span> <a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E8%87%AA%E7%94%A8/1.htm">学习自用</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a> <div>前端学习笔记day02–CSS一、CSS知识CSS（cascadingstylesheet）：层叠样式表（级联样式表）作用：设置html标签的字体、颜色、背景、边框、边距和宽高等，使界面美观、漂亮，从而提高用户体验。html搭起结构，CSS起美观作用，html和CSS分离、解耦，方便统一修改维护。二、CSS和html结合写法：选择器{声明；（属性名：属性值；）}1.行内样式行内样式作用域小，只作用</div> </li> <li><a href="/article/1753962196007665664.htm" title="[前端学习笔记1] 前端学习路线" target="_blank">[前端学习笔记1] 前端学习路线</a> <span class="text-muted">Lumos_zbj</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>按顺序学习一、做网页HTML：定义网页结构CSS（Cascadingstylesheets层叠样式表）：对网页进行装饰JS（JavaScript）：网页与用户的交互效果，【重要】WebAPI：将HTML,CSS,JS结合在一起，通过JS可以改变HTML,CSS.JQuery：老牌框架，了解即可。Bootstrap：响应式页面，了解即可移动端开发：【重要】二、数据库和服务器数据库：mongoDB（J</div> </li> <li><a href="/article/1753961295721283584.htm" title="爬虫配套学习-前端学习笔记03" target="_blank">爬虫配套学习-前端学习笔记03</a> <span class="text-muted">丰。。</span> <a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/1.htm">爬虫学习笔记</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>插入图片水平线无 月 的 中 秋据说每年八月十五的时候，夜空中的月亮是一年中最大，最圆，最亮，最美的月亮，中秋节的来历，这就是月饼的来历，大家会在这一天，和嘉园也，吃月饼，赏月。®效果图像的超链接水平线无 月 的 中 秋据说每年八月十五的时候，夜空中的月亮是一年中最大，最圆，最亮，最美的月亮，中秋节的来历，这</div> </li> <li><a href="/article/1753680734431756288.htm" title="前端学习笔记 | CSS动画+移动web" target="_blank">前端学习笔记 | CSS动画+移动web</a> <span class="text-muted">简·AI</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/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/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>一、平面转换为元素添加动态效果，一般与过渡配合使用。1、设置transition给元素本身，表示过渡变换方式和时间2、在元素hover设置transform（动态效果）transform:【移动】translate(x方向，y方向)、translateX（x、translateY(y)位移【旋转】rotate(数字+deg）【缩放】scele(数字)大于1放大，小于1缩小【倾斜】skew（数字+d</div> </li> <li><a href="/article/1753680735337725952.htm" title="前端学习笔记 | HTML5+CSS3静态网页制作的技巧（持续更新）" target="_blank">前端学习笔记 | HTML5+CSS3静态网页制作的技巧（持续更新）</a> <span class="text-muted">简·AI</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>注：本文的css样式均使用less写法1、字体居中（1）先text-align:center;行内元素水平居中（2）再line-heigh:(盒子高度);行内元素垂直居中text-align:center;line-height:(30/@vw);2、盒子居中情景1：版心居中margin:0auto;情景2：标题栏制作时让左右两个弹性盒子居中的方法（1）设置浮动（2）给父级添加行高line-hei</div> </li> <li><a href="/article/1753680733899079680.htm" title="前端学习笔记 | CSS高级技巧" target="_blank">前端学习笔记 | CSS高级技巧</a> <span class="text-muted">简·AI</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/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/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>一、定位注：需要同时设置定位模式和边偏移才生效。1、定位模式相对定位-position:relative特点：（1）灵活改变盒子在网页中的位置，改变位置的参照物是自己原来的位置（2）不脱标，占位（3）标签显示模式特点不变绝对定位-position:abusolute(子级绝对定位，父级相对定位-子绝父相)特点：（1）脱标，不占位（2）参照物先找祖先元素，如果祖先没有定位，则参照浏览器可视区域位置（</div> </li> <li><a href="/article/1753680347956002816.htm" title="前端学习笔记 | 响应式网页+Boostrap" target="_blank">前端学习笔记 | 响应式网页+Boostrap</a> <span class="text-muted">简·AI</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/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/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</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> <div>一、响应式网页一套代码适应多端1、媒体查询@media(条件){css}max-width小于等于max-width生效min-width【案例】左侧隐藏因为CSS的层叠性，书写顺序：max-width从大到小；min-width从小到大。【媒体查询完整写法】在html中link用于不同视口的css样式，media=""中一定要加（），否则不生效。2、BootstrapBootstrap是由Twi</div> </li> <li><a href="/article/1752411665669832704.htm" title="自学前端学习笔记html5(简称H5)" target="_blank">自学前端学习笔记html5(简称H5)</a> <span class="text-muted">Informal杨</span> <div>image.pngimage.pngimage.pngH5在语义上的改进在此基础上，HTML5增加了大量有意义的语义标签，更有利于搜索引擎或辅助设备理解HTML页面内容。HTML5会让HTML代码的内容更结构化、标签更语义化。我们常见的css+div布局是：image.png在html5中，我们可以这样写：image.pngH5的经典网页布局：H5中新增的语义标签表示区块表示文章。如文章、评论、帖</div> </li> <li><a href="/article/1752186248874704896.htm" title="前端自己整理的学习面试笔记" target="_blank">前端自己整理的学习面试笔记</a> <span class="text-muted">小江的博客</span> <a class="tag" taget="_blank" href="/search/IT%E8%B5%84%E6%BA%90/1.htm">IT资源</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a> <div>简介以下是本人一年多整理的前端学习笔记，现汇总分享给大家，很多问题都是面试必问的更多学习资源，可以点击我获取更多1js数据类型原始类型：nullundefinednumberstringbooleanSymbolBigInt引用类型：对象2判断一个对象属性是否存在本身属性判断：obj.hasOwnProperty(key)包括了上级属性判断：keyinobjReflect.get(obj,‘key</div> </li> <li><a href="/article/1750673224204566528.htm" title="前端学习笔记一一HTML常用标签之列表标签" target="_blank">前端学习笔记一一HTML常用标签之列表标签</a> <span class="text-muted">前前前端小飞</span> <div>HTML常用标签之列表标签列表标签的用途，就是用于编排短语句的文字。1.无序列表在无序列表中，各个列表项之间没有顺序级别之分，它通常使用一个项目符号作为每个列表项的前缀。设置无序列表的类型—type无序列表的默认符号是圆点（●）。�元素有type属性，通过定义不同的type属性可以改变列表的项目符号。目前，type属性的属性值有：�disc(圆●)、circle（圆圈○）、square（方块■）定</div> </li> <li><a href="/article/1750239918862385152.htm" title="字节跳动内部前端学习笔记在互联网上火了，在Github标星33K+，完整版开放下载" target="_blank">字节跳动内部前端学习笔记在互联网上火了，在Github标星33K+，完整版开放下载</a> <span class="text-muted">书苏</span> <div>一、入门前端三剑客1、HTMLhtml学起来还是挺简单的，无论你是否有编程基础，我觉得都可以快速入门，对于新手，我推荐找个入门的视频看一下，然后跟着视频打代码就可以了，入门教程随便在网上找个免费的视频就可以了，随便搜索「html入门」即可，或者看菜鸟教程的一个入门教程也行。看完视频，也可以看一下文字版的教程，不知道大家有没有看过阮一峰写过的教程，我觉得他写的教程都很棒，所以这里我也推荐下大家看一下</div> </li> <li><a href="/article/1750013266047811584.htm" title="前端学习笔记-HTML、CSS、Javascript基础知识" target="_blank">前端学习笔记-HTML、CSS、Javascript基础知识</a> <span class="text-muted">m0_53527658</span> <a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</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> <div>认识web网站的开发模式采用前后端分离技术开发Web前端三个组成部分HTML：负责网页结构（页面元素的内容）CSS：负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）JavaScript：负责网页的行为（交互效果）HTML和CSSHTML：超文本标记语言：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容；HTML标签都是预定义好的。例如：使用展示超</div> </li> <li><a href="/article/1748709809311465472.htm" title="ES6前端学习笔记" target="_blank">ES6前端学习笔记</a> <span class="text-muted">已注销</span> <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>修正ES6是ECMA为JavaScript制定的第6个标准版本，相关历史可查看此章节《ES6-ECMAScript6简介》。标准委员会最终决定，标准在每年6月正式发布并作为当年的正式版本，接下来的时间里就在此版本的基础上进行改动，直到下一年6月草案就自然变成新一年的版本，这样一来就无需以前的版本号，只要用年份标记即可。ECMAscript2015是在2015年6月发布ES6的第一个版本。以此类推，</div> </li> <li><a href="/article/1748701032117977088.htm" title="【前端学习笔记1】css基础" target="_blank">【前端学习笔记1】css基础</a> <span class="text-muted">__dh</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>css可以使页面更漂亮，即美化网页css：层叠样式表标签选择器：类选择器：id只能单次调用，类似人的身份证css里只要是word里面有的功能，他们都有对应的，不会的时候查一下就行实现垂直居中:height等于line-height就行font-family：可以修改字体font顺序：是否倾斜字号行高字体必须严格按照这个顺序来与文本相关text-indent：文本缩进text-align：cente</div> </li> <li><a href="/article/1748700142363492352.htm" title="【前端学习笔记2】javaScript基础" target="_blank">【前端学习笔记2】javaScript基础</a> <span class="text-muted">__dh</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>是什么：是一种运行在客户端（服务器的编程语言）javacript分为行内JavaScript，内部JavaScript，外部JavaScript内部JavaScript直接写在html中body里面alert（“hello，world”）我们将script放在html文件的地步附近的原因是浏览器会按照代码在文件中的顺序加载html如果先加载的JavaScript期望修改其下方的html，那么他可能</div> </li> <li><a href="/article/1747616622635401216.htm" title="自学前端学习笔记-02CSS基础样式语法" target="_blank">自学前端学习笔记-02CSS基础样式语法</a> <span class="text-muted">Informal杨</span> <div>◆CSS三大特性1.继承性2.层叠性3.优先级继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important继承<*{css}<div{css}<.(class命名){css}<#(class命名){}<style=""<!important{权限最高,不推荐使用}image.png不需要理解,后期使用less或者sass就可以了!◆PxCook的基本使用官方网站https:</div> </li> <li><a href="/article/1746907254134685696.htm" title="【wow-ts】前端学习笔记Typescript基础语法（一）" target="_blank">【wow-ts】前端学习笔记Typescript基础语法（一）</a> <span class="text-muted">miskirito</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>项目地址是https://github.com/datawhalechina/wow-ts。我选择的是ts前端课程Typescript笔记TypeScript入门介绍基础数据类型TypeScript基础数据结构TypeScript变量声明变量作用域TypeScript入门介绍第一次接触ts，先去了解了下ts的内容，复制内容如下TypeScript是JavaScript的一个超集，支持ECMAScr</div> </li> <li><a href="/article/1745473629660921856.htm" title="前端学习笔记 5：大事件" target="_blank">前端学习笔记 5：大事件</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/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>前端学习笔记5：大事件本文将学习一个示例项目（大事件）的前端搭建过程。1.准备工作1.1.创建工程创建一个名称为big-event的Vue3项目，具体可以参考这篇文章。1.2.安装插件安装ElementPlus：npminstallelement-plus--save安装好后还需要在main.js中导入相关模块和样式：import'./assets/main.scss'import{createA</div> </li> <li><a href="/article/1745473499478114304.htm" title="前端学习笔记 6：Pinia" target="_blank">前端学习笔记 6：Pinia</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/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>前端学习笔记6：PiniaPinia是Vue的一个官方库，用于状态管理。1.安装首先创建一个Vue3项目，具体方式可以参考这里。安装Pinia：npminstallpinia创建一个pinia实例(根store)并将其传递给应用：import'./assets/main.css'import{createApp}from'vue'import{createPinia}from'pinia'impo</div> </li> <li><a href="/article/1745377282232434688.htm" title="【前端学习笔记3——选不中按钮、全局变量、表格不显示、查看变量值】" target="_blank">【前端学习笔记3——选不中按钮、全局变量、表格不显示、查看变量值】</a> <span class="text-muted">weixin_47227105</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>前端学习笔记三，覆盖button选不中，可能是被别的元件覆盖了，用开发者工具选择元件，可以在样式里添加z-index或者用position把相对定位变为绝对定位。.back{z-index:99999999;position:absolute;right:40px;top:95px;}el-option筛选框里不显示label，显示value，而且有的列筛选框有label有value全局变量写法，</div> </li> <li><a href="/article/1745191168452345856.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/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>文章目录前端与HTML什么是前端？前端应该关注那些方面？注意HTML标签的语义化web开发的基本情况关于前端的开发：起源、架构、变迁前端应用的领域前端应用领域---浏览器前端应用领域---服务器前端应用领域---终端和跨端语言、框架、工具浏览器、网络、服务器Web标准标准组织：HTTP协议初识HTTP协议什么是HTTP协议协议分析报文methodWeb安全攻击防御对于XSS攻击：CSRF的防御Ty</div> </li> <li><a href="/article/1743025266642403328.htm" title="【前端学习笔记】HTML5中的video和audio" target="_blank">【前端学习笔记】HTML5中的video和audio</a> <span class="text-muted">花上</span> <div>标签定义声音，比如音乐或者其他音频流。标签定义视频，比如电影片段或其他视频流。video和audio的优点：都不需要第三方插件就能播放音频和视频，可以直接插入，并且用同一的API接口控制。video和audio的缺点：1）暂时没有对流视频的支持和规范。流媒体分HTTP渐进式下载和实时流式传播，video和audio属于HTTP属于渐进式下载，不需要流媒体服务器，普通HTTP服务器就可以。2）播放媒</div> </li> <li><a href="/article/1742449223162413056.htm" title="前端学习笔记 3：Vue 工程" target="_blank">前端学习笔记 3：Vue 工程</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/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>前端学习笔记3：Vue工程上一篇文章介绍了如何在单一Html页面中使用Vue，本文介绍如何从头开始用Vue构建一个前端工程项目。环境准备Vue框架代码的创建依赖于Node.js，因此需要先安装Node.js。创建和启动创建通过以下命令可以创建Vue的框架代码：npmcreatevue@latest该命令执行后会先检查是否安装create-vue工具，如果没有，就安装。然后再使用create-vue</div> </li> <li><a href="/article/1742449095500382208.htm" title="前端学习笔记 2：Vue" target="_blank">前端学习笔记 2：Vue</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/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>前端学习笔记2：VueVue是一个目前最流行的前端响应式框架，关于它的简单介绍可以观看这里。1.快速入门Vue的官网提供一个快速上手指南，有多种方式可以安装和使用Vue，这里展示一个最简单的方式——直接导入官方提供的在线的核心JS文件进行使用。这里展示的内容相当于官方快速上手指南中的使用ES模块构建版本。需要先像在之前文章中介绍的那样，在JS模块中导入Vue的createApp函数：import{</div> </li> <li><a href="/article/1742448967309869056.htm" title="前端学习笔记 1：js 导入导出" target="_blank">前端学习笔记 1：js 导入导出</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/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>前端学习笔记1：js导入导出1.传统引用一般性的，用以下方式引入JS中定义的函数或对象到Html中使用：functionshowMessage(){console.log("hello");}functionshowChineseMessage(){console.log("你好");}hello按我有惊喜document.getElementById("btn").onclick=functio</div> </li> <li><a href="/article/1742448711952252928.htm" title="前端学习笔记 4：Element Plus" target="_blank">前端学习笔记 4：Element Plus</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/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>前端学习笔记4：ElementPlus1.准备工作在使用ElementPlus之前，需要先创建一个Vue工程，具体可以参考上一篇文章。创建好后就可以按照官方文档中的指示，在工程目录下安装Element依赖：npminstallelement-plus--save注意，Element和ElementPlus是两个不同的项目，前者适用于Vue2.X，后者适用于Vue3.X。这里使用的是后者。2.快速开</div> </li> <li><a href="/article/1740617393400463360.htm" title="2021-08-25_vue环境搭建前端学习笔记" target="_blank">2021-08-25_vue环境搭建前端学习笔记</a> <span class="text-muted">kikop</span> <div>20210825_vue环境搭建前端学习笔记1概述1.1目录结构image-20211001195604044.png1.2项目配置细节1.2.1配置拦截器//E:\workdirectory\Dev\remotestudy\technicaltools\C050myvueelementdemo\myvue_front\src\config\http.js//接口请求拦截器importVuefro</div> </li> <li><a href="/article/53.htm" title="二分查找排序算法" target="_blank">二分查找排序算法</a> <span class="text-muted">周凡杨</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E4%BA%8C%E5%88%86%E6%9F%A5%E6%89%BE/1.htm">二分查找</a><a class="tag" taget="_blank" href="/search/%E6%8E%92%E5%BA%8F/1.htm">排序</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E6%8A%98%E5%8D%8A/1.htm">折半</a> <div> 一：概念二分查找又称折半查找（折半搜索/ 二分搜索），优点是比较次数少，查找速度快，平均性能好；其缺点是要求待查表为有序表，且插入删除困难。因此，折半查找方法适用于不经常变动而查找频繁的有序列表。首先，假设表中元素是按升序排列，将表中间位置记录的关键字与查找关键字比较，如果两者相等，则查找成功；否则利用中间位置记录将表分成前、后两个子表，如果中间位置记录的关键字大于查找关键字，则进一步</div> </li> <li><a href="/article/180.htm" title="java中的BigDecimal" target="_blank">java中的BigDecimal</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/BigDecimal/1.htm">BigDecimal</a> <div>        在项目开发过程中出现精度丢失问题，查资料用BigDecimal解决，并发现如下这篇BigDecimal的解决问题的思路和方法很值得学习，特转载。         原文地址：http://blog.csdn.net/ugg/article/de</div> </li> <li><a href="/article/307.htm" title="Shell echo命令详解" target="_blank">Shell echo命令详解</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/echo/1.htm">echo</a><a class="tag" taget="_blank" href="/search/shell/1.htm">shell</a> <div>Shell echo命令 Shell 的 echo 指令与 PHP 的 echo 指令类似，都是用于字符串的输出。命令格式： echo string 您可以使用echo实现更复杂的输出格式控制。 1.显示普通字符串: echo "It is a test" 这里的双引号完全可以省略，以下命令与上面实例效果一致： echo Itis a test 2.显示转义</div> </li> <li><a href="/article/434.htm" title="Oracle DBA 简单操作" target="_blank">Oracle DBA 简单操作</a> <span class="text-muted">周凡杨</span> <a class="tag" taget="_blank" href="/search/oracle+dba+sql/1.htm">oracle dba sql</a> <div> --执行次数多的SQL select sql_text,executions from (      select sql_text,executions from v$sqlarea order by executions desc      ) where rownum<81;  &nb</div> </li> <li><a href="/article/561.htm" title="画图重绘" target="_blank">画图重绘</a> <span class="text-muted">朱辉辉33</span> <a class="tag" taget="_blank" href="/search/%E6%B8%B8%E6%88%8F/1.htm">游戏</a> <div>  我第一次接触重绘是编写五子棋小游戏的时候，因为游戏里的棋盘是用线绘制的，而这些东西并不在系统自带的重绘里，所以在移动窗体时，棋盘并不会重绘出来。所以我们要重写系统的重绘方法。   在重写系统重绘方法时，我们要注意一定要调用父类的重绘方法，即加上super.paint(g)，因为如果不调用父类的重绘方式，重写后会把父类的重绘覆盖掉，而父类的重绘方法是绘制画布，这样就导致我们</div> </li> <li><a href="/article/688.htm" title="线程之初体验" target="_blank">线程之初体验</a> <span class="text-muted">西蜀石兰</span> <a class="tag" taget="_blank" href="/search/%E7%BA%BF%E7%A8%8B/1.htm">线程</a> <div>一直觉得多线程是学Java的一个分水岭，懂多线程才算入门。之前看《编程思想》的多线程章节，看的云里雾里，知道线程类有哪几个方法，却依旧不知道线程到底是什么？书上都写线程是进程的模块，共享线程的资源，可是这跟多线程编程有毛线的关系，呜呜。。。线程其实也是用户自定义的任务，不要过多的强调线程的属性，而忽略了线程最基本的属性。你可以在线程类的run()方法中定义自己的任务，就跟正常的Ja</div> </li> <li><a href="/article/815.htm" title="linux集群互相免登陆配置" target="_blank">linux集群互相免登陆配置</a> <span class="text-muted">林鹤霄</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>配置ssh免登陆 1、生成秘钥和公钥    ssh-keygen -t rsa 2、提示让你输入，什么都不输，三次回车之后会在~下面的.ssh文件夹中多出两个文件id_rsa 和 id_rsa.pub    其中id_rsa为秘钥，id_rsa.pub为公钥，使用公钥加密的数据只有私钥才能对这些数据解密    c</div> </li> <li><a href="/article/942.htm" title="mysql : Lock wait timeout exceeded; try restarting transaction" target="_blank">mysql : Lock wait timeout exceeded; try restarting transaction</a> <span class="text-muted">aigo</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>原文：http://www.cnblogs.com/freeliver54/archive/2010/09/30/1839042.html   原因是你使用的InnoDB   表类型的时候, 默认参数:innodb_lock_wait_timeout设置锁等待的时间是50s, 因为有的锁等待超过了这个时间,所以抱错.   你可以把这个时间加长,或者优化存储</div> </li> <li><a href="/article/1069.htm" title="Socket编程基本的聊天实现。" target="_blank">Socket编程基本的聊天实现。</a> <span class="text-muted">alleni123</span> <a class="tag" taget="_blank" href="/search/socket/1.htm">socket</a> <div>public class Server { //用来存储所有连接上来的客户 private List<ServerThread> clients; public static void main(String[] args) { Server s = new Server(); s.startServer(9988); } publi</div> </li> <li><a href="/article/1196.htm" title="多线程监听器事件模式(一个简单的例子)" target="_blank">多线程监听器事件模式(一个简单的例子)</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/%E7%BA%BF%E7%A8%8B/1.htm">线程</a><a class="tag" taget="_blank" href="/search/%E7%9B%91%E5%90%AC%E6%A8%A1%E5%BC%8F/1.htm">监听模式</a> <div>    多线程的事件监听器模式   监听器时间模式经常与多线程使用,在多线程中如何知道我的线程正在执行那什么内容,可以通过时间监听器模式得到        创建多线程的事件监听器模式 思路:    1, 创建线程并启动,在创建线程的位置设置一个标记     2,创建队</div> </li> <li><a href="/article/1323.htm" title="spring InitializingBean接口" target="_blank">spring InitializingBean接口</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a> <div>spring的事务的TransactionTemplate，其源码如下： public class TransactionTemplate extends DefaultTransactionDefinition implements TransactionOperations, InitializingBean{ ... } TransactionTemplate继承了DefaultT</div> </li> <li><a href="/article/1450.htm" title="Oracle中询表的权限被授予给了哪些用户" target="_blank">Oracle中询表的权限被授予给了哪些用户</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/%E6%9D%83%E9%99%90/1.htm">权限</a> <div>        Oracle查询表将权限赋给了哪些用户的SQL，以备查用。 select t.table_name as "表名", t.grantee as "被授权的属组", t.owner as "对象所在的属组"</div> </li> <li><a href="/article/1577.htm" title="【Struts2五】Struts2 参数传值" target="_blank">【Struts2五】Struts2 参数传值</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/struts2/1.htm">struts2</a> <div>Struts2中参数传值的3种情况 1.请求参数绑定到Action的实例字段上 2.Action将值传递到转发的视图上 3.Action将值传递到重定向的视图上   一、请求参数绑定到Action的实例字段上以及Action将值传递到转发的视图上 Struts可以自动将请求URL中的请求参数或者表单提交的参数绑定到Action定义的实例字段上，绑定的规则使用ognl表达式语言</div> </li> <li><a href="/article/1704.htm" title="【Kafka十四】关于auto.offset.reset[Q/A]" target="_blank">【Kafka十四】关于auto.offset.reset[Q/A]</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/kafka/1.htm">kafka</a> <div>I got serveral questions about  auto.offset.reset. This configuration parameter governs how  consumer read the message from  Kafka when  there is no initial offset in ZooKeeper or </div> </li> <li><a href="/article/1831.htm" title="nginx gzip压缩配置" target="_blank">nginx gzip压缩配置</a> <span class="text-muted">ronin47</span> <a class="tag" taget="_blank" href="/search/nginx+gzip+%E5%8E%8B%E7%BC%A9%E8%8C%83%E4%BE%8B/1.htm">nginx gzip 压缩范例</a> <div>nginx gzip压缩配置更多 0 nginx gzip 配置   随着nginx的发展，越来越多的网站使用nginx，因此nginx的优化变得越来越重要，今天我们来看看nginx的gzip压缩到底是怎么压缩的呢？ gzip(GNU-ZIP)是一种压缩技术。经过gzip压缩后页面大小可以变为原来的30%甚至更小，这样，用</div> </li> <li><a href="/article/1958.htm" title="java-13.输入一个单向链表，输出该链表中倒数第 k 个节点" target="_blank">java-13.输入一个单向链表，输出该链表中倒数第 k 个节点</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>two cursors. Make the first cursor go K steps first. /* * 第 13 题：题目：输入一个单向链表，输出该链表中倒数第 k 个节点 */ public void displayKthItemsBackWard(ListNode head,int k){ ListNode p1=head,p2=head; </div> </li> <li><a href="/article/2085.htm" title="Spring源码学习-JdbcTemplate queryForObject" target="_blank">Spring源码学习-JdbcTemplate queryForObject</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a> <div>JdbcTemplate中有两个可能会混淆的queryForObject方法： 1. Object queryForObject(String sql, Object[] args, Class requiredType) 2. Object queryForObject(String sql, Object[] args, RowMapper rowMapper) 第1个方法是只查</div> </li> <li><a href="/article/2212.htm" title="[冰川时代]在冰川时代,我们需要什么样的技术?" target="_blank">[冰川时代]在冰川时代,我们需要什么样的技术?</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E6%8A%80%E6%9C%AF/1.htm">技术</a> <div>      看美国那边的气候情况....我有个感觉...是不是要进入小冰期了?      那么在小冰期里面...我们的户外活动肯定会出现很多问题...在室内呆着的情况会非常多...怎么在室内呆着而不发闷...怎么用最低的电力保证室内的温度.....这都需要技术手段...   &nb</div> </li> <li><a href="/article/2339.htm" title="js 获取浏览器型号" target="_blank">js 获取浏览器型号</a> <span class="text-muted">cuityang</span> <a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/%E6%B5%8F%E8%A7%88%E5%99%A8/1.htm">浏览器</a> <div>根据浏览器获取iphone和apk的下载地址 <!DOCTYPE html> <html> <head>     <meta charset="utf-8" content="text/html"/>     <meta name=</div> </li> <li><a href="/article/2466.htm" title="C# socks5详解转" target="_blank">C# socks5详解转</a> <span class="text-muted">dalan_123</span> <a class="tag" taget="_blank" href="/search/socket/1.htm">socket</a><a class="tag" taget="_blank" href="/search/C%23/1.htm">C#</a> <div>http://www.cnblogs.com/zhujiechang/archive/2008/10/21/1316308.html  这里主要讲的是用.NET实现基于Socket5下面的代理协议进行客户端的通讯，Socket4的实现是类似的，注意的事，这里不是讲用C#实现一个代理服务器，因为实现一个代理服务器需要实现很多协议，头大，而且现在市面上有很多现成的代理服务器用，性能又好，</div> </li> <li><a href="/article/2593.htm" title="运维 Centos问题汇总" target="_blank">运维 Centos问题汇总</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/%E4%BA%91%E4%B8%BB%E6%9C%BA/1.htm">云主机</a> <div>一、sh 脚本不执行的原因 sh脚本不执行的原因只有2个 1.权限不够 2.sh脚本里路径没写完整。   二、解决You have new mail in /var/spool/mail/root 修改/usr/share/logwatch/default.conf/logwatch.conf配置文件 MailTo = MailFrom   三、查询连接数</div> </li> <li><a href="/article/2720.htm" title="Yii防注入攻击笔记" target="_blank">Yii防注入攻击笔记</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/WEB%E5%AE%89%E5%85%A8/1.htm">WEB安全</a><a class="tag" taget="_blank" href="/search/yii/1.htm">yii</a> <div>网站表单有注入漏洞须对所有用户输入的内容进行个过滤和检查，可以使用正则表达式或者直接输入字符判断，大部分是只允许输入字母和数字的，其它字符度不允许；对于内容复杂表单的内容，应该对html和script的符号进行转义替换：尤其是<,>,',"",&这几个符号这里有个转义对照表： http://blog.csdn.net/xinzhu1990/articl</div> </li> <li><a href="/article/2847.htm" title="MongoDB简介[一]" target="_blank">MongoDB简介[一]</a> <span class="text-muted">eksliang</span> <a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a><a class="tag" taget="_blank" href="/search/MongoDB%E7%AE%80%E4%BB%8B/1.htm">MongoDB简介</a> <div>MongoDB简介转载请出自出处：http://eksliang.iteye.com/blog/2173288 1.1易于使用        MongoDB是一个面向文档的数据库，而不是关系型数据库。与关系型数据库相比，面向文档的数据库不再有行的概念，取而代之的是更为灵活的“文档”模型。        另外，不</div> </li> <li><a href="/article/2974.htm" title="zookeeper windows 入门安装和测试" target="_blank">zookeeper windows 入门安装和测试</a> <span class="text-muted">greemranqq</span> <a class="tag" taget="_blank" href="/search/zookeeper/1.htm">zookeeper</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E8%A3%85/1.htm">安装</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E5%B8%83%E5%BC%8F/1.htm">分布式</a> <div>一、序言       以下是我对zookeeper 的一些理解：      zookeeper 作为一个服务注册信息存储的管理工具，好吧，这样说得很抽象，我们举个“栗子”。       栗子1号：       假设我是一家KTV的老板，我同时拥有5家KTV，我肯定得时刻监视</div> </li> <li><a href="/article/3101.htm" title="Spring之使用事务缘由(2-注解实现)" target="_blank">Spring之使用事务缘由(2-注解实现)</a> <span class="text-muted">ihuning</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a> <div>  Spring事务注解实现   1. 依赖包：     1.1 spring包：           spring-beans-4.0.0.RELEASE.jar           spring-context-4.0.0.</div> </li> <li><a href="/article/3228.htm" title="iOS App Launch Option" target="_blank">iOS App Launch Option</a> <span class="text-muted">啸笑天</span> <a class="tag" taget="_blank" href="/search/option/1.htm">option</a> <div>iOS 程序启动时总会调用application:didFinishLaunchingWithOptions:，其中第二个参数launchOptions为NSDictionary类型的对象，里面存储有此程序启动的原因。   launchOptions中的可能键值见UIApplication Class Reference的Launch Options Keys节。 1、若用户直接</div> </li> <li><a href="/article/3355.htm" title="jdk与jre的区别（_）" target="_blank">jdk与jre的区别（_）</a> <span class="text-muted">macroli</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/jdk/1.htm">jdk</a> <div>简单的说JDK是面向开发人员使用的SDK，它提供了Java的开发环境和运行环境。SDK是Software Development Kit 一般指软件开发包，可以包括函数库、编译程序等。  JDK就是Java Development Kit JRE是Java Runtime Enviroment是指Java的运行环境，是面向Java程序的使用者，而不是开发者。如果安装了JDK，会发同你</div> </li> <li><a href="/article/3482.htm" title="Updates were rejected because the tip of your current branch is behind" target="_blank">Updates were rejected because the tip of your current branch is behind</a> <span class="text-muted">qiaolevip</span> <a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E6%B0%B8%E6%97%A0%E6%AD%A2%E5%A2%83/1.htm">学习永无止境</a><a class="tag" taget="_blank" href="/search/%E6%AF%8F%E5%A4%A9%E8%BF%9B%E6%AD%A5%E4%B8%80%E7%82%B9%E7%82%B9/1.htm">每天进步一点点</a><a class="tag" taget="_blank" href="/search/%E4%BC%97%E8%A7%82%E5%8D%83%E8%B1%A1/1.htm">众观千象</a><a class="tag" taget="_blank" href="/search/git/1.htm">git</a> <div>$ git push joe prod-2295-1 To git@git.dianrong.com:joe.le/dr-frontend.git ! [rejected] prod-2295-1 -> prod-2295-1 (non-fast-forward) error: failed to push some refs to 'git@git.dianron</div> </li> <li><a href="/article/3609.htm" title="[一起学Hive]之十四-Hive的元数据表结构详解" target="_blank">[一起学Hive]之十四-Hive的元数据表结构详解</a> <span class="text-muted">superlxw1234</span> <a class="tag" taget="_blank" href="/search/hive/1.htm">hive</a><a class="tag" taget="_blank" href="/search/hive%E5%85%83%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">hive元数据结构</a> <div>关键字：Hive元数据、Hive元数据表结构   之前在 “[一起学Hive]之一–Hive概述，Hive是什么”中介绍过，Hive自己维护了一套元数据，用户通过HQL查询时候，Hive首先需要结合元数据，将HQL翻译成MapReduce去执行。本文介绍一下Hive元数据中重要的一些表结构及用途，以Hive0.13为例。   文章最后面，会以一个示例来全面了解一下，</div> </li> <li><a href="/article/3736.htm" title="Spring 3.2.14，4.1.7，4.2.RC2发布" target="_blank">Spring 3.2.14，4.1.7，4.2.RC2发布</a> <span class="text-muted">wiselyman</span> <a class="tag" taget="_blank" href="/search/Spring+3/1.htm">Spring 3</a> <div>  Spring 3.2.14、4.1.7及4.2.RC2于6月30日发布。   其中Spring 3.2.1是一个维护版本(维护周期到2016-12-31截止)，后续会继续根据需求和bug发布维护版本。此时，Spring官方强烈建议升级Spring框架至4.1.7 或者将要发布的4.2 。   其中Spring 4.1.7主要包含这些更新内容。 </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.  </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>