浅谈h5的新属性(data-*属性)

        HTML5和上一个版本HTML4.01的最大最本质的一个区别点就在于,HTML4.01是基于SGML的,所以标签需要声明引用DTD,DTD 规定了标记语言的规则,这样浏览器才能正确地呈现内容。而HTML5是不基于SGML的,所以不需要引用DTD。

        在HTML4.01中,DTD有三种声明方法,分别是Strict、Transitional和Frameset。与它们三个相对应的如下:

        1.HTML4.01 Strict,不允许使用表现性、废弃元素(如font)和框架集(如frameset)


        2.HTML4.01 Transitional,允许使用表现性和废弃元素,不允许使用框架集

        3.HTML4.01 Frameset,允许使用表现性、废弃元素和框架集

        但是在HTML5中,只有一种声明方式,如下所示:

       

        除了上面讲的最基本的不同外,在HTML5,允许4种不同的属性语法:

浅谈h5的新属性(data-*属性)_第1张图片

        除此以外,HTML5还删除了很多HTML4.01的元素并且加了很多HTML5的新元素。删除的元素有:
、、、、<strike>、<tt>。增加了这些新元素:<article>、<address>、<applet>、<bdi>、<canvas>、<command>、<datalist>、<details>、<dialog>、<embed>、<figcaption>、<figure>、<footer>、<header>、<keygen>、<mark>、<meter>、<nav>、<output>、<progress>、<rp>、<rt>、<ruby>、<section>、<source>、<summary>、<time>、<track>、<video>、<wbr>,值得注意的是,有一些新的HTML5元素目前为止各大浏览器都不支持,所以在用的时候最好就用一些已经成熟的元素,那些不成熟的最好还是通过js来实现。</p> <p>        除此以外,HTML5还多了很多新属性,由于属性太多,这里就不列了,这里只介绍比较有用的属性:data-*属性。</p> <p>        这个data-*是可以用来存储数据的,data-的后面紧跟自己起的一个变量名,然后后面赋予一个值,这个值就会被存储起来。然后获取数据通过js来实现,如:</p> <p></p> <pre><code class="language-html"><!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title></title> </head> <body> <div id='a' data-ha='aaa'>a</div> <div id='b' data-ha-ha='bbb'>b</div> </body> <script type="text/javascript"> function ha(){ var a = document.getElementById('a') var b = document.getElementById('b') console.log(a.dataset.ha) console.log(b.dataset.haHa) } ha() </script> </html></code></pre>        在这里,可以发现第一个div的data-后面只有一个变量名,而第二个div后面却又多加了一个,所以在利用dataset方法的时候,后面的属性名应该用驼峰命名法。这个dataset()方法除了可以获取数据外,还可以添加新的data-*,如: <p></p> <p></p> <pre><code class="language-html"><!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title></title> </head> <body> <div id='c'>c</div> </body> <script type="text/javascript"> function ha(){ var c = document.getElementById('c') c.dataset.he = 'ccc' console.log(c.dataset.he) } ha() </script> </html></code></pre>        这个在控制台里面可以清楚的看到div里面多了一个data-he属性。如果说有一些低级的浏览器不支持data-*属性的话,那么我们怎么样才能实现我们的这个做法呢?方法很简单,就是通过getAttribute和setAttribute来实现。如: <br> <pre><code class="language-html"><!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title></title> </head> <body> <div id='d'>d</div> </body> <script type="text/javascript"> function ha(){ var d = document.getElementById('d') d.setAttribute('data-d', 'ddd') console.log(d.getAttribute('data-d')) } ha() </script> </html></code></pre>        幸运的是,目前所有的主流的浏览器都支持这个新属性,下面是MDN的一个data-*属性所支持的浏览器: <br> <a href="http://img.e-com-net.com/image/info8/484246fc34fb4bb2b1739cf4aa6fa1ed.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/484246fc34fb4bb2b1739cf4aa6fa1ed.jpg" alt="浅谈h5的新属性(data-*属性)_第2张图片" width="594" height="183" style="border:1px solid black;"></a> <br> <p></p> <p>        亲测ie11可以接受,其他ie版本就暂时未知。<br></p> <p>        当然,现在只是聊的是h5的新属性,对h5用的最多的画布、svg、音频视频还有api还没聊到,我会在下篇文章继续聊这些新东西。具体更多HTML5新的属性和元素,请参考这文:HTMl5新元素<br></p> <p>本文参考:HTML元素参考  data-*属性功能一览  data-*详细教程 <!DOCTYPE>标签<br></p> </div> </div> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1304787135009689600"></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">你可能感兴趣的:(HTML5,前端面试)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1950191165710069760.htm" title="前端面试每日 3+1 —— 第39天" target="_blank">前端面试每日 3+1 —— 第39天</a> <span class="text-muted">浪子神剑</span> <div>今天的面试题(2019.05.25)——第39天[html]title与h1、b与strong、i与em的区别分别是什么?[css]写出你知道的CSS水平和垂直居中的方法[js]说说你对模块化的理解[软技能]公钥加密和私钥加密是什么?《论语》,曾子曰:“吾日三省吾身”(我每天多次反省自己)。前端面试每日3+1题,以面试题来驱动学习,每天进步一点!让努力成为一种习惯,让奋斗成为一种享受!欢迎在Iss</div> </li> <li><a href="/article/1950104727928762368.htm" title="震惊!DOM变化监控神器MutationObserver,前端开发必知的隐藏武器!" target="_blank">震惊!DOM变化监控神器MutationObserver,前端开发必知的隐藏武器!</a> <span class="text-muted">coding随想</span> <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><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a> <div>一、什么是MutationObserver?如果你是一个前端开发者,一定会遇到这样的场景:页面动态加载内容后,某些操作失效了。比如,你写了一个监听按钮点击的代码,但按钮是通过AJAX动态加载的,你的代码根本无法触发。这个时候,你就需要一个“监控哨兵”——MutationObserver,它能实时监听DOM树的变化,帮你捕获那些“暗中作祟”的节点变动。MutationObserver是HTML5引入</div> </li> <li><a href="/article/1950100184717389824.htm" title="11. HTML 中 DOCTYPE 的作用" target="_blank">11. HTML 中 DOCTYPE 的作用</a> <span class="text-muted">yqcoder</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95-CSS/1.htm">前端面试-CSS</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>总结H5的声明HTML5的DOCTYPE声明HTML5中的声明用于告诉浏览器当前文档使用的是HTML5的文档类型。它必须是文档中的第一行内容(在任何HTML标签之前),以确保浏览器能够正确地解析和渲染页面。DOCTYPE的作用触发标准模式:DOCTYPE声明的主要作用是让浏览器以标准模式(StandardsMode)来解析和渲染页面,而不是以兼容模式(QuirksMode)。兼容性:在没有DOCT</div> </li> <li><a href="/article/1949895918400630784.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/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>HTML5的新特性和CSS3的新特性引入了一系列语义化标签使文档结构更加清晰(header,nav,aside,article,footer,section),多媒体支持video,audio,Canvas绘图div上下居中对齐的几种方式第一种:flex布局display:flex;justify-content:center;/*水平居中/align-items:center;/垂直居中/第二种</div> </li> <li><a href="/article/1949694170553708544.htm" title="html5效果案例,10个优秀HTML5网站案例赏析" target="_blank">html5效果案例,10个优秀HTML5网站案例赏析</a> <span class="text-muted"></span> <div>随着Adobe的弃Flash转投HTML5,HTML5又开始吸引着大众的目光。与现在使用的HTML标记语言相比,HTML5有更多的标签和属性,使用更为灵活,功能更为强大。现在已经有很多前沿的HTML5网站开始使用HTML5,本文收集整理出了10个非常优秀的HTML5网站。那么,什么才是优秀的HTML5网站?因为HTML5还没有成为国际标准,旧的浏览器还无法支持HTML5,所以优秀的HTML5网站示</div> </li> <li><a href="/article/1949681688023986176.htm" title="HTML5" target="_blank">HTML5</a> <span class="text-muted">Darling02zjh</span> <a class="tag" taget="_blank" href="/search/html5/1.htm">html5</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> <div>HTML:和其他的语言一样也有基础的框架和快捷键。命名规则:后缀名是“.html”每个项目最上面都有是H5的声明,处于标签之前骨架:html标签:定义HTML文档,这个元素我们浏览器看到后就明白这是个HTML文档了,所以你的其他元素要包裹在这个标签里面,标签限定了文档的开始点和结束点。...其他元素head标签:head标签用于文档的头部,文档的头部描述文档的各种属性和信息,包括文档的标题,在we</div> </li> <li><a href="/article/1949650632512172032.htm" title="HTML5+JavaScript动画基础 完整版 中文pdf扫描版" target="_blank">HTML5+JavaScript动画基础 完整版 中文pdf扫描版</a> <span class="text-muted">不一样的女孩6</span> <div>《HTML5+JavaScript动画基础》包括了基础知识、基础动画、高级动画、3D动画和其他技术5大部分,分别介绍了动画的基本概念、动画的JavaScript基础、动画中的三角学、渲染技术、速度向量和加速度、边界与摩擦力、用户交互:移动物体、缓动与弹动、碰撞检测、坐标旋转与斜面反弹、撞球物理、粒子与万有引力、正向运动学:让事物行走、反向运动学:拖曳与伸出、三维基础、三维线条与填充、背面剔除与三维</div> </li> <li><a href="/article/1949573392332025856.htm" title="HTML5元素相关补充" target="_blank">HTML5元素相关补充</a> <span class="text-muted">QZ_orz_freedom</span> <a class="tag" taget="_blank" href="/search/html5/1.htm">html5</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> <div>一.元素是HTML5的文档类型声明,它告诉浏览器当前页面是使用HTML5规范编写的,HTML5是最新的HTML版本,拥有更多的功能和优化,因此推荐在新的Web页面中使用它。在HTML文档中,声明通常是文档的第一行文档元数据元素描述指定用于一个文档中包含的所有相对URL的根URL。一份中只能有一个该元素。包含文档相关的配置信息(元数据),包括文档的标题、脚本和样式表等。指定当前文档与外部资源的关系。</div> </li> <li><a href="/article/1949558142270500864.htm" title="HTML5:中如何触发按钮点击事件" target="_blank">HTML5:中如何触发按钮点击事件</a> <span class="text-muted">Dy大叔</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%AE%B0%E5%BD%95/1.htm">前端开发记录</a><a class="tag" taget="_blank" href="/search/HTML5/1.htm">HTML5</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>在HTML5中,可以通过多种方式触发按钮点击事件,包括使用JavaScript原生方法、使用jQuery库和使用HTML表单和提交按钮,根据项目需求和技术栈选择合适的方法来实现按钮点击事件的触发。使用JavaScript原生方法在HTML5中,可以使用JavaScript的addEventListener方法为按钮添加点击事件,需要在HTML文件中创建一个按钮元素,并为其设置一个唯一的ID,在Ja</div> </li> <li><a href="/article/1949525230741417984.htm" title="HTML5 新特性:MutationObserver 详解" target="_blank">HTML5 新特性:MutationObserver 详解</a> <span class="text-muted">索西引擎</span> <a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>一、概念与背景MutationObserver是HTML5引入的一个强大的JavaScriptAPI,它用于异步观察DOM树的变化。在MutationObserver出现之前,开发者若要监测DOM变化,常采用轮询(如使用setInterval不断检查DOM状态)或依赖DOM事件(如DOMNodeInserted、DOMNodeRemoved等)的方式。但轮询效率低下,频繁检查会消耗大量资源;而旧的</div> </li> <li><a href="/article/1949425111731859456.htm" title="【高中数学之函数】四种幂函数图线(二次、三次、开方、开立方)" target="_blank">【高中数学之函数】四种幂函数图线(二次、三次、开方、开立方)</a> <span class="text-muted">土门子拉马努金</span> <a class="tag" taget="_blank" href="/search/%E9%AB%98%E4%B8%AD%E6%95%B0%E5%AD%A6%E4%B9%8B%E5%87%BD%E6%95%B0/1.htm">高中数学之函数</a><a class="tag" taget="_blank" href="/search/%E9%AB%98%E4%B8%AD%E6%95%B0%E5%AD%A6/1.htm">高中数学</a><a class="tag" taget="_blank" href="/search/%E5%87%BD%E6%95%B0/1.htm">函数</a> <div>【图像】【代码】UNASSIGNED.centerlize{margin:0auto;border:0pxsolidred;width:1200px;height:600px;}如果看到这段文字说您的浏览器尚不支持HTML5Canvas,请更换浏览器再试.retval.max){retval.max=y;retval.max_x=cds[i].x;}if(yarr.length){index=in</div> </li> <li><a href="/article/1949333960383328256.htm" title="【QT进阶】Qt http编程之websocket的简单介绍" target="_blank">【QT进阶】Qt http编程之websocket的简单介绍</a> <span class="text-muted">不吃~香菜</span> <a class="tag" taget="_blank" href="/search/QT%E8%BF%9B%E9%98%B6/1.htm">QT进阶</a><a class="tag" taget="_blank" href="/search/qt/1.htm">qt</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/websocket/1.htm">websocket</a> <div>往期回顾【QT进阶】Qthttp编程之用户登录注册功能实现-CSDN博客【QT进阶】Qthttp编程之json解析的简单介绍-CSDN博客【QT进阶】Qthttp编程之nlohmannjson库使用的简单介绍-CSDN博客【QT进阶】Qthttp编程之websocket的简单介绍一、什么是websocket1、简介websocket是HTML5中新增的一个协议,这个协议的出现,让客户端和服务器之前</div> </li> <li><a href="/article/1949251496080109568.htm" title="【HTML】<script>元素中的 defer 和 async 属性详解" target="_blank">【HTML】<script>元素中的 defer 和 async 属性详解</a> <span class="text-muted"></span> <div>文章目录元素中的defer和async属性详解基本概念传统脚本加载defer属性async属性对比表格使用场景建议注意事项示例在HTML5中,元素有两个控制脚本加载和执行行为的属性:defer和async。这两个属性可以帮助开发者优化页面加载性能,特别是在处理外部脚本时。基本概念传统脚本加载没有使用任何属性的元素会阻塞HTML解析:浏览器遇到这个脚本时会暂停HTML解析下载并执行脚本执行完成后才继</div> </li> <li><a href="/article/1949181375550648320.htm" title="像素风格超级玛丽HTML游戏" target="_blank">像素风格超级玛丽HTML游戏</a> <span class="text-muted"></span> <div>像素风格超级玛丽HTML游戏创建一个像素风格的HTML5小游戏,模仿超级玛丽的经典玩法。游戏包含移动、跳跃、收集金币、躲避敌人和到达终点等核心机制。设计思路使用纯HTML5Canvas实现游戏渲染像素风格美术设计(16x16像素元素)实现物理引擎(重力、碰撞检测)键盘控制移动和跳跃添加经典超级玛丽元素(砖块、水管、蘑菇敌人)下面是完整的实现代码:像素超级玛丽*{margin:0;padding:0</div> </li> <li><a href="/article/1949181376288845824.htm" title="像素风格坦克大战游戏" target="_blank">像素风格坦克大战游戏</a> <span class="text-muted">代码改变世界10086</span> <a class="tag" taget="_blank" href="/search/%E6%B8%B8%E6%88%8F/1.htm">游戏</a><a class="tag" taget="_blank" href="/search/%E5%83%8F%E7%B4%A0%E6%B8%B8%E6%88%8F/1.htm">像素游戏</a><a class="tag" taget="_blank" href="/search/%E6%B8%B8%E6%88%8F/1.htm">游戏</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a> <div>像素风格坦克大战游戏下面我将实现一个基于HTML5Canvas的像素风格坦克大战游戏,玩法类似经典的FC坦克大战。设计思路使用像素风格渲染游戏元素玩家控制坦克移动和射击敌方AI坦克自动移动和攻击可破坏的砖墙和不可破坏的钢墙基地保护机制计分系统和生命值显示实现代码像素坦克大战*{margin:0;padding:0;box-sizing:border-box;font-family:'PressSt</div> </li> <li><a href="/article/1949117842129481728.htm" title="2024年前端面试题及答案" target="_blank">2024年前端面试题及答案</a> <span class="text-muted">2401_84433924</span> <a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源。它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSFR等攻击。3如何解决跨域?能说1,2,7,8就行。1、通过jsonp跨域2、CORS3、document.domain+iframe跨域4、location.hash+iframe5、window.name+iframe跨域</div> </li> <li><a href="/article/1949085415449358336.htm" title="canvas使用" target="_blank">canvas使用</a> <span class="text-muted">CDwenhuohuo</span> <a class="tag" taget="_blank" href="/search/canva%E5%8F%AF%E7%94%BB/1.htm">canva可画</a> <div>是HTML5引入的一个新标签,它首次出现在2004年的Safari浏览器中,由Apple提出,并在后来的HTML5标准中被正式采纳。IE8及以下❌不支持Canvas的基本用法-WebAPI|MDNvue3import{onMounted}from'vue';onMounted(()=>{constcanvas=document.getElementById('myCanvas');constctx</div> </li> <li><a href="/article/1948986571701153792.htm" title="通过Deepseek找工作" target="_blank">通过Deepseek找工作</a> <span class="text-muted">速易达网络</span> <a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a> <div>推送的结果如下,对应的AI提示词在底部:计算机方向远程工作职位汇总整合全球远程技术岗位|支持全地域远程办公|涵盖开发、安全、云计算等方向覆盖方向:8+个技术领域薪资范围:¥10K-¥40K/月工作模式:100%远程远程技术职位列表职位名称技能要求经验要求薪资待遇工作模式WordPress开发工程师PHP,HTML5/CSS3,WordPress二次开发,SEO优化3年+1.4-1.6万/月全球远程</div> </li> <li><a href="/article/1948920632704036864.htm" title="HTML制作一个介绍自己家乡的网站——贵州贵阳,排版整洁,内容丰富,主题鲜明" target="_blank">HTML制作一个介绍自己家乡的网站——贵州贵阳,排版整洁,内容丰富,主题鲜明</a> <span class="text-muted">软件技术NINI</span> <a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/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>一、‍网站题目旅游,当地特色,历史文化,特色小吃等网站的设计与制作。二、✍️网站描述‍静态网站的编写主要是用HTMLDIV+CSS等来完成页面的排版设计‍,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode、Webstorm、Animate等等,用的最多的还是DW,当然不同软件写出的前端Html5代码都是一致的,本网页适合修改成为各种类型的产品展示网页,</div> </li> <li><a href="/article/1948891766690213888.htm" title="HTML5和SVG篝火动画实战:月亮下的野营炊烟效果" target="_blank">HTML5和SVG篝火动画实战:月亮下的野营炊烟效果</a> <span class="text-muted">申增浩</span> <div>本文还有配套的精品资源,点击获取简介:HTML5是网页标记语言的最新标准,支持更加动态和丰富的用户体验。本项目源码展示了如何使用HTML5的SVG来绘制篝火和炊烟动画,通过CSS3动画、JavaScript交互、Canvas与SVG的选择以及Web动画性能优化,实现了一个月亮下的篝火和野营炊烟效果。项目还考虑了响应式设计和数据结构的使用,为开发者提供了一个学习Web前端开发的实践案例。1.HTML</div> </li> <li><a href="/article/1948812853125378048.htm" title="技术大牛谈HTML 5设计原理" target="_blank">技术大牛谈HTML 5设计原理</a> <span class="text-muted">Bluestar</span> <a class="tag" taget="_blank" href="/search/Web%E5%BC%80%E5%8F%91/1.htm">Web开发</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/xhtml/1.htm">xhtml</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/%E6%96%87%E6%A1%A3/1.htm">文档</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a> <div>本篇文章是JeremyKeith在Fronteers2010上的主题演讲,主要跟大家谈谈HTML5的设计。主要分两个方面,一方面就是HTML5;另一方面就是80/20。JeremyKeith在Fronteers2010上的主题演讲下载PPT(PDF)http://adactio.com/extras/slides/designofhtml5.pdf观看视频http://fronteers.nl/c</div> </li> <li><a href="/article/1948705688083558400.htm" title="html结构解析" target="_blank">html结构解析</a> <span class="text-muted">ca_rry</span> <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> <div>:声明为HTML5文档:根元素,指定页面语言为中文:设置字符编码,确保中文正常显示:实现响应式设计,使页面在移动设备上正确显示:设置浏览器标签页标题:内嵌CSS样式,用于定义页面元素的显示效果:页面主容器,用于统一管理页面内容的布局:页面主标题,应用了自定义标题样式:示例图片,添加了悬停缩放效果:表单容器,包含输入框、下拉选择器和提交按钮:特性列表,使用自定义列表样式</div> </li> <li><a href="/article/1948347905744105472.htm" title="前端面试专栏-工程化:26.性能优化方案(加载优化、渲染优化)" target="_blank">前端面试专栏-工程化:26.性能优化方案(加载优化、渲染优化)</a> <span class="text-muted">爱分享的程序员</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%80%9A%E5%85%B3%E6%8C%87%E5%8D%97/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/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a> <div>欢迎来到前端面试通关指南专栏!从js精讲到框架到实战,渐进系统化学习,坚持解锁新技能,祝你轻松拿下心仪offer。前端面试通关指南专栏主页前端面试专栏规划详情项目实战与工程化模块-性能优化方案(加载优化、渲染优化)在前端项目实战中,性能优化是提升用户体验的核心环节。随着项目复杂度提升,加载缓慢、页面卡顿等问题会直接影响用户留存率——研究表明,页面加载时间每增加1秒,用户流失率可上升20%。本文从工</div> </li> <li><a href="/article/1948347906541023232.htm" title="前端面试专栏-工程化:29.微前端架构设计与实践" target="_blank">前端面试专栏-工程化:29.微前端架构设计与实践</a> <span class="text-muted">爱分享的程序员</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%80%9A%E5%85%B3%E6%8C%87%E5%8D%97/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/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>欢迎来到前端面试通关指南专栏!从js精讲到框架到实战,渐进系统化学习,坚持解锁新技能,祝你轻松拿下心仪offer。前端面试通关指南专栏主页前端面试专栏规划详情微前端架构设计与实践一、微前端核心概念与价值随着前端应用规模扩大,单页应用(SPA)逐渐面临"巨石应用"问题:代码体积膨胀、团队协作冲突、技术栈锁定、发布周期长。微前端架构通过将应用拆分为独立可交付的微应用,实现"技术栈无关、独立开发、独立部</div> </li> <li><a href="/article/1948336800086945792.htm" title="JS执行机制" target="_blank">JS执行机制</a> <span class="text-muted">1024k纯金</span> <div>首先我们来看几个问题:1.JS是单线程的么?2.JS有异步么?3.JS单线程怎么实现的的异步1.JS是单线程的么?这个问题毫无悬念,肯定是单线程的。js刚开始就是作为浏览器脚本语言推出的,试想如果是多线程:那么一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线程为准?这样就复杂化了,HTML5提出WebWorker标准,允许JavaScript脚本创建多个线程,但</div> </li> <li><a href="/article/1948224750979444736.htm" title="网页视频进度条禁止拖动----解决" target="_blank">网页视频进度条禁止拖动----解决</a> <span class="text-muted"></span> <div>点击键盘F12键,进入开发者模式发现标志,html5播放器,属于原生支持最方便实现加速的在开发者模式中找到Console调式窗口,输入以下代码可以设置视频播放速度/*playvideotwiceasfast*/document.querySelector('video').defaultPlaybackRate=1.0;//默认一倍速播放document.querySelector('video'</div> </li> <li><a href="/article/1948103937403973632.htm" title="HTML5+CSS3小实例:流星划过天际的动画效果" target="_blank">HTML5+CSS3小实例:流星划过天际的动画效果</a> <span class="text-muted">艾恩小灰灰</span> <div>实例:流星划过天际的动画效果技术栈:HTML+CSS效果:源码:【html】流星划过天际的动画效果【css】*{/*初始化*/margin:0;padding:0;}body{/*100%窗口高度*/height:100vh;/*溢出隐藏*/overflow:hidden;}.container{/*绝对定位*/position:absolute;top:0;left:0;width:100%;h</div> </li> <li><a href="/article/1948005624440745984.htm" title="ios 集成H5+SDK" target="_blank">ios 集成H5+SDK</a> <span class="text-muted">梦迪达达</span> <div>突然接受一个H5+很茫然,打开官方文档更是无法言语,技术人员已经明确提出开发文档停止更新,那么我们只能综合文档以及前辈们的实战来解决了HTML5+SDK一共三种集成方式,“独立应用”、“Widget”和“WebView”1、独立应用集成方式:使用独立应用方式,开发者需要将HTML5+SDK生成的首页面设置为当前View的subView。HTML5+SDK将对应用进行管理。2、Widget集成方式:</div> </li> <li><a href="/article/1947472423611854848.htm" title="webkitSpeechRecognitionHTML5语音识别文字(直接运行)" target="_blank">webkitSpeechRecognitionHTML5语音识别文字(直接运行)</a> <span class="text-muted">AIGC创想家</span> <a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/%E8%AF%AD%E9%9F%B3%E8%AF%86%E5%88%AB/1.htm">语音识别</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>前端想要实现语音转文字,其实不需要任何云服务,浏览器自带的api就能搞定。下面是已经封装好的代码,复制之后可以在控制台只接运行。classSpeechRecognitionManager{??tempTranscript=''??isRecording=false;??timeoutid=0;??exitKeywors=['stop','exit','quit','退出','停止识别','说完了'</div> </li> <li><a href="/article/1947457407374389248.htm" title="前端面试题" target="_blank">前端面试题</a> <span class="text-muted">xkxnq</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E9%97%AE%E9%A2%98/1.htm">前端开发问题</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>CSS常见问题解答1.CSS盒模型CSS盒模型由内容区域(content)、内边距(padding)、边框(border)和外边距(margin)组成,分为两种类型:标准盒模型:元素宽度=content宽度替代盒模型(通过box-sizing:border-box设置):元素宽度=content+padding+border2.CSS选择器的优先级优先级从高到低:!important(覆盖所有规则</div> </li> <li><a href="/article/89.htm" title="java责任链模式" target="_blank">java责任链模式</a> <span class="text-muted">3213213333332132</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E8%B4%A3%E4%BB%BB%E9%93%BE%E6%A8%A1%E5%BC%8F/1.htm">责任链模式</a><a class="tag" taget="_blank" href="/search/%E6%9D%91%E6%B0%91%E5%91%8A%E5%8E%BF%E9%95%BF/1.htm">村民告县长</a> <div>责任链模式,通常就是一个请求从最低级开始往上层层的请求,当在某一层满足条件时,请求将被处理,当请求到最高层仍未满足时,则请求不会被处理。 就是一个请求在这个链条的责任范围内,会被相应的处理,如果超出链条的责任范围外,请求不会被相应的处理。 下面代码模拟这样的效果: 创建一个政府抽象类,方便所有的具体政府部门继承它。 package 责任链模式; /** * </div> </li> <li><a href="/article/216.htm" title="linux、mysql、nginx、tomcat 性能参数优化" target="_blank">linux、mysql、nginx、tomcat 性能参数优化</a> <span class="text-muted">ronin47</span> <div>一、linux 系统内核参数 /etc/sysctl.conf文件常用参数 net.core.netdev_max_backlog = 32768 #允许送到队列的数据包的最大数目 net.core.rmem_max = 8388608 #SOCKET读缓存区大小 net.core.wmem_max = 8388608 #SOCKET写缓存区大</div> </li> <li><a href="/article/343.htm" title="php命令行界面" target="_blank">php命令行界面</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/cli/1.htm">cli</a> <div>常用选项 php -v php -i PHP安装的有关信息 php -h 访问帮助文件 php -m 列出编译到当前PHP安装的所有模块 执行一段代码 php -r 'echo &quot;hello, world!&quot;;' php -r 'echo &quot;Hello, World!\n&quot;;' php -r '$ts = filemtime(&quot;</div> </li> <li><a href="/article/470.htm" title="Filter&Session" target="_blank">Filter&Session</a> <span class="text-muted">171815164</span> <a class="tag" taget="_blank" href="/search/session/1.htm">session</a> <div>Filter HttpServletRequest requ = (HttpServletRequest) req; HttpSession session = requ.getSession(); if (session.getAttribute(&quot;admin&quot;) == null) { PrintWriter out = res.ge</div> </li> <li><a href="/article/597.htm" title="连接池与Spring,Hibernate结合" target="_blank">连接池与Spring,Hibernate结合</a> <span class="text-muted">g21121</span> <a class="tag" taget="_blank" href="/search/Hibernate/1.htm">Hibernate</a> <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 前几篇关于Java连接池的介绍都是基于Java应用的,而我们常用的场景是与Spring和ORM框架结合,下面就利用实例学习一下这方面的配置。 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 1.下载相关内容:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb</div> </li> <li><a href="/article/724.htm" title="[简单]mybatis判断数字类型" target="_blank">[简单]mybatis判断数字类型</a> <span class="text-muted">53873039oycg</span> <a class="tag" taget="_blank" href="/search/mybatis/1.htm">mybatis</a> <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 昨天同事反馈mybatis保存不了int类型的属性,一直报错,错误信息如下: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Caused by: java.lang.NumberFormatException: For input string: &quot;null&quot; at sun.mis</div> </li> <li><a href="/article/851.htm" title="项目启动时或者启动后ava.lang.OutOfMemoryError: PermGen space" target="_blank">项目启动时或者启动后ava.lang.OutOfMemoryError: PermGen space</a> <span class="text-muted">程序员是怎么炼成的</span> <a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a><a class="tag" taget="_blank" href="/search/catalina.sh/1.htm">catalina.sh</a><a class="tag" taget="_blank" href="/search/eclipse.ini/1.htm">eclipse.ini</a> <div>&nbsp;&nbsp; 在启动比较大的项目时,因为存在大量的jsp页面,所以在编译的时候会生成很多的.class文件,.class文件是都会被加载到jvm的方法区中,如果要加载的class文件很多,就会出现方法区溢出异常 java.lang.OutOfMemoryError: PermGen space. &nbsp;&nbsp;&nbsp; 解决办法是点击eclipse里的tomcat,在</div> </li> <li><a href="/article/978.htm" title="我的crm小结" target="_blank">我的crm小结</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/crm/1.htm">crm</a> <div>各种原因吧,crm今天才完了。主要是接触了几个新技术: Struts2、poi、ibatis这几个都是以前的项目中用过的。 Jsf、tapestry是这次新接触的,都是界面层的框架,用起来也不难。思路和struts不太一样,传说比较简单方便。不过个人感觉还是struts用着顺手啊,当然springmvc也很顺手,不知道是因为习惯还是什么。jsf和tapestry应用的时候需要知道他们的标签、主</div> </li> <li><a href="/article/1105.htm" title="spring里配置使用hibernate的二级缓存几步" target="_blank">spring里配置使用hibernate的二级缓存几步</a> <span class="text-muted">antonyup_2006</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><a class="tag" taget="_blank" href="/search/Hibernate/1.htm">Hibernate</a><a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a><a class="tag" taget="_blank" href="/search/cache/1.htm">cache</a> <div>.在spring的配置文件中 applicationContent.xml,hibernate部分加入 xml 代码 &lt;prop key=&quot;hibernate.cache.provider_class&quot;&gt;org.hibernate.cache.EhCacheProvider&lt;/prop&gt; &lt;prop key=&quot;hi</div> </li> <li><a href="/article/1232.htm" title="JAVA基础面试题" target="_blank">JAVA基础面试题</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/%E6%8A%BD%E8%B1%A1%E5%AE%9E%E7%8E%B0%E6%8E%A5%E5%8F%A3/1.htm">抽象实现接口</a><a class="tag" taget="_blank" href="/search/String%E7%B1%BB/1.htm">String类</a><a class="tag" taget="_blank" href="/search/%E6%8E%A5%E5%8F%A3%E7%BB%A7%E6%89%BF/1.htm">接口继承</a><a class="tag" taget="_blank" href="/search/%E6%8A%BD%E8%B1%A1%E7%B1%BB%E7%BB%A7%E6%89%BF%E5%AE%9E%E4%BD%93%E7%B1%BB/1.htm">抽象类继承实体类</a><a class="tag" taget="_blank" href="/search/%E8%87%AA%E5%AE%9A%E4%B9%89%E5%BC%82%E5%B8%B8/1.htm">自定义异常</a> <div>/*&nbsp;&nbsp; * 栈(stack):主要保存基本类型(或者叫内置类型)(char、byte、short、&nbsp;&nbsp; *int、long、 float、double、boolean)和对象的引用,数据可以共享,速度仅次于&nbsp;&nbsp; * 寄存器(register),快于堆。堆(heap):用于存储对象。&nbsp;&nbsp; */&nbsp;&nbsp;&</div> </li> <li><a href="/article/1359.htm" title="让sqlmap文件 "继承" 起来" target="_blank">让sqlmap文件 "继承" 起来</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/ibatis/1.htm">ibatis</a><a class="tag" taget="_blank" href="/search/sqlmap/1.htm">sqlmap</a> <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 多个项目中使用ibatis , 和数据库表对应的 sqlmap文件(增删改查等基本语句),dao, pojo 都是由工具自动生成的, 现在将这些自动生成的文件放在一个单独的工程中,其它项目工程中通过jar包来引用 ,并通过&quot;继承&quot;为基础的sqlmap文件,dao,pojo 添加新的方法来满足项</div> </li> <li><a href="/article/1486.htm" title="精通Oracle10编程SQL(13)开发触发器" target="_blank">精通Oracle10编程SQL(13)开发触发器</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/plsql/1.htm">plsql</a> <div>/* *开发触发器 */ --得到日期是周几 select to_char(sysdate+4,'DY','nls_date_language=AMERICAN') from dual; select to_char(sysdate,'DY','nls_date_language=AMERICAN') from dual; --建立BEFORE语句触发器 CREATE O</div> </li> <li><a href="/article/1613.htm" title="【EhCache三】EhCache查询" target="_blank">【EhCache三】EhCache查询</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/ehcache/1.htm">ehcache</a> <div>本文介绍EhCache查询缓存中数据,EhCache提供了类似Hibernate的查询API,可以按照给定的条件进行查询。 &nbsp; 要对EhCache进行查询,需要在ehcache.xml中设定要查询的属性 &nbsp; 数据准备 @Before public void setUp() { //加载EhCache配置文件 Inpu</div> </li> <li><a href="/article/1740.htm" title="CXF框架入门实例" target="_blank">CXF框架入门实例</a> <span class="text-muted">白糖_</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/%E6%A1%86%E6%9E%B6/1.htm">框架</a><a class="tag" taget="_blank" href="/search/webservice/1.htm">webservice</a><a class="tag" taget="_blank" href="/search/servlet/1.htm">servlet</a> <div>CXF是apache旗下的开源框架,由Celtix + XFire这两门经典的框架合成,是一套非常流行的web service框架。 它提供了JAX-WS的全面支持,并且可以根据实际项目的需要,采用代码优先(Code First)或者 WSDL 优先(WSDL First)来轻松地实现 Web Services 的发布和使用,同时它能与spring进行完美结合。 在apache cxf官网提供</div> </li> <li><a href="/article/1867.htm" title="angular.equals" target="_blank">angular.equals</a> <span class="text-muted">boyitech</span> <a class="tag" taget="_blank" href="/search/AngularJS/1.htm">AngularJS</a><a class="tag" taget="_blank" href="/search/AngularJS+API/1.htm">AngularJS API</a><a class="tag" taget="_blank" href="/search/AnguarJS+%E4%B8%AD%E6%96%87API/1.htm">AnguarJS 中文API</a><a class="tag" taget="_blank" href="/search/angular.equals/1.htm">angular.equals</a> <div>angular.equals &nbsp; 描述: 比较两个值或者两个对象是不是 相等。还支持值的类型,正则表达式和数组的比较。 &nbsp; 两个值或对象被认为是 相等的前提条件是以下的情况至少能满足一项: 两个值或者对象能通过===&nbsp;(恒等)&nbsp;的比较 两个值或者对象是同样类型,并且他们的属性都能通过angular</div> </li> <li><a href="/article/1994.htm" title="java-腾讯暑期实习生-输入一个数组A[1,2,...n],求输入B,使得数组B中的第i个数字B[i]=A[0]*A[1]*...*A[i-1]*A[i+1]" target="_blank">java-腾讯暑期实习生-输入一个数组A[1,2,...n],求输入B,使得数组B中的第i个数字B[i]=A[0]*A[1]*...*A[i-1]*A[i+1]</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>这道题的具体思路请参看 何海涛的微博:http://weibo.com/zhedahht import java.math.BigInteger; import java.util.Arrays; public class CreateBFromATencent { /** * 题目:输入一个数组A[1,2,...n],求输入B,使得数组B中的第i个数字B[i]=A</div> </li> <li><a href="/article/2121.htm" title="FastDFS 的安装和配置 修订版" target="_blank">FastDFS 的安装和配置 修订版</a> <span class="text-muted">Chen.H</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/fastDFS/1.htm">fastDFS</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E5%B8%83%E5%BC%8F%E6%96%87%E4%BB%B6%E7%B3%BB%E7%BB%9F/1.htm">分布式文件系统</a> <div>FastDFS Home:http://code.google.com/p/fastdfs/ 1. 安装 http://code.google.com/p/fastdfs/wiki/Setup http://hi.baidu.com/leolance/blog/item/3c273327978ae55f93580703.html 安装libevent (对libevent的版本要求为1.4.</div> </li> <li><a href="/article/2248.htm" title="[强人工智能]拓扑扫描与自适应构造器" target="_blank">[强人工智能]拓扑扫描与自适应构造器</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a> <div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 当我们面对一个有限拓扑网络的时候,在对已知的拓扑结构进行分析之后,发现在连通点之后,还存在若干个子网络,且这些网络的结构是未知的,数据库中并未存在这些网络的拓扑结构数据....这个时候,我们该怎么办呢? &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 那么,现在我们必须设计新的模块和代码包来处理上面的问题</div> </li> <li><a href="/article/2375.htm" title="oracle merge into的用法" target="_blank">oracle merge into的用法</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/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/merget+into/1.htm">merget into</a> <div>Oracle中merge into的使用 http://blog.csdn.net/yuzhic/article/details/1896878 http://blog.csdn.net/macle2010/article/details/5980965 该命令使用一条语句从一个或者多个数据源中完成对表的更新和插入数据. ORACLE 9i 中,使用此命令必须同时指定UPDATE 和INSE</div> </li> <li><a href="/article/2502.htm" title="不适合使用Hadoop的场景" target="_blank">不适合使用Hadoop的场景</a> <span class="text-muted">datamachine</span> <a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a> <div>转自:http://dev.yesky.com/296/35381296.shtml。   Hadoop通常被认定是能够帮助你解决所有问题的唯一方案。 当人们提到“大数据”或是“数据分析”等相关问题的时候,会听到脱口而出的回答:Hadoop! &nbsp;实际上Hadoop被设计和建造出来,是用来解决一系列特定问题的。对某些问题来说,Hadoop至多算是一个不好的选择,对另一些问题来说,选择Ha</div> </li> <li><a href="/article/2629.htm" title="YII findAll的用法" target="_blank">YII findAll的用法</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/yii/1.htm">yii</a> <div>看文档比较糊涂,其实挺简单的: $predictions=Prediction::model()-&gt;findAll(&quot;uid=:uid&quot;,array(&quot;:uid&quot;=&gt;10)); &nbsp; 第一个参数是选择条件:”uid=10″。其中:uid是一个占位符,在后面的array(“:uid”=&gt;10)对齐进行了赋值; 更完善的查询需要</div> </li> <li><a href="/article/2756.htm" title="vim 常用 NERDTree 快捷键" target="_blank">vim 常用 NERDTree 快捷键</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/vim/1.htm">vim</a> <div>下面给大家整理了一些vim NERDTree的常用快捷键了,这里几乎包括了所有的快捷键了,希望文章对各位会带来帮助。 切换工作台和目录 ctrl + w + h 光标 focus 左侧树形目录ctrl + w + l 光标 focus 右侧文件显示窗口ctrl + w + w 光标自动在左右侧窗口切换ctrl + w + r 移动当前窗口的布局位置 o 在已有窗口中打开文件、目录或书签,并跳</div> </li> <li><a href="/article/2883.htm" title="Java把目录下的文件打印出来" target="_blank">Java把目录下的文件打印出来</a> <span class="text-muted">蕃薯耀</span> <a class="tag" taget="_blank" href="/search/%E5%88%97%E5%87%BA%E7%9B%AE%E5%BD%95%E4%B8%8B%E7%9A%84%E6%96%87%E4%BB%B6/1.htm">列出目录下的文件</a><a class="tag" taget="_blank" href="/search/%E6%96%87%E4%BB%B6%E5%A4%B9%E4%B8%8B%E9%9D%A2%E7%9A%84%E6%96%87%E4%BB%B6/1.htm">文件夹下面的文件</a><a class="tag" taget="_blank" href="/search/%E7%9B%AE%E5%BD%95%E4%B8%8B%E7%9A%84%E6%96%87%E4%BB%B6/1.htm">目录下的文件</a> <div>Java把目录下的文件打印出来 &gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt; 蕃薯耀 2015年7月11日 11:02:</div> </li> <li><a href="/article/3010.htm" title="linux远程桌面----VNCServer与rdesktop" target="_blank">linux远程桌面----VNCServer与rdesktop</a> <span class="text-muted">hanqunfeng</span> <a class="tag" taget="_blank" href="/search/Desktop/1.htm">Desktop</a> <div>windows远程桌面到linux,需要在linux上安装vncserver,并开启vnc服务,同时需要在windows下使用vnc-viewer访问Linux。vncserver同时支持linux远程桌面到linux。 &nbsp; linux远程桌面到windows,需要在linux上安装rdesktop,同时开启windows的远程桌面访问。 &nbsp; 下面分别介绍,以windo</div> </li> <li><a href="/article/3137.htm" title="guava中的join和split功能" target="_blank">guava中的join和split功能</a> <span class="text-muted">jackyrong</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>guava库中,包含了很好的join和split的功能,例子如下: 1) 将LIST转换为使用字符串连接的字符串 &nbsp;&nbsp; List&lt;String&gt; names = Lists.newArrayList(&quot;John&quot;, &quot;Jane&quot;, &quot;Adam&quot;, &quot;Tom&quot;); </div> </li> <li><a href="/article/3264.htm" title="Web开发技术十年发展历程" target="_blank">Web开发技术十年发展历程</a> <span class="text-muted">lampcy</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</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/html5/1.htm">html5</a> <div>回顾web开发技术这十年发展历程: Ajax 03年的时候我上六年级,那时候网吧刚在小县城的角落萌生。传奇,大话西游第一代网游一时风靡。我抱着试一试的心态给了网吧老板两块钱想申请个号玩玩,然后接下来的一个小时我一直在,注,册,账,号。 彼时网吧用的512k的带宽,注册的时候,填了一堆信息,提交,页面跳转,嘣,”您填写的信息有误,请重填”。然后跳转回注册页面,以此循环。我现在时常想,如果当时a</div> </li> <li><a href="/article/3391.htm" title="架构师之mima-----------------mina的非NIO控制IOBuffer(说得比较好)" target="_blank">架构师之mima-----------------mina的非NIO控制IOBuffer(说得比较好)</a> <span class="text-muted">nannan408</span> <a class="tag" taget="_blank" href="/search/buffer/1.htm">buffer</a> <div>1.前言。 &nbsp; 如题。 2.代码。 &nbsp; IoService IoService是一个接口,有两种实现:IoAcceptor和IoConnector;其中IoAcceptor是针对Server端的实现,IoConnector是针对Client端的实现;IoService的职责包括: 1、监听器管理 2、IoHandler 3、IoSession</div> </li> <li><a href="/article/3518.htm" title="ORA-00054:resource busy and acquire with NOWAIT specified" target="_blank">ORA-00054:resource busy and acquire with NOWAIT specified</a> <span class="text-muted">Everyday都不同</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/session/1.htm">session</a><a class="tag" taget="_blank" href="/search/Lock/1.htm">Lock</a> <div>[Oracle] 今天对一个数据量很大的表进行操作时,出现如题所示的异常。此时表明数据库的事务处于“忙”的状态,而且被lock了,所以必须先关闭占用的session。 &nbsp; step1,查看被lock的session: &nbsp; select t2.username, t2.sid, t2.serial#, t2.logon_time from v$locked_obj</div> </li> <li><a href="/article/3645.htm" title="javascript学习笔记" target="_blank">javascript学习笔记</a> <span class="text-muted">tntxia</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a> <div>&nbsp; javascript里面有6种基本类型的值:number、string、boolean、object、function和undefined。number:就是数字值,包括整数、小数、NaN、正负无穷。string:字符串类型、单双引号引起来的内容。boolean:true、false object:表示所有的javascript对象,不用多说function:我们熟悉的方法,也就是</div> </li> <li><a href="/article/3772.htm" title="Java enum的用法详解" target="_blank">Java enum的用法详解</a> <span class="text-muted">xieke90</span> <a class="tag" taget="_blank" href="/search/enum/1.htm">enum</a><a class="tag" taget="_blank" href="/search/%E6%9E%9A%E4%B8%BE/1.htm">枚举</a> <div>Java中枚举实现的分析: &nbsp; &nbsp; 示例:&nbsp; public static enum SEVERITY{ INFO,WARN,ERROR } &nbsp; &nbsp; enum很像特殊的class,实际上enum声明定义的类型就是一个类。&nbsp;而这些类都是类库中Enum类的子类 &nbsp; &nbsp; &nbsp;(java.l</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>