一、HTML5简介
HTML5是根据2014年由万维网联盟（W3C）完成标准制定的，他的设计目的主要是为了在移动设备上支持多媒体。
HTML5新特性：
- 绘画canvas元素
- 用于媒体回放video和audio元素
- 对于本地离线储存的更好支持
- 新的特殊内容元素 article、footer、header、nav、section
- 新的表单控件 calendar、date、time、email、url、search
HTML5改进：
- 新元素
- 新属性
- 完全支持css3
- Video 和 Audio
- 2D/3D制图
- 本地储存
- 本地 SQL 数据
- Web 应用
HTML5多媒体
- video
- audio
HTML5图形
使用 HTML5 你可以简单的绘制图形:
- 使用
- 使用内联 SVG。
- 使用 CSS3 2D 转换、CSS3 3D 转换。
HTML5 使用 CSS3
- 新选择器
- 新属性
- 动画
- 2D/3D 转换
- 圆角
- 阴影效果
- 可下载的字体
语义元素
HTML5 添加了很多语义元素如下所示：
标签 描述
已移除元素
以下的 HTML 4.01 元素在HTML5中已经被删除:
</li> <li><strike></li> </ul> <h1>二、HTML5浏览器支持</h1> <h3>将 HTML5 元素定义为块元素</h3> <p>HTML5 定了 8 个新的 HTML 语义（semantic） 元素。所有这些元素都是 块级 元素。<br> 为了能让旧版本的浏览器正确显示这些元素，你可以设置 CSS 的 display 属性值为 block:</p> <pre><code>实例 header, section, footer, aside, nav, main, article, figure { display: block; } </code></pre> <h3>为 HTML 添加新元素</h3> <p>你可以为 HTML 添加新的元素。</p> <p>该实例向 HTML 添加的新的元素，并为该元素定义样式，元素名为 <myHero> ：</p> <pre><code>实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>为 HTML 添加新元素</title> <script> document.createElement("myHero") </script> <style> myHero { display: block; background-color: #ddd; padding: 50px; font-size: 30px; } </style> </head> <body> <h1>我的第一个标题</h1> <p>我的第一个段落。</p> <myHero>我的第一个新元素</myHero> </body> </html> </code></pre> <h3>Internet Explorer 浏览器问题</h3> <p>你可以使用以上的方法来为 IE 浏览器添加 HTML5 元素，但是：</p> <p></p> <p></p> | <div class="image-package"> <div class="image-container" style="max-width: 32px; max-height: 32px;"> <div class="image-view"> </div> </div> <div class="image-caption"> Note </div> </div> <br> <p>Internet Explorer 8 及更早 IE 版本的浏览器不支持以上的方式。<br> 我们可以使用 Sjoerd Visscher 创建的 "HTML5 Enabling JavaScript", "** shiv**" 来解决该问题:</p> <pre><code><!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </code></pre> <p>以上代码是一个注释，作用是在 IE 浏览器的版本小于 IE9 时将读取 html5.js 文件，并解析它。<br> <strong>注意：</strong>国内用户请使用本站静态资源库（Google 资源库在国内不稳定）：</p> <pre><code><!--[if lt IE 9]> <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script> <![endif]--> </code></pre> <p>针对IE浏览器html5shiv 是比较好的解决方案。html5shiv主要解决HTML5提出的新的元素不被IE6-8识别，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式。</p> <h3>完美的 Shiv 解决方案</h3> <pre><code>实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>渲染 HTML5</title> <!--[if lt IE 9]> <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script> <![endif]--> </head> <body> <h1>我的第一篇文章</h1> <article> </article> </body> </html> </code></pre> <h1>三、HTML5新元素</h1> <h3><canvas> 新元素</h3> <p>| 标签 | 描述 |</p> <ul> <li> <canvas> | 标签定义图形，比- 如图表和其他图像。该标签基于 JavaScript 的绘图 API |</li> </ul> <h3>新多媒体元素</h3> <p>| 标签 | 描述 |</p> <ul> <li> <audio> | 定义音频内容 |</li> <li> <video> | 定义视频（video 或者 movie） |</li> <li> <source> | 定义多媒体资源 <video> 和 <audio> |</li> <li> <embed> | 定义嵌入的内容，比如插件。 |</li> <li> <track> | 为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。 |</li> </ul> <hr> <h2>新表单元素</h2> <p>| 标签 | 描述 |</p> <ul> <li> <datalist> | 定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。 |</li> <li> <keygen> | 规定用于表单的密钥对生成器字段。 |</li> <li> <output> | 定义不同类型的输出，比如脚本的输出。 |</li> </ul> <hr> <h2>新的语义和结构元素</h2> <p>HTML5提供了新的元素来创建更好的页面结构：</p> <p>| 标签 | 描述 |</p> <ul> <li> <article> | 定义页面独立的内容区域。 |</li> <li> <aside> | 定义页面的侧边栏内容。 |</li> <li> <bdi> | 允许您设置一段文本，使其脱离其父元素的文本方向设置。 |</li> <li> <command> | 定义命令按钮，比如单选按钮、复选框或按钮 |</li> <li> <details> | 用于描述文档或文档某个部分的细节 |</li> <li> <dialog> | 定义对话框，比如提示框 |</li> <li> <summary> | 标签包含 details 元素的标题 |</li> <li> <figure> | 规定独立的流内容（图像、图表、照片、代码等等）。 |</li> <li> <figcaption> | 定义 <figure> 元素的标题 |</li> <li> <footer> | 定义 section 或 document 的页脚。 |</li> <li> <header> | 定义了文档的头部区域 |</li> <li> <mark> | 定义带有记号的文本。 |</li> <li> <meter> | 定义度量衡。仅用于已知最大和最小值的度量。 |</li> <li> <nav> | 定义导航链接的部分。 |</li> <li> <progress> | 定义任何类型的任务的进度。 |</li> <li> <ruby> | 定义 ruby 注释（中文注音或字符）。 |</li> <li> <rt> | 定义字符（中文注音或字符）的解释或发音。 |</li> <li> <rp> | 在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。 |</li> <li> <section> | 定义文档中的节（section、区段）。 |</li> <li> <time> | 定义日期或时间。 |</li> <li> <wbr> | 规定在文本中的何处适合添加换行符。 |</li> </ul> <hr> <h2>已移除的元素</h2> <p>以下的 HTML 4.01 元素在HTML5中已经被删除:</p> <ul> <li><acronym></li> <li><applet></li> <li><basefont></li> <li><big></li> <li><center></li> <li><dir></li> <li><font></li> <li><frame></li> <li><frameset></li> <li><noframes></li> <li><strike></li> <li><tt></li> </ul> <h1>四、Canvas</h1> <h3>什么是 canvas?</h3> <p>HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.<br> <canvas> 标签只是图形容器，您必须使用脚本来绘制图形。<br> 你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。</p> <h3>创建一个画布</h3> <pre><code><canvas id="myCanvas" width="200" height="100"></canvas> </code></pre> <h3>使用 JavaScript 来绘制图像</h3> <p>canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：</p> <pre><code>实例 var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75); </code></pre> <p>实例解析:</p> <p>首先，找到 <canvas> 元素:</p> <pre><code>var c=document.getElementById("myCanvas"); </code></pre> <p>然后，创建 context 对象：</p> <pre><code>var ctx=c.getContext("2d"); </code></pre> <ul> <li>getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。</li> </ul> <p>下面的两行代码绘制一个红色的矩形：</p> <pre><code>ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75); </code></pre> <ul> <li><p>设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）。</p></li> <li><p>fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。</p></li> </ul> <h3>Canvas 坐标</h3> <p>canvas 是一个二维网格。<br> canvas 的左上角坐标为 (0,0)<br> 上面的 fillRect 方法拥有参数 (0,0,150,75)。<br> 意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。<br> 坐标实例<br> 画布的 X 和 Y 坐标用于在画布上对绘画进行定位.</p> <h3>Canvas - 路径</h3> <p>在Canvas上画线，我们将使用以下两种方法：</p> <ul> <li>moveTo(x,y) 定义线条开始坐标</li> <li>lineTo(x,y) 定义线条结束坐标<br> 绘制线条我们必须使用到 "ink" 的方法，就像stroke().</li> </ul> <pre><code>var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(200,100); ctx.stroke(); </code></pre> <p>在canvas中绘制圆形, 我们将使用以下方法:</p> <pre><code>arc(x,y,r,start,stop) </code></pre> <p>实际上我们在绘制圆形时使用了 "ink" 的方法, 比如 stroke() 或者 fill().</p> <pre><code>var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.arc(95,50,40,0,2*Math.PI); ctx.stroke(); </code></pre> <h3>Canvas - 文本</h3> <p>使用 canvas 绘制文本，重要的属性和方法如下：</p> <ul> <li>font - 定义字体</li> <li>fillText(text,x,y) - 在 canvas 上绘制实心的文本</li> <li>strokeText(text,x,y) - 在 canvas 上绘制空心的文本<br> 使用 fillText():</li> </ul> <p>实例<br> 使用 "Arial" 字体在画布上绘制一个高 30px 的文字（实心）：</p> <pre><code>JavaScript: var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="30px Arial"; ctx.fillText("Hello World",10,50); </code></pre> <p>使用 strokeText():<br> 实例</p> <h5>使用 "Arial" 字体在画布上绘制一个高 30px 的文字（空心）：</h5> <pre><code>JavaScript: var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="30px Arial"; ctx.strokeText("Hello World",10,50); </code></pre> <h3>Canvas - 渐变</h3> <p>渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。</p> <p>以下有两种不同的方式来设置Canvas渐变：</p> <pre><code>createLinearGradient(x,y,x1,y1) - 创建线条渐变 createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变 </code></pre> <p>当我们使用渐变对象，必须使用两种或两种以上的停止颜色。</p> <p>addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.</p> <p>使用渐变，设置fillStyle或strokeStyle的值为 渐变，然后绘制形状，如矩形，文本，或一条线。</p> <h5>使用 createLinearGradient():</h5> <pre><code>JavaScript: var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); // 创建渐变 var grd=ctx.createLinearGradient(0,0,200,0); grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); // 填充渐变 ctx.fillStyle=grd; ctx.fillRect(10,10,150,80); </code></pre> <h5>使用 createRadialGradient():</h5> <p>实例<br> 创建一个径向/圆渐变。使用渐变填充矩形：</p> <p>JavaScript:</p> <pre><code>var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); // 创建渐变 var grd=ctx.createRadialGradient(75,50,5,90,60,100); grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); // 填充渐变 ctx.fillStyle=grd; ctx.fillRect(10,10,150,80); </code></pre> <h3>Canvas - 图像</h3> <p>把一幅图像放置到画布上, 使用以下方法:</p> <p>drawImage(image,x,y)</p> <pre><code>JavaScript: var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var img=document.getElementById("scream"); ctx.drawImage(img,10,10); </code></pre> <h1>五、HTML5 内联 SVG</h1> <h3>什么是SVG？</h3> <ul> <li>SVG 指可伸缩矢量图形 (Scalable Vector Graphics)</li> <li>SVG 用于定义用于网络的基于矢量的图形</li> <li>SVG 使用 XML 格式定义图形</li> <li>SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失</li> <li>SVG 是万维网联盟的标准</li> </ul> <h3>SVG优势</h3> <p>与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：</p> <ul> <li>SVG 图像可通过文本编辑器来创建和修改</li> <li>SVG 图像可被搜索、索引、脚本化或压缩</li> <li>SVG 是可伸缩的</li> <li>SVG 图像可在任何的分辨率下被高质量地打印</li> <li>SVG 可在图像质量不下降的情况下被放大</li> </ul> <h5>Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持内联SVG。</h5> <h3>SVG 与 Canvas两者间的区别</h3> <ul> <li>SVG 是一种使用 XML 描述 2D 图形的语言。</li> <li>Canvas 通过 JavaScript 来绘制 2D 图形。</li> <li>SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。</li> </ul> <h3>Canvas 与 SVG 的比较</h3> <p>下表列出了 canvas 与 SVG 之间的一些不同之处。</p> <p>Canvas | SVG</p> <ul> <li>依赖分辨率 | 不依赖分辨率</li> <li>不支持事件处理器 | 支持事件处理器</li> <li>弱的文本渲染能力 | 最适合带有大型渲染区域的应用程序（比如谷歌地图）</li> <li>能够以 .png 或 .jpg 格式保存结果图像 | 复杂度高会减慢渲染速度（任何过度使 用 DOM 的应用都不快）</li> <li>最适合图像密集型的游戏，其中的许多对象会被频繁重绘 | 不适合游戏应用</li> </ul> <h1>六、HTML5 拖放（Drag 和 Drop）</h1> <h3>HTML5 拖放实例</h3> <p>下面的例子是一个简单的拖放实例：</p> <pre><code>实例 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style type="text/css"> #div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;} </style> <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <p>拖动 RUNOOB.COM 图片到矩形框中:</p> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br> <img loading="lazy" id="drag1" src="/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69"> </body> </html> </code></pre> <h3>设置元素为可拖放</h3> <p>首先，为了使元素可拖动，把 draggable 属性设置为 true ：</p> <pre><code><img draggable="true"> </code></pre> <h3>拖动什么 - ondragstart 和 setData()</h3> <p>然后，规定当元素被拖动时，会发生什么。<br> 在上面的例子中，ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。<br> dataTransfer.setData() 方法设置被拖数据的数据类型和值：</p> <pre><code>function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); } </code></pre> <p>Text 是一个 DOMString 表示要添加到 drag object 的拖动数据的类型。值是可拖动元素的 id ("drag1")。</p> <h3>放到何处 - ondragover</h3> <p>ondragover 事件规定在何处放置被拖动的数据。<br> 默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。<br> 这要通过调用 ondragover 事件的 event.preventDefault() 方法：</p> <pre><code>event.preventDefault() </code></pre> <h3>进行放置 - ondrop</h3> <p>当放置被拖数据时，会发生 drop 事件。</p> <p>在上面的例子中，ondrop 属性调用了一个函数，drop(event)：</p> <pre><code>function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } </code></pre> <p>代码解释：</p> <ul> <li>调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）</li> <li>通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在setData() 方法中设置为相同类型的任何数据。</li> <li>被拖数据是被拖元素的 id ("drag1")</li> <li>把被拖元素追加到放置元素（目标元素）中</li> </ul> <h1>七、HTML5 Geolocation（地理定位）</h1> <h5>Internet Explorer 9+, Firefox, Chrome, Safari 和 Opera 支持Geolocation（地理定位）</h5> <p>注意: Geolocation（地理定位）对于拥有 GPS 的设备，比如 iPhone，地理定位更加精确。</p> <h3>HTML5 - 使用地理定位</h3> <p>请使用 getCurrentPosition() 方法来获得用户的位置。<br> 下例是一个简单的地理定位实例，可返回用户位置的经度和纬度:</p> <pre><code>实例 var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { x.innerHTML="该浏览器不支持获取地理位置。"; } } function showPosition(position) { x.innerHTML="纬度: " + position.coords.latitude + "<br>经度: " + position.coords.longitude; } </code></pre> <p>实例解析:</p> <ul> <li>检测是否支持地理定位</li> <li>如果支持，则运行 getCurrentPosition() 方法。如果不支持，则向用户显示一段消息。</li> <li>如果 getCurrentPosition() 运行成功，则向参数showPosition中规定的函数返回一个 coordinates 对象</li> <li>showPosition() 函数获得并显示经度和纬度</li> </ul> <h3>处理错误和拒绝</h3> <p>getCurrentPosition() 方法的第二个参数用于处理错误。它规定当获取用户位置失败时运行的函数：</p> <pre><code>实例 function showError(error) { switch(error.code) { case error.PERMISSION_DENIED: x.innerHTML="用户拒绝对获取地理位置的请求。" break; case error.POSITION_UNAVAILABLE: x.innerHTML="位置信息是不可用的。" break; case error.TIMEOUT: x.innerHTML="请求用户地理位置超时。" break; case error.UNKNOWN_ERROR: x.innerHTML="未知错误。" break; } } </code></pre> <p>错误代码：</p> <ul> <li>Permission denied - 用户不允许地理定位</li> <li>Position unavailable - 无法获取当前位置</li> <li>Timeout - 操作超时</li> </ul> <h3>在地图中显示结果</h3> <p>如需在地图中显示结果，您需要访问可使用经纬度的地图服务，比如谷歌地图或百度地图：</p> <pre><code>实例 function showPosition(position) { var latlon=position.coords.latitude+","+position.coords.longitude; var img_url="http://maps.googleapis.com/maps/api/staticmap?center=" +latlon+"&zoom=14&size=400x300&sensor=false"; document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>"; } </code></pre> <h3>给定位置的信息</h3> <p>本页演示的是如何在地图上显示用户的位置。不过，地理定位对于给定位置的信息同样很有用处。<br> 可用于:</p> <ul> <li>更新本地信息</li> <li>显示用户周围的兴趣点</li> <li>交互式车载导航系统 (GPS)</li> </ul> <h3>getCurrentPosition() 方法 - 返回数据</h3> <p>T若成功，则 getCurrentPosition() 方法返回对象。始终会返回 latitude、longitude 以及 accuracy 属性。如果可用，则会返回其他下面的属性。<br> 属性 描述</p> <ul> <li>coords.latitude 十进制数的纬度</li> <li>coords.longitude 十进制数的经度</li> <li>coords.accuracy 位置精度</li> <li>coords.altitude 海拔，海平面以上以米计</li> <li>coords.altitudeAccuracy 位置的海拔精度</li> <li>coords.heading 方向，从正北开始以度计</li> <li>coords.speed 速度，以米/每秒计</li> <li>timestamp 响应的日期/时间</li> </ul> <h3>Geolocation 对象 - 其他有趣的方法</h3> <p>watchPosition() - 返回用户的当前位置，并继续返回用户移动时的更新位置（就像汽车上的 GPS）。<br> clearWatch() - 停止 watchPosition() 方法<br> 下面的例子展示 watchPosition() 方法。您需要一台精确的 GPS 设备来测试该例（比如 iPhone）：</p> <pre><code>实例 var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.watchPosition(showPosition); } else { x.innerHTML="该浏览器不支持获取地理位置。"; } } function showPosition(position) { x.innerHTML="纬度: " + position.coords.latitude + "<br>经度: " + position.coords.longitude; } </code></pre> <h1>七、HTML5 Video(视频)</h1> <h5>Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持 <video> 元素.</h5> <h3>HTML5 (视频)- 如何工作</h3> <p>如需在 HTML5 中显示视频，您所有需要的是：</p> <pre><code>实例 <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> 您的浏览器不支持Video标签。 </video> </code></pre> <ul> <li><video> 元素提供了 播放、暂停和音量控件来控制视频。<br> 同时 <video> 元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度，所需的视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。</li> <li><video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。</li> <li><video> 元素支持多个 <source> 元素. <source> 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式：</li> </ul> <h3>视频格式与浏览器的支持</h3> <p>当前， <video> 元素支持三种视频格式： MP4, WebM, 和 Ogg:</p> <p>浏览器 | MP4 | WebM | Ogg<br> Internet Explorer | YES | NO | NO<br> Chrome | YES | YES | YES<br> Firefox | YES | YES | YES<br> Safari | YES | NO | NO<br> Opera | YES (从 Opera 25 起) | YES | YES</p> <ul> <li>MP4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件</li> <li>WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件</li> <li>Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件</li> </ul> <h3>视频格式</h3> <p>格式 | MIME-type<br> MP4 | video/mp4<br> WebM | video/webm<br> Ogg | video/ogg</p> <h3>HTML5 <video> - 使用 DOM 进行控制</h3> <p>HTML5 <video> 和 <audio> 元素同样拥有方法、属性和事件。<br> <video> 和 <audio>元素的方法、属性和事件可以使用JavaScript进行控制.<br> 其中的方法用于播放、暂停以及加载等。其中的属性（比如时长、音量等）可以被读取或设置。其中的 DOM 事件能够通知您，比方说，<video> 元素开始播放、已暂停，已停止，等等。<br> 例中简单的方法，向我们演示了如何使用 <video> 元素，读取并设置属性，以及如何调用方法。</p> <h3>HTML5 Video 标签</h3> <p>| 标签 | 描述 |</p> <ul> <li> <video> | 定义一个视频 |</li> <li> <source> | 定义多种媒体资源,比如 <video> 和<audio> |</li> <li> <track> | 定义在媒体播放器文本轨迹 |</li> </ul> <h1>九、HTML5 Audio(音频)</h1> <h5>Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 都支持 <audio> 元素.</h5> <h3>HTML5 Audio - 如何工作</h3> <p>如需在 HTML5 中播放音频，你需要使用以下代码：</p> <p>实例</p> <pre><code><audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> 您的浏览器不支持 audio 元素。 </audio> </code></pre> <p>尝试一下 »<br> control 属性供添加播放、暂停和音量控件。<br> 在<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本 。<br> <audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件</p> <h3>音频格式的MIME类型</h3> <p>Format MIME-type</p> <ul> <li>MP3 audio/mpeg</li> <li>Ogg audio/ogg</li> <li>Wav audio/wav</li> </ul> <h3>HTML5 Audio 标签</h3> <p>| 标签 | 描述 |</p> <ul> <li> <audio> | 定义了声音内容 |</li> <li> <source> | 规定了多媒体资源, 可以是多个，在 <video> 与 <audio>标签中使用 |</li> </ul> <h1>十、HTML5 新的 Input 类型</h1> <p>HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。<br> 本章全面介绍这些新的输入类型：</p> <ul> <li>color</li> <li>date</li> <li>datetime</li> <li>datetime-local</li> <li>email</li> <li>month</li> <li>number</li> <li>range</li> <li>search</li> <li>tel</li> <li>time</li> <li>url</li> <li>week<br> 注意:并不是所有的主流浏览器都支持新的input类型，不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持，仍然可以显示为常规的文本域。</li> </ul> <h3>Input 类型: color</h3> <p>color 类型用在input字段主要用于选取颜色，如下所示：<br> 实例<br> 从拾色器中选择一个颜色:</p> <pre><code><input type="color" name="favcolor"> </code></pre> <h3>Input 类型: date</h3> <p>date 类型允许你从一个日期选择器选择一个日期。<br> 实例<br> 定义一个时间控制器:</p> <pre><code>生日: <input type="date" name="bday"> </code></pre> <h3>Input 类型: datetime</h3> <p>datetime 类型允许你选择一个日期（UTC 时间）。<br> 实例<br> 定义一个日期和时间控制器（本地时间）:</p> <pre><code>生日 (日期和时间): <input type="datetime" name="bdaytime"> </code></pre> <h3>Input 类型: datetime-local</h3> <p>datetime-local 类型允许你选择一个日期和时间 (无时区).<br> 实例<br> 定义一个日期和时间 (无时区):</p> <pre><code>生日 (日期和时间): <input type="datetime-local" name="bdaytime"> </code></pre> <h3>Input 类型: email</h3> <p>email 类型用于应该包含 e-mail 地址的输入域。<br> 实例<br> 在提交表单时，会自动验证 email 域的值是否合法有效:</p> <pre><code>E-mail: <input type="email" name="email"> </code></pre> <h3>Input 类型: month</h3> <p>month 类型允许你选择一个月份。<br> 实例<br> 定义月与年 (无时区):</p> <pre><code>生日 (月和年): <input type="month" name="bdaymonth"> </code></pre> <h3>Input 类型: number</h3> <p>number 类型用于应该包含数值的输入域。<br> 您还能够设定对所接受的数字的限定：<br> 实例<br> 定义一个数值输入域(限定):</p> <pre><code>数量 ( 1 到 5 之间 ): <input type="number" name="quantity" min="1" max="5"> </code></pre> <p>使用下面的属性来规定对数字类型的限定：</p> <p>属性 描述</p> <ul> <li>disabled 规定输入字段是禁用的</li> <li>max 规定允许的最大值</li> <li>maxlength 规定输入字段的最大字符长度</li> <li>min 规定允许的最小值</li> <li>pattern 规定用于验证输入字段的模式</li> <li>readonly 规定输入字段的值无法修改</li> <li>required 规定输入字段的值是必需的</li> <li>size 规定输入字段中的可见字符数</li> <li>step 规定输入字段的合法数字间隔</li> <li>value 规定输入字段的默认值</li> </ul> <h3>Input 类型: range</h3> <p>range 类型用于应该包含一定范围内数字值的输入域。<br> range 类型显示为滑动条。<br> 实例<br> 定义一个不需要非常精确的数值（类似于滑块控制）:</p> <pre><code><input type="range" name="points" min="1" max="10"> </code></pre> <p>请使用下面的属性来规定对数字类型的限定：</p> <ul> <li>max - 规定允许的最大值</li> <li>min - 规定允许的最小值</li> <li>step - 规定合法的数字间隔</li> <li>value - 规定默认值</li> </ul> <h3>Input 类型: search</h3> <p>search 类型用于搜索域，比如站点搜索或 Google 搜索。<br> 实例<br> 定义一个搜索字段 (类似站点搜索或者Google搜索):</p> <pre><code>Search Google: <input type="search" name="googlesearch"> </code></pre> <h3>Input 类型: tel</h3> <p>实例<br> 定义输入电话号码字段:</p> <pre><code>电话号码: <input type="tel" name="usrtel"> </code></pre> <h3>Input 类型: time</h3> <p>time 类型允许你选择一个时间。<br> 实例<br> 定义可输入时间控制器（无时区）：</p> <pre><code>选择时间: <input type="time" name="usr_time"> </code></pre> <h3>Input 类型: url</h3> <p>url 类型用于应该包含 URL 地址的输入域。<br> 在提交表单时，会自动验证 url 域的值。<br> 实例<br> 定义输入URL字段:</p> <pre><code>添加您的主页: <input type="url" name="homepage"> </code></pre> <h3>Input 类型: week</h3> <p>week 类型允许你选择周和年。<br> 实例<br> 定义周和年 (无时区):</p> <pre><code>选择周: <input type="week" name="week_year"> </code></pre> <h1>十一、HTML5 表单元素</h1> <h3>HTML5 新的表单元素</h3> <p>HTML5 有以下新的表单元素:</p> <ul> <li><datalist></li> <li><keygen></li> <li><output><br> 注意:不是所有的浏览器都支持HTML5 新的表单元素，但是你可以在使用它们，即使浏览器不支持表单属性，仍然可以显示为常规的表单元素。</li> </ul> <h3>HTML5 <datalist> 元素</h3> <p><datalist> 元素规定输入域的选项列表。<br> <datalist> 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：<br> 使用 <input> 元素的列表属性与 <datalist> 元素绑定.<br> 实例</p> <pre><code><input> 元素使用<datalist>预定义值: <input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> </code></pre> <h3>HTML5 <keygen> 元素</h3> <p><keygen> 元素的作用是提供一种验证用户的可靠方法。<br> <keygen>标签规定用于表单的密钥对生成器字段。<br> 当提交表单时，会生成两个键，一个是私钥，一个公钥。<br> 私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。<br> 实例<br> 带有keygen字段的表单:</p> <pre><code><form action="demo_keygen.asp" method="get"> 用户名: <input type="text" name="usr_name"> 加密: <keygen name="security"> <input type="submit"> </form> </code></pre> <h3>HTML5 <output> 元素</h3> <p><output> 元素用于不同类型的输出，比如计算或脚本输出：<br> 实例<br> 将计算结果显示在 <output> 元素:</p> <pre><code><form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0 <input type="range" id="a" value="50">100 + <input type="number" id="b" value="50">= <output name="x" for="a b"></output> </form> </code></pre> <h3>HTML5 新表单元素</h3> <p>| 标签 | 描述 |</p> <ul> <li> <datalist> | <input>标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。 |</li> <li> <keygen> | <keygen> 标签规定用于表单的密钥对生成器字段。 |</li> <li> <output> | <output> 标签定义不同类型的输出，比如脚本的输出。 |</li> </ul> <h1>十二、HTML5 表单属性</h1> <p>HTML5 的 <form> 和 <input>标签添加了几个新属性.</p> <p><form>新属性：</p> <ul> <li><p>autocomplete</p></li> <li><p>novalidate<br> <input>新属性：</p></li> <li><p>autocomplete</p></li> <li><p>autofocus</p></li> <li><p>form</p></li> <li><p>formaction</p></li> <li><p>formenctype</p></li> <li><p>formmethod</p></li> <li><p>formnovalidate</p></li> <li><p>formtarget</p></li> <li><p>height 与 width</p></li> <li><p>list</p></li> <li><p>min 与 max</p></li> <li><p>multiple</p></li> <li><p>pattern (regexp)</p></li> <li><p>placeholder</p></li> <li><p>required</p></li> <li><p>step</p></li> </ul> <h3><form> / <input> autocomplete 属性</h3> <p>autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。<br> 当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。<br> 提示: autocomplete 属性有可能在 form元素中是开启的，而在input元素中是关闭的。<br> 注意: autocomplete 适用于 <form> 标签，以及以下类型的 <input> 标签：text, search, url, telephone, email, password, datepickers, range 以及 color。<br> 实例<br> HTML form 中开启 autocomplete (一个 input 字段关闭 autocomplete ):</p> <pre><code><form action="demo-form.php" autocomplete="on"> First name:<input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> E-mail: <input type="email" name="email" autocomplete="off"><br> <input type="submit"> </form> </code></pre> <h3><form> novalidate 属性</h3> <p>novalidate 属性是一个 boolean(布尔) 属性.<br> novalidate 属性规定在提交表单时不应该验证 form 或 input 域。<br> 实例<br> 无需验证提交的表单数据</p> <pre><code><form action="demo-form.php" novalidate> E-mail: <input type="email" name="user_email"> <input type="submit"> </form> </code></pre> <h3><input> autofocus 属性</h3> <p>autofocus 属性是一个 boolean 属性.<br> autofocus 属性规定在页面加载时，域自动地获得焦点。<br> 实例<br> 让 "First name" input 输入域在页面载入时自动聚焦：</p> <pre><code>First name:<input type="text" name="fname" autofocus> </code></pre> <h3><input> form 属性</h3> <p>form 属性规定输入域所属的一个或多个表单。<br> 提示:如需引用一个以上的表单，请使用空格分隔的列表。<br> 实例<br> 位于form表单外的 input 字段引用了 HTML form (该 input 表单仍然属于form表单的一部分):</p> <pre><code><form action="demo-form.php" id="form1"> First name: <input type="text" name="fname"><br> <input type="submit" value="提交"> </form> Last name: <input type="text" name="lname" form="form1"> </code></pre> <h3><input> formaction 属性</h3> <p>The formaction 属性用于描述表单提交的URL地址.<br> The formaction 属性会覆盖<form> 元素中的action属性.<br> 注意: The formaction 属性用于 type="submit" 和 type="image".<br> 实例<br> 以下HTMLform表单包含了两个不同地址的提交按钮：</p> <pre><code><form action="demo-form.php"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="提交"><br> <input type="submit" formaction="demo-admin.php" value="提交"> </form> </code></pre> <h3><input> formenctype 属性</h3> <p>formenctype 属性描述了表单提交到服务器的数据编码 (只对form表单中 method="post" 表单)<br> formenctype 属性覆盖 form 元素的 enctype 属性。<br> 主要: 该属性与 type="submit" 和 type="image" 配合使用。<br> 实例<br> 第一个提交按钮已默认编码发送表单数据，第二个提交按钮以 "multipart/form-data" 编码格式发送表单数据:</p> <pre><code><form action="demo-post_enctype.php" method="post"> First name: <input type="text" name="fname"><br> <input type="submit" value="提交"> <input type="submit" formenctype="multipart/form-data" value="以 Multipart/form-data 提交"> </form> </code></pre> <h3><input> formmethod 属性</h3> <p>formmethod 属性定义了表单提交的方式。<br> formmethod 属性覆盖了 <form> 元素的 method 属性。<br> 注意: 该属性可以与 type="submit" 和 type="image" 配合使用。<br> 实例<br> 重新定义表单提交方式实例:</p> <pre><code><form action="demo-form.php" method="get"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="提交"> <input type="submit" formmethod="post" formaction="demo-post.php" value="使用 POST 提交"> </form> </code></pre> <h3><input> formnovalidate 属性</h3> <p>novalidate 属性是一个 boolean 属性.<br> novalidate属性描述了 <input> 元素在表单提交时无需被验证。<br> formnovalidate 属性会覆盖 <form> 元素的novalidate属性.<br> 注意: formnovalidate 属性与type="submit一起使用<br> 实例<br> 两个提交按钮的表单(使用与不适用验证 ):</p> <pre><code><form action="demo-form.php"> E-mail: <input type="email" name="userid"><br> <input type="submit" value="提交"><br> <input type="submit" formnovalidate value="不验证提交"> </form> </code></pre> <h3><input> formtarget 属性</h3> <p>formtarget 属性指定一个名称或一个关键字来指明表单提交数据接收后的展示。<br> The formtarget 属性覆盖 <form>元素的target属性.<br> 注意: formtarget 属性与type="submit" 和 type="image"配合使用.<br> 实例<br> 两个提交按钮的表单, 在不同窗口中显示:</p> <pre><code><form action="demo-form.php"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="正常提交"> <input type="submit" formtarget="_blank" value="提交到一个新的页面上"> </form> </code></pre> <h3><input> height 和 width 属性</h3> <p>height 和 width 属性规定用于 image 类型的 <input> 标签的图像高度和宽度。<br> 注意: height 和 width 属性只适用于 image 类型的<input> 标签。<br> 提示:图像通常会同时指定高度和宽度属性。如果图像设置高度和宽度，图像所需的空间 在加载页时会被保留。如果没有这些属性， 浏览器不知道图像的大小，并不能预留 适当的空间。图片在加载过程中会使页面布局效果改变 （尽管图片已加载）。<br> 实例<br> 定义了一个图像提交按钮, 使用了 height 和 width 属性:</p> <pre><code><input type="image" src="img_submit.gif" alt="Submit" width="48" height="48"> </code></pre> <h3><input> list 属性</h3> <p>list 属性规定输入域的 datalist。datalist 是输入域的选项列表。<br> 实例<br> 在 <datalist>中预定义 <input> 值:</p> <pre><code><input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> </code></pre> <h3><input> min 和 max 属性</h3> <p>min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）。<br> 注意: min、max 和 step 属性适用于以下类型的 <input> 标签：date pickers、number 以及 range。<br> 实例<br> <input> 元素最小值与最大值设置:</p> <pre><code>Enter a date before 1980-01-01: <input type="date" name="bday" max="1979-12-31"> Enter a date after 2000-01-01: <input type="date" name="bday" min="2000-01-02"> Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5"> </code></pre> <h3><input> multiple 属性</h3> <p>multiple 属性是一个 boolean 属性.<br> multiple 属性规定<input> 元素中可选择多个值。<br> 注意: multiple 属性适用于以下类型的 <input> 标签：email 和 file:<br> 实例<br> 上传多个文件:</p> <pre><code>Select images: <input type="file" name="img" multiple> </code></pre> <h3><input> pattern 属性</h3> <p>pattern 属性描述了一个正则表达式用于验证 <input> 元素的值。<br> <strong>注意:</strong>pattern 属性适用于以下类型的 <input> 标签: text, search, url, tel, email, 和 password.<br> <strong>提示：</strong> 是用来全局 title 属性描述了模式.<br> <strong>提示：</strong> 您可以在我们的 JavaScript 教程中学习到有关正则表达式的内容<br> 实例<br> 下面的例子显示了一个只能包含三个字母的文本域（不含数字及特殊字符）：</p> <pre><code>Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code"> </code></pre> <h3><input> placeholder 属性</h3> <p>placeholder 属性提供一种提示（hint），描述输入域所期待的值。<br> 简短的提示在用户输入值前会显示在输入域上。<br> 注意: placeholder 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及 password。<br> 实例<br> input 字段提示文本t:</p> <pre><code><input type="text" name="fname" placeholder="First name"> </code></pre> <h3><input> required 属性</h3> <p>required 属性是一个 boolean 属性.<br> required 属性规定必须在提交之前填写输入域（不能为空）。<br> 注意:required 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。<br> 实例<br> 不能为空的input字段:</p> <pre><code>Username: <input type="text" name="usrname" required> </code></pre> <h3><input> step 属性</h3> <p>step 属性为输入域规定合法的数字间隔。<br> 如果 step="3"，则合法的数是 -3,0,3,6 等<br> 提示： step 属性可以与 max 和 min 属性创建一个区域值.<br> 注意: step 属性与以下type类型一起使用: number, range, date, datetime, datetime-local, month, time 和 week.<br> 实例<br> 规定input step步长为3:</p> <pre><code><input type="number" name="points" step="3"> </code></pre> <h1>十三、HTML5 语义元素</h1> <h3>HTML5中新的语义元素</h3> <p>许多现有网站都包含以下HTML代码： <div id="nav">, <div class="header">, 或者 <div id="footer">, 来指明导航链接, 头部, 以及尾部.<br> HTML5 提供了新的语义元素来明确一个Web页面的不同部分:</p> <ul> <li><header></li> <li><nav></li> <li><section></li> <li><article></li> <li><aside></li> <li><figcaption></li> <li><figure></li> <li><footer></li> </ul> <h1>十四、HTML5 Web 存储</h1> <h5>Internet Explorer 8+, Firefox, Opera, Chrome, 和 Safari支持Web 存储。</h5> <p>注意: Internet Explorer 7 及更早IE版本不支持web 存储.</p> <h3>localStorage 和 sessionStorage</h3> <p>客户端存储数据的两个对象为：</p> <ul> <li>localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。</li> <li>sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。<br> 在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage:</li> </ul> <pre><code>if(typeof(Storage)!=="undefined") { // 是的! 支持 localStorage sessionStorage 对象! // 一些代码..... } else { // 抱歉! 不支持 web 存储。 } </code></pre> <h3>localStorage 对象</h3> <p>localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。<br> 实例</p> <pre><code>localStorage.sitename="菜鸟教程"; document.getElementById("result").innerHTML="网站名：" + localStorage.sitename; </code></pre> <p>实例解析：</p> <ul> <li>使用 key="sitename" 和 value="菜鸟教程" 创建一个 localStorage 键/值对。</li> <li>检索键值为"sitename" 的值然后将数据插入 id="result"的元素中。<br> 以上实例也可以这么写：</li> </ul> <pre><code>// 存储 localStorage.sitename = "菜鸟教程"; // 查找 document.getElementById("result").innerHTML = localStorage.sitename; </code></pre> <p>移除 localStorage 中的 "sitename" :</p> <pre><code>localStorage.removeItem("sitename"); </code></pre> <p>不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：</p> <ul> <li>保存数据：localStorage.setItem(key,value);</li> <li>读取数据：localStorage.getItem(key);</li> <li>删除单个数据：localStorage.removeItem(key);</li> <li>删除所有数据：localStorage.clear();</li> <li>得到某个索引的key：localStorage.key(index);<br> <strong>提示:</strong> 键/值对通常以字符串存储，你可以按自己的需要转换该格式。<br> 下面的实例展示了用户点击按钮的次数。<br> 代码中的字符串值转换为数字类型:<br> 实例</li> </ul> <pre><code>if (localStorage.clickcount) { localStorage.clickcount=Number(localStorage.clickcount)+1; } else { localStorage.clickcount=1; } document.getElementById("result").innerHTML=" 你已经点击了按钮 " + localStorage.clickcount + " 次 "; </code></pre> <h3>sessionStorage 对象</h3> <p>sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。<br> 如何创建并访问一个 sessionStorage：<br> 实例</p> <pre><code>if (sessionStorage.clickcount) { sessionStorage.clickcount=Number(sessionStorage.clickcount)+1; } else { sessionStorage.clickcount=1; } document.getElementById("result").innerHTML="在这个会话中你已经点击了该按钮 " + sessionStorage.clickcount + " 次 "; </code></pre> <h3>Web Storage 开发一个简单的网站列表程序</h3> <p>网站列表程序实现以下功能：</p> <ul> <li>可以输入网站名，网址，以网站名作为key存入localStorage；</li> <li>根据网站名，查找网址；</li> <li>列出当前已保存的所有网站；<br> 以下代码用于保存于查找数据：</li> </ul> <ul> <li>save() 与 find() 方法</li> </ul> <pre><code>//保存数据 function save(){ var siteurl = document.getElementById("siteurl").value; var sitename = document.getElementById("sitename").value; localStorage.setItem(sitename, siteurl); alert("添加成功"); } //查找数据 function find(){ var search_site = document.getElementById("search_site").value; var sitename = localStorage.getItem(search_site); var find_result = document.getElementById("find_result"); find_result.innerHTML = search_site + "的网址是：" + sitename; } </code></pre> <p>完整实例演示如下：</p> <p>实例</p> <pre><code><div style="border: 2px dashed #ccc;width:320px;text-align:center;"> <label for="sitename">网站名(key)：</label> <input type="text" id="sitename" name="sitename" class="text"/> <br/> <label for="siteurl">网 址(value)：</label> <input type="text" id="siteurl" name="siteurl"/> <br/> <input type="button" onclick="save()" value="新增记录"/> <hr/> <label for="search_site">输入网站名：</label> <input type="text" id="search_site" name="search_site"/> <input type="button" onclick="find()" value="查找网站"/> <p id="find_result"><br/></p> </div> </code></pre> <h1>笔记</h1> <p>增加了删除方法，并简单优化了添加和删除，每次执行完都会刷新页面显示最新操作的数据：</p> <pre><code>//删除数据 function del(name) { localStorage.removeItem(name); alert("删除成功!"); loadAll(); } </code></pre> <p>如何隔离开不同页面之间的localStorage（总不能在百度的页面上能读到腾讯的localStorage吧，哈哈哈）。</p> <p>localStorage只要在相同的协议、相同的主机名、相同的端口下，就能读取/修改到同一份localStorage数据。</p> <p>sessionStorage比localStorage更严苛一点，除了协议、主机名、端口外，还要求在同一窗口（也就是浏览器的标签页）下。</p> <h1>十五、HTML5 Web SQL 数据库</h1> <h3>核心方法</h3> <p>以下是规范中定义的三个核心方法：</p> <ul> <li>openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。</li> <li>transaction：这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。</li> <li>executeSql：这个方法用于执行实际的 SQL 查询。</li> </ul> <h3>打开数据库</h3> <p>我们可以使用 openDatabase() 方法来打开已存在的数据库，如果数据库不存在，则会创建一个新的数据库，使用代码如下：</p> <pre><code>var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); </code></pre> <p>openDatabase() 方法对应的五个参数说明：</p> <ul> <li>数据库名称</li> <li>版本号</li> <li>描述文本</li> <li>数据库大小</li> <li>创建回调<br> 第五个参数，创建回调会在创建数据库后被调用。</li> </ul> <h3>执行查询操作</h3> <p>执行操作使用 database.transaction() 函数：</p> <pre><code>var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); db.transaction(function (tx) { tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); }); </code></pre> <p>上面的语句执行后会在 'mydb' 数据库中创建一个名为 LOGS 的表。</p> <h3>插入数据</h3> <p>在执行上面的创建表语句后，我们可以插入一些数据：</p> <pre><code>var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); db.transaction(function (tx) { tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "菜鸟教程")'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.com")'); }); </code></pre> <p>我们也可以使用动态值来插入数据：</p> <pre><code>var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); db.transaction(function (tx) { tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); tx.executeSql('INSERT INTO LOGS (id,log) VALUES (?, ?)', [e_id, e_log]); }); </code></pre> <h3>读取数据</h3> <p>以下实例演示了如何读取数据库中已经存在的数据：</p> <pre><code>var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); db.transaction(function (tx) { tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "菜鸟教程")'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.com")'); }); db.transaction(function (tx) { tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) { var len = results.rows.length, i; msg = "<p>查询记录条数: " + len + "</p>"; document.querySelector('#status').innerHTML += msg; for (i = 0; i < len; i++){ alert(results.rows.item(i).log ); } }, null); }); </code></pre> <p>实例中的 e_id 和 e_log 是外部变量，executeSql 会映射数组参数中的每个条目给 "?"。</p> <h3>完整实例</h3> <p>实例</p> <pre><code>var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); var msg; db.transaction(function (tx) { tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "菜鸟教程")'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.com")'); msg = '<p>数据表已创建，且插入了两条数据。</p>'; document.querySelector('#status').innerHTML = msg; }); db.transaction(function (tx) { tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) { var len = results.rows.length, i; msg = "<p>查询记录条数: " + len + "</p>"; document.querySelector('#status').innerHTML += msg; for (i = 0; i < len; i++){ msg = "<p><b>" + results.rows.item(i).log + "</b></p>"; document.querySelector('#status').innerHTML += msg; } }, null); }); </code></pre> <h3>删除记录</h3> <p>删除记录使用的格式如下：</p> <pre><code>db.transaction(function (tx) { tx.executeSql('DELETE FROM LOGS WHERE id=1'); }); 删除指定的数据id也可以是动态的： db.transaction(function(tx) { tx.executeSql('DELETE FROM LOGS WHERE id=?', [id]); }); </code></pre> <h3>更新记录</h3> <p>更新记录使用的格式如下：</p> <pre><code>db.transaction(function (tx) { tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=2'); }); 更新指定的数据id也可以是动态的： db.transaction(function(tx) { tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=?', [id]); }); </code></pre> <h3>完整实例</h3> <p>实例</p> <pre><code>var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); var msg; db.transaction(function (tx) { tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "菜鸟教程")'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.com")'); msg = '<p>数据表已创建，且插入了两条数据。</p>'; document.querySelector('#status').innerHTML = msg; }); db.transaction(function (tx) { tx.executeSql('DELETE FROM LOGS WHERE id=1'); msg = '<p>删除 id 为 1 的记录。</p>'; document.querySelector('#status').innerHTML = msg; }); db.transaction(function (tx) { tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=2'); msg = '<p>更新 id 为 2 的记录。</p>'; document.querySelector('#status').innerHTML = msg; }); db.transaction(function (tx) { tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) { var len = results.rows.length, i; msg = "<p>查询记录条数: " + len + "</p>"; document.querySelector('#status').innerHTML += msg; for (i = 0; i < len; i++){ msg = "<p><b>" + results.rows.item(i).log + "</b></p>"; document.querySelector('#status').innerHTML += msg; } }, null); }); </code></pre> <h1>十六、HTML5 应用程序缓存</h1> <h5>Internet Explorer 10, Firefox, Chrome, Safari 和 Opera 支持应用程序缓存.</h5> <h3>什么是应用程序缓存（Application Cache）？</h3> <p>HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。</p> <p>应用程序缓存为应用带来三个优势：</p> <ul> <li>离线浏览 - 用户可在应用离线时使用它们</li> <li>速度 - 已缓存资源加载得更快</li> <li>减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。</li> </ul> <h3>Cache Manifest 基础</h3> <p>如需启用应用程序缓存，请在文档的<html> 标签中包含 manifest 属性：</p> <pre><code><!DOCTYPE HTML> <html manifest="demo.appcache"> ... </html> </code></pre> <p>每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）。<br> manifest 文件的建议的文件扩展名是：".appcache"。<br> 请注意，manifest 文件需要配置正确的 MIME-type，即 "text/cache-manifest"。必须在 web 服务器上进行配置。</p> <h3>Manifest 文件</h3> <p>manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。<br> manifest 文件可分为三个部分：</p> <ul> <li>CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存</li> <li>NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存</li> <li>FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）</li> </ul> <h3>CACHE MANIFEST</h3> <p>第一行，CACHE MANIFEST，是必需的：</p> <pre><code>CACHE MANIFEST /theme.css /logo.gif /main.js </code></pre> <p>上面的 manifest 文件列出了三个资源：一个 CSS 文件，一个 GIF 图像，以及一个 JavaScript 文件。当 manifest 文件加载后，浏览器会从网站的根目录下载这三个文件。然后，无论用户何时与因特网断开连接，这些资源依然是可用的。</p> <h3>NETWORK</h3> <p>下面的 NETWORK 小节规定文件 "login.php" 永远不会被缓存，且离线时是不可用的：</p> <pre><code>NETWORK: login.php </code></pre> <p>可以使用星号来指示所有其他资源/文件都需要因特网连接：</p> <pre><code>NETWORK: * </code></pre> <h3>FALLBACK</h3> <p>下面的 FALLBACK 小节规定如果无法建立因特网连接，则用 "offline.html" 替代 /html5/ 目录中的所有文件：</p> <pre><code>FALLBACK: /html/ /offline.html </code></pre> <p>注意: 第一个 URI 是资源，第二个是替补。</p> <h5>更新缓存</h5> <p>一旦应用被缓存，它就会保持缓存直到发生下列情况：</p> <ul> <li>用户清空浏览器缓存</li> <li>manifest 文件被修改（参阅下面的提示）</li> <li>由程序来更新应用缓存</li> </ul> <h2>实例 - 完整的 Manifest 文件</h2> <pre><code>CACHE MANIFEST # 2012-02-21 v1.0.0 /theme.css /logo.gif /main.js NETWORK: login.php FALLBACK: /html/ /offline.html </code></pre> <p><strong>提示:</strong>以 "#" 开头的是注释行，但也可满足其他用途。应用的缓存会在其 manifest 文件更改时被更新。如果您编辑了一幅图片，或者修改了一个 JavaScript 函数，这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。</p> <h3>关于应用程序缓存的说明</h3> <p>请留心缓存的内容。</p> <p>一旦文件被缓存，则浏览器会继续展示已缓存的版本，即使您修改了服务器上的文件。为了确保浏览器更新缓存，您需要更新 manifest 文件。</p> <p>注意: 浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）。</p> <h1>十七、HTML5 Web Workers</h1> <h5>Internet Explorer 10, Firefox, Chrome, Safari 和 Opera 都支持Web workers.</h5> <h3>什么是 Web Worker？</h3> <p>当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。</p> <p>web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。</p> <h3>检测浏览器是否支持 Web Worker</h3> <p>在创建 web worker 之前，请检测用户的浏览器是否支持它：</p> <pre><code>if(typeof(Worker)!=="undefined") { // 是的! Web worker 支持! // 一些代码..... } else { //抱歉! Web Worker 不支持 } </code></pre> <h3>创建 web worker 文件</h3> <p>现在，让我们在一个外部 JavaScript 中创建我们的 web worker。</p> <p>在这里，我们创建了计数脚本。该脚本存储于 "demo_workers.js" 文件中：</p> <pre><code>var i=0; function timedCount() { i=i+1; postMessage(i); setTimeout("timedCount()",500); } timedCount(); </code></pre> <p>以上代码中重要的部分是 postMessage() 方法 - 它用于向 HTML 页面传回一段消息。</p> <p>注意: web worker 通常不用于如此简单的脚本，而是用于更耗费 CPU 资源的任务。</p> <h3>创建 Web Worker 对象</h3> <p>我们已经有了 web worker 文件，现在我们需要从 HTML 页面调用它。</p> <p>下面的代码检测是否存在 worker，如果不存在，- 它会创建一个新的 web worker 对象，然后运行 "demo_workers.js" 中的代码：</p> <pre><code>if(typeof(w)=="undefined") { w=new Worker("demo_workers.js"); } </code></pre> <p>然后我们就可以从 web worker 发生和接收消息了。</p> <p>向 web worker 添加一个 "onmessage" 事件监听器：</p> <pre><code>w.onmessage=function(event){ document.getElementById("result").innerHTML=event.data; }; </code></pre> <h3>终止 Web Worker</h3> <p>当我们创建 web worker 对象后，它会继续监听消息（即使在外部脚本完成之后）直到其被终止为止。</p> <p>如需终止 web worker，并释放浏览器/计算机资源，请使用 terminate() 方法：</p> <pre><code>w.terminate(); </code></pre> <h3>完整的 Web Worker 实例代码</h3> <p>我们已经看到了 .js 文件中的 Worker 代码。下面是 HTML 页面的代码：</p> <p>实例</p> <pre><code><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <p>计数： <output id="result"></output></p> <button onclick="startWorker()">开始工作</button> <button onclick="stopWorker()">停止工作</button> <p><strong>注意：</strong> Internet Explorer 9 及更早 IE 版本浏览器不支持 Web Workers.</p> <script> var w; function startWorker() { if(typeof(Worker) !== "undefined") { if(typeof(w) == "undefined") { w = new Worker("demo_workers.js"); } w.onmessage = function(event) { document.getElementById("result").innerHTML = event.data; }; } else { document.getElementById("result").innerHTML = "抱歉，你的浏览器不支持 Web Workers..."; } } function stopWorker() { w.terminate(); w = undefined; } </script> </body> </html> </code></pre> <h3>Web Workers 和 DOM</h3> <p>由于 web worker 位于外部文件中，它们无法访问下列 JavaScript 对象：</p> <ul> <li>window 对象</li> <li>document 对象</li> <li>parent 对象</li> </ul> <h1>十八、HTML5 服务器发送事件(Server-Sent Events)</h1> <p>HTML5 服务器发送事件（server-sent event）允许网页获得来自服务器的更新。</p> <h3>Server-Sent 事件 - 单向消息传递</h3> <p>Server-Sent 事件指的是网页自动获取来自服务器的更新。</p> <p>以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过服务器发送事件，更新能够自动到达。</p> <p>例子：Facebook/Twitter 更新、股价更新、新的博文、赛事结果等。</p> <h3>接收 Server-Sent 事件通知</h3> <p>EventSource 对象用于接收服务器发送事件通知：</p> <p>实例</p> <pre><code>var source=new EventSource("demo_sse.php"); source.onmessage=function(event) { document.getElementById("result").innerHTML+=event.data + "<br>"; }; </code></pre> <p>实例解析：</p> <ul> <li>创建一个新的 EventSource 对象，然后规定发送更新的页面的 URL（本例中是 "demo_sse.php"）</li> <li>每接收到一次更新，就会发生 onmessage 事件</li> <li>当 onmessage 事件发生时，把已接收的数据推入 id 为 "result" 的元素中</li> </ul> <h3>检测 Server-Sent 事件支持</h3> <p>以下实例，我们编写了一段额外的代码来检测服务器发送事件的浏览器支持情况：</p> <pre><code>if(typeof(EventSource)!=="undefined") { // 浏览器支持 Server-Sent // 一些代码..... } else { // 浏览器不支持 Server-Sent.. } </code></pre> <h3>服务器端代码实例</h3> <p>为了让上面的例子可以运行，您还需要能够发送数据更新的服务器（比如 PHP 和 ASP）。</p> <p>服务器端事件流的语法是非常简单的。把 "Content-Type" 报头设置为 "text/event-stream"。现在，您可以开始发送事件流了。</p> <p>实例</p> <pre><code><?php header('Content-Type: text/event-stream'); header('Cache-Control: no-cache'); $time = date('r'); echo "data: The server time is: {$time}\n\n"; flush(); ?> </code></pre> <p>ASP 代码 (VB) (demo_sse.asp):</p> <pre><code><% Response.ContentType="text/event-stream" Response.Expires=-1 Response.Write("data: " & now()) Response.Flush() %> </code></pre> <p>代码解释:</p> <ul> <li>把报头 "Content-Type" 设置为 "text/event-stream"</li> <li>规定不对页面进行缓存</li> <li>输出发送日期（始终以 "data: " 开头）</li> <li>向网页刷新输出数据</li> </ul> <h3>EventSource 对象</h3> <p>在上面的例子中，我们使用 onmessage 事件来获取消息。不过还可以使用其他事件：</p> <p>事件 描述</p> <ul> <li>onopen 当通往服务器的连接被打开</li> <li>onmessage 当接收到消息</li> <li>onerror 当发生错误</li> </ul> <h1>笔记</h1> <p>在上面 asp 代码里，别忘记 \n\n。</p> <p>如果你用ASP.NET C#制作，则 demo_sse.aspx 代码如下：</p> <pre><code><%@ Page Language="C#" %> <script runat="server"> protected void Page_Load(object sender, EventArgs e) { Response.ContentType = "text/event-stream"; Response.Expires = -1; Response.Write("data:" + DateTime.Now + "\n\n"); Response.Flush(); } </script> </code></pre> <p>需要以 \n\n 结尾，否则，会得不到数据。</p> <h1>十九、HTML5 WebSocket</h1> <p>WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。</p> <p>WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。</p> <p>在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。</p> <p>现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。</p> <p>HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。<br> 浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。</p> <p>当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。</p> <p>以下 API 用于创建 WebSocket 对象。</p> <pre><code>var Socket = new WebSocket(url, [protocol] ); </code></pre> <p>以上代码中的第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的，指定了可接受的子协议。</p> <h3>WebSocket 属性</h3> <p>以下是 WebSocket 对象的属性。假定我们使用了以上代码创建了 Socket 对象：</p> <p>属性 描述<br> Socket.readyState<br> 只读属性 readyState 表示连接状态，可以是以下值：</p> <ul> <li>0 - 表示连接尚未建立。</li> <li>1 - 表示连接已建立，可以进行通信。</li> <li>2 - 表示连接正在进行关闭。</li> <li>3 - 表示连接已经关闭或者连接不能打开。</li> </ul> <p>Socket.bufferedAmount</p> <ul> <li>只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数。</li> </ul> <h3>WebSocket 事件</h3> <p>以下是 WebSocket 对象的相关事件。假定我们使用了以上代码创建了 Socket 对象：</p> <p>事件 事件处理程序 描述</p> <ul> <li>open Socket.onopen 连接建立时触发</li> <li>message Socket.onmessage 客户端接收服务端数据时触发</li> <li>error Socket.onerror 通信发生错误时触发</li> <li>close Socket.onclose 连接关闭时触发</li> </ul> <h3>WebSocket 方法</h3> <p>以下是 WebSocket 对象的相关方法。假定我们使用了以上代码创建了 Socket 对象：</p> <p>方法 描述</p> <ul> <li><p>Socket.send()<br> 使用连接发送数据</p></li> <li><p>Socket.close()<br> 关闭连接</p></li> </ul> <h3>WebSocket 实例</h3> <p>WebSocket 协议本质上是一个基于 TCP 的协议。</p> <p>为了建立一个 WebSocket 连接，客户端浏览器首先要向服务器发起一个 HTTP 请求，这个请求和通常的 HTTP 请求不同，包含了一些附加头信息，其中附加头信息"Upgrade: WebSocket"表明这是一个申请协议升级的 HTTP 请求，服务器端解析这些附加的头信息然后产生应答信息返回给客户端，客户端和服务器端的 WebSocket 连接就建立起来了，双方就可以通过这个连接通道自由的传递信息，并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。</p> <h3>客户端的 HTML 和 JavaScript</h3> <p>目前大部分浏览器支持 WebSocket() 接口，你可以在以下浏览器中尝试实例： Chrome, Mozilla, Opera 和 Safari。</p> <p>runoob_websocket.html 文件内容</p> <pre><code><!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script type="text/javascript"> function WebSocketTest() { if ("WebSocket" in window) { alert("您的浏览器支持 WebSocket!"); // 打开一个 web socket var ws = new WebSocket("ws://localhost:9998/echo"); ws.onopen = function() { // Web Socket 已连接上，使用 send() 方法发送数据 ws.send("发送数据"); alert("数据发送中..."); }; ws.onmessage = function (evt) { var received_msg = evt.data; alert("数据已接收..."); }; ws.onclose = function() { // 关闭 websocket alert("连接已关闭..."); }; } else { // 浏览器不支持 WebSocket alert("您的浏览器不支持 WebSocket!"); } } </script> </head> <body> <div id="sse"> <a href="javascript:WebSocketTest()">运行 WebSocket</a> </div> </body> </html> </code></pre> <h3>安装 pywebsocket</h3> <p>在执行以上程序前，我们需要创建一个支持 WebSocket 的服务。从 pywebsocket 下载 mod_pywebsocket ,或者使用 git 命令下载：</p> <pre><code>git clone https://github.com/googlearchive/pywebsocket <p> mod_pywebsocket 需要 python 环境支持</p> mod_pywebsocket 是一个 Apache HTTP 的 Web Socket扩展，安装步骤如下：</p> <ul> <li><p>解压下载的文件。</p></li> <li><p>进入 <b>pywebsocket</b> 目录。</p></li> <li><p>执行命令：</p> <pre>$ python setup.py build $ sudo python setup.py install </code></pre> <p>查看文档说明:</p> <pre><code>$ pydoc mod_pywebsocket </code></pre> <h3>开启服务</h3> <p>在 pywebsocket/mod_pywebsocket 目录下执行以下命令：</p> <pre><code>$ sudo python standalone.py -p 9998 -w ../example/ </code></pre> <h1>笔记</h1> <p>Websocket 使用 ws 或 wss 的统一资源标志符，类似于 HTTPS，其中 wss 表示在 TLS 之上的 Websocket。如：</p> <pre><code>ws://example.com/wsapi wss://secure.example.com/ </code></pre> <p>Websocket 使用和 HTTP 相同的 TCP 端口，可以绕过大多数防火墙的限制。默认情况下，Websocket 协议使用 80 端口；运行在 TLS 之上时，默认使用 443 端口。<br> 一个典型的Websocket握手请求如下：<br> 客户端请求</p> <pre><code>GET / HTTP/1.1 Upgrade: websocket Connection: Upgrade Host: example.com Origin: http://example.com Sec-WebSocket-Key: sN9cRrP/n9NdMgdcy2VJFQ== Sec-WebSocket-Version: 13 </code></pre> <p>服务器回应</p> <pre><code>HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: fFBooB7FAkLlXgRSz0BT3v4hq5s= Sec-WebSocket-Location: ws://example.com/ </code></pre> <ul> <li>Connection 必须设置 Upgrade，表示客户端希望连接升级。</li> <li>Upgrade 字段必须设置 Websocket，表示希望升级到 Websocket 协议。</li> <li>Sec-WebSocket-Key 是随机的字符串，服务器端会用这些数据来构造出一个 SHA-1 的信息摘要。把 “Sec-WebSocket-Key” 加上一个特殊字符串 “258EAFA5-E914-47DA-95CA-C5AB0DC85B11”，然后计算 SHA-1 摘要，之后进行 BASE-64 编码，将结果做为 “Sec-WebSocket-Accept” 头的值，返回给客户端。如此操作，可以尽量避免普通 HTTP 请求被误认为 Websocket 协议。</li> <li>Sec-WebSocket-Version 表示支持的 Websocket 版本。RFC6455 要求使用的版本是 13，之前草案的版本均应当弃用。</li> <li>Origin 字段是可选的，通常用来表示在浏览器中发起此 Websocket 连接所在的页面，类似于 Referer。但是，与 Referer 不同的是，Origin 只包含了协议和主机名称。</li> <li>其他一些定义在 HTTP 协议中的字段，如 Cookie 等，也可以在 Websocket 中使用。</li> </ul> <p>在服务器方面，网上都有不同对websocket支持的服务器：</p> <ul> <li>php - http://code.google.com/p/phpwebsocket/ </li> <li>jetty - http://jetty.codehaus.org/jetty/（版本7开始支持websocket） </li> <li>netty - http://www.jboss.org/netty </li> <li>ruby - http://github.com/gimite/web-socket-ruby </li> <li>Kaazing - https://web.archive.org/web/20100923224709/http://www.kaazing.org/confluence/display/KAAZING/Home </li> <li>Tomcat - http://tomcat.apache.org/（7.0.27支持websocket，建议用tomcat8，7.0.27中的接口已经过时） </li> <li>WebLogic - http://www.oracle.com/us/products/middleware/cloud-app-foundation/weblogic/overview/index.html（12.1.2開始支持） </li> <li>node.js - https://github.com/Worlize/WebSocket-Node </li> <li>node.js - http://socket.io </li> <li>nginx - http://nginx.com/ </li> <li>mojolicious - http://mojolicio.us/ </li> <li>python - https://github.com/abourget/gevent-socketio </li> <li>Django - https://github.com/stephenmcd/django-socketio </li> <li>erlang - https://github.com/ninenines/cowboy.git </li> </ul> <p>说到 websocket 我觉得有必要说下跟 socket 的区别。</p> <p>软件通信有七层结构，下三层结构偏向与数据通信，上三层更偏向于数据处理，中间的传输层则是连接上三层与下三层之间的桥梁，每一层都做不同的工作，上层协议依赖与下层协议。基于这个通信结构的概念。</p> <p>Socket 其实并不是一个协议，是应用层与 TCP/IP 协议族通信的中间软件抽象层，它是一组接口。当两台主机通信时，让 Socket 去组织数据，以符合指定的协议。TCP 连接则更依靠于底层的 IP 协议，IP 协议的连接则依赖于链路层等更低层次。</p> <p>WebSocket 则是一个典型的应用层协议。</p> <p>总的来说：Socket 是传输控制层协议，WebSocket 是应用层协议。</p> </article> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1643874967365935104"></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">你可能感兴趣的:(复习2HTML5)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1835475580879990784.htm" title="女儿考研完报考雅思" target="_blank">女儿考研完报考雅思</a> <span class="text-muted">捡拾流年</span> <div>是否我过于焦虑？会不会无形间让女儿觉得压力太大了啊。2022年对于我们家来说是不平常的一年。女儿今年大四，为了准备考研，暑假也没回家，年初去了学校到了年末才回家。女儿自己一个人面对考研，没有参加培训，大四学校作业论文等课业也多，她同时也是很努力复习考研的。在疫情开放很多羊的时期，女儿终于顺顺利利参加12月24、25号的考研，我们和家人都觉得女儿回家来要好好休息调养。可女儿回到家，我再查阅考研信息，</div> </li> <li><a href="/article/1835462838735433728.htm" title="海拔五千" target="_blank">海拔五千</a> <span class="text-muted">3点8度</span> <div>【海拔五千】连续几天到宿舍盯学生早起情况，今天早上都能及时离开宿舍，没有迟到的了。早读复习宋词，新背一首，晚上又忘了[流泪]断续听王静老师的一堂课，深度语文名不虚传！下课问学生如何，学生答曰比你讲的有趣[捂脸]继续读《娱乐至死》美国在不同的历史时期，代表城市不一样，从波士顿的政治中心，到纽约的大熔炉（自由女神就是其象征），再到芝加哥的工业发展中心，最后到拉斯维加斯的娱乐之城。不同历史时期美国精神的</div> </li> <li><a href="/article/1835431575303581696.htm" title="#千锋逆战班 郭燕 学习的一天开启" target="_blank">#千锋逆战班 郭燕 学习的一天开启</a> <span class="text-muted">郭千岁呗</span> <div>在千锋"逆战"学习云计算第17天加油努力会有好结果复习昨天知识中国加油！武汉加油！千峰加油!我自己加油！</div> </li> <li><a href="/article/1835430719363575808.htm" title="更改npm镜像源为淘宝镜像" target="_blank">更改npm镜像源为淘宝镜像</a> <span class="text-muted">骆小骆</span> <a class="tag" taget="_blank" href="/search/%E5%9F%BA%E4%BA%8Enode.js/1.htm">基于node.js</a> <div>npm常用指令后缀*最近复习了一下node.js整理了一下跟node.js相关的指令后缀*--save、-S参数意思是把模块的版本信息保存到dependencies（生产环境依赖）中，即你的package.json文件的dependencies字段中；–--save-dev、-D参数意思是把模块版本信息保存到devDependencies（开发环境依赖）中，即你的package.json文件的de</div> </li> <li><a href="/article/1835415836630806528.htm" title="代码随想录Day 41|动态规划之买卖股票问题，leetcode题目121. 买卖股票的最佳时机、122. 买卖股票的最佳时机Ⅱ、123. 买卖股票的最佳时机Ⅲ" target="_blank">代码随想录Day 41|动态规划之买卖股票问题，leetcode题目121. 买卖股票的最佳时机、122. 买卖股票的最佳时机Ⅱ、123. 买卖股票的最佳时机Ⅲ</a> <span class="text-muted">LluckyYH</span> <a class="tag" taget="_blank" href="/search/%E5%8A%A8%E6%80%81%E8%A7%84%E5%88%92/1.htm">动态规划</a><a class="tag" taget="_blank" href="/search/leetcode/1.htm">leetcode</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%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a> <div>提示：DDU，供自己复习使用。欢迎大家前来讨论~文章目录买卖股票的最佳时机相关题目题目一：121.买卖股票的最佳时机解题思路：题目二：122.买卖股票的最佳时机II解题思路：题目三：123.买卖股票的最佳时机III解题思路总结买卖股票的最佳时机相关题目题目一：121.买卖股票的最佳时机[[121.买卖股票的最佳时机](https://leetcode.cn/problems/combination</div> </li> <li><a href="/article/1835392055908593664.htm" title="黄丽红日精进98/105" target="_blank">黄丽红日精进98/105</a> <span class="text-muted">做自己小太阳</span> <div>感恩感恩今日份的拍照ing感恩今日份电视重新可以看感恩妹妹帮忙晾衣服感恩在路上的自己感恩我的朋友们和家人见1.今日份看了胡歌的一个节目，2010年的，10年之前，他的真实和有爱感动了我，不愧是我喜欢的胡歌2.今日份每日一练终于自己开始了调整后计划，流行病也开始复习，一切在路上3.妆容精致心情没好，在家注意收拾自己，画个淡妆最起码要精神面貌佳，回村后的我已经很像大妈了！！！感1.自己也是一个温暖的人</div> </li> <li><a href="/article/1835344708256231424.htm" title="让你的孩子悄悄拔尖" target="_blank">让你的孩子悄悄拔尖</a> <span class="text-muted">水墨烟岚</span> <div>帮助孩子找到适合自己的方法，相信我，只要正确地努力，孩子的成绩一定会进步！1.这些准备一定要有：都有一个错题本；都有一个好题本；新课之前一定先预习；先复习后做作业；做作业要计时（限时训练）。2.计划管理——有规律长计划，短安排在制定一个长期目标的同时，一定要制定一个短期学习目标，这个目标要切合自己的实际，通过努力是完全可以实现的。最重要的是，能管住自己，也就挡住了各种学习上的负面干扰，如此，那个“</div> </li> <li><a href="/article/1835335402521718784.htm" title="女儿今天期末考试，紧张得要命" target="_blank">女儿今天期末考试，紧张得要命</a> <span class="text-muted">Ailsa_a73a</span> <div>女儿今天期末考试，昨晚回来以后爸爸就和他一起在复习，我看到他一直坐在桌面前复习了一个多小时，看来他是真的很在乎这次期末考试，也许老师在给他们施压，我和爸爸无形之中也给他很多压力。早上起床，我做了她平时最爱喝的黑米粥，还有冻粑，这两样都是她最爱吃的，可是起床了以后根本就没有食欲。她说：妈妈，我不想吃，我吃不下去。刚开始起床的时候，她跟我讲：妈妈，我肚子有点不舒服。我说：你是怎么了？要不要喝点温开水？</div> </li> <li><a href="/article/1835332133149831168.htm" title="2024年最全Flutter如何和Native通信-Android视角，Electron开发Android界面" target="_blank">2024年最全Flutter如何和Native通信-Android视角，Electron开发Android界面</a> <span class="text-muted">2401_84544531</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/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>总结【Android详细知识点思维脑图（技能树）】其实Android开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。虽然Android没有前几年火热了，已经过去了会四大组件就能找到高薪职位的时代了。这只能说明Android中级以下的岗位饱和了，现在高级工程师还是比较缺少的，很多高级职位给的薪</div> </li> <li><a href="/article/1835329042367213568.htm" title="杨蕊今日份总结" target="_blank">杨蕊今日份总结</a> <span class="text-muted">羊鑫</span> <div>2020年10月24日周二新的一周开始了！到了学校先打扫了一下卫生，然后给孩子们录了今天写作业的视频，今天书写的作业笔画是横折竖折。字根“五”今天孩子们的书写质量还是可以的，但是短横长横的掌握情况不是很理想，周六周天孩子们来的时候再给孩子们进行复习回顾一下，重点说一下这个知识点。去楼上把几个坏掉的凳子用固体胶粘好。下午去南鑫拿了几张照片去那边压膜。回到比德弗校区之后把玩具架和齐老师一起全都整理了一</div> </li> <li><a href="/article/1835280169263263744.htm" title="2020－1－12 记今年/这学期在校的最后一天" target="_blank">2020－1－12 记今年/这学期在校的最后一天</a> <span class="text-muted">张万森请跟我结芬</span> <div>今日完成之事：1.复习了《品牌管理实务》2.考了《品牌管理实务》3.陪婉娥去吃了b食堂一楼的肠粉(突然觉得还蛮好吃的)4.收拾了回家的行李(有些还没收拾)感悟：其实今天算是浪费了一天的时间吧，因为我直到现在都没有认真的阅读过，上午在复习备考，下午去考试，考完就回宿舍收东西，直到现在。但是今天很开心，因为明天就要放假了，我就不多说了，我要去阅读了，不然很愧疚的。</div> </li> <li><a href="/article/1835273566954811392.htm" title="【周总结】第六期第7周29叮当" target="_blank">【周总结】第六期第7周29叮当</a> <span class="text-muted">29_叮当</span> <div>时间：2019.6.24——2019.6.30【本周计划/总结】一、职业发展注会复习备考。计划一天八小时复习。二、财务状况收支正常，还有账未收回，等段时间再催。三、健康每日1万步，7天完成；治疗白发，6天；平板支撑最近没坚持；每天锻炼完后拉伸，疏通经络；体重下降。图片发自App四、娱乐没什么娱乐活动。五、朋友与重要他人哥哥和侄子都回来了，家人团聚，老人很开心。一家人难得相聚六、家庭做好每周的清洁，</div> </li> <li><a href="/article/1835207516892524544.htm" title="2023年1月3日 星期二 天气晴 亲子日记（1483）" target="_blank">2023年1月3日 星期二 天气晴 亲子日记（1483）</a> <span class="text-muted">love_happy</span> <div>昨天下午，豪宝发烧了，头疼，咳嗽，这是怕什么来什么，一直没敢出门，就想着平安健康的度过测试，寒假里再玩也不迟。没想到病毒偏偏这个时候来凑热闹，想想今天就要测试了，豪宝难免有些情绪波动，学了半年，复习接近一个月，就为这个测试做准备呢！如果不能以最佳状态投入其中，又怎甘心自己所做的努力！很快到了测试时间，七十分钟的时间，从开始到结束，我全程陪同，一个人坐在旁边，没人打扰，静静地做着题目，直到老师提醒还</div> </li> <li><a href="/article/1835185805052702720.htm" title="三对角线型行列式的求法" target="_blank">三对角线型行列式的求法</a> <span class="text-muted">Mr-Apple</span> <a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/%E7%BA%BF%E6%80%A7%E4%BB%A3%E6%95%B0/1.htm">线性代数</a><a class="tag" taget="_blank" href="/search/%E7%9F%A9%E9%98%B5/1.htm">矩阵</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a> <div>三对角线型行列式摘要典型例题练习题参考答案摘要笔者在复习高等代数行列式这章时,发现三对角行列式问题是行列式计算中经常出现的一类行列式,部分考研院校也曾直接出过三对角行列式的计算,亦或是三对角行列式的变体问题.本文主要介绍了一种通常情况下三对角行列式的解法,即采用特征根法来求解行列式的通项公式.例1:计算nnn阶行列式(ac≠0)(ac\neq0)(ac=0)Dn=∣bc0…000abc…0000</div> </li> <li><a href="/article/1835183413045325824.htm" title="2022-12-26" target="_blank">2022-12-26</a> <span class="text-muted">向日葵的执着</span> <div>每日一省（第279篇）孩子元月5号就要期末考试了。这几天辅导他写作业的过程中，发现有很多知识都掌握的不牢固，于是我难免就有些写着急了。我的态度和语气都写满了焦虑和紧张不安，孩子也被训的不知所措。今天晚上吃过饭后，我们又开始了复习，面对孩子惨兮兮的学习效果，压抑了几天的不满情绪瞬间爆发，一阵狂风暴雨之后，我发现孩子看我的眼神变了（他的眼中充满了愤怒和恐惧），跟我说话的语气也不一样了（充满了不屑和无奈</div> </li> <li><a href="/article/1835173325173780480.htm" title="超级无敌详细的Mysql数据库笔记（基础篇版）" target="_blank">超级无敌详细的Mysql数据库笔记（基础篇版）</a> <span class="text-muted">当大哥爱上学习</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</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/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>注：本篇笔记根据黑马程序员MySQL数据库入门到精通的内容所创建，适合复习和结合该视频学习使用。一.基础1.关系型数据库(RDBMS)概念:建立在关系模型基础上，由多张相互连接的二维表组成的数据库。特点:使用表存储数据，格式统一，便于维护使用SQL语言操作，标准统一，使用方便。2.SQLSQL通用语法SQL语句可以单行或多行书写，以分号结尾.SQL语句可以使用空格/缩进来增强语句的可读性。MySQ</div> </li> <li><a href="/article/1835170527573012480.htm" title="在职四战考研3day" target="_blank">在职四战考研3day</a> <span class="text-muted">MM加油女孩</span> <div>今日已完成考研任务：与教务处老师联系，学习怎么正确使用书籍；看333教育综合大纲；日总结：下午下班后与教务处老师联系，老师跟我讲了资料的正确使用方式，心里也有了大概的思路——根据老师提供的教材，我第一轮需要用到的资料就是一本通+网课，书籍只作为辅助对象，倘若网课里的内容听懂了，老师说书籍就可以不看了。第二轮复习：就是网课+自己构建思维导图，并尝试做333教育综合的主观题；第三轮复习：背诵客观题起码</div> </li> <li><a href="/article/1835153855797620736.htm" title="2019年7月18日朱彬语的观察日志 - 草稿" target="_blank">2019年7月18日朱彬语的观察日志 - 草稿</a> <span class="text-muted">ic班</span> <div>今天彬语在老师的引导下选择了八大行星图卡配对的复习工作本次主要学习（木星，土星，地球）的名称，这份工作主要培养孩子的观察能力、专注力以及八大行星名称的学习。在这周周一彬语开始做八大行星的图卡配对，彬语在老师的提示下，就已经能顺利准确的完成，接着在和老师的讨论中，彬语拿起了地球说到“这是地球，有人住”，接着指着木星和土星的图卡分别说“这是最大的”“它有一个游泳圈”……那我们就先学习“地球，木星，土星</div> </li> <li><a href="/article/1835110212529385472.htm" title="2020-6-9晨间日记" target="_blank">2020-6-9晨间日记</a> <span class="text-muted">那畔千浔</span> <div>今天是什么日子起床：六点就寝：十点天气：阴心情：很好纪念日：小萌来到家里的第三天任务清单昨日完成的任务，最重要的三件事：一。值班二。申请表三。完成局里面的培训申请表改进：想到事就去做习惯养成：不拖拉周目标·完成进度买席子。明天早去看学习·信息·阅读读了晚报。难忘樱花写的比较美，复习了火烧云。健康·饮食·锻炼走路半小时。吃了四个杏子，吃了蛋挞，面包，牛奶，西瓜等。人际·家人·朋友联系了张老师，联系了</div> </li> <li><a href="/article/1835083069275598848.htm" title="信号与线性系统分析第4版吴大正课后习题答案" target="_blank">信号与线性系统分析第4版吴大正课后习题答案</a> <span class="text-muted">zgw100xuexi</span> <a class="tag" taget="_blank" href="/search/%E8%80%83%E8%AF%95/1.htm">考试</a><a class="tag" taget="_blank" href="/search/%E4%BF%A1%E5%8F%B7%E4%B8%8E%E7%BA%BF%E6%80%A7%E7%B3%BB%E7%BB%9F%E5%88%86%E6%9E%90/1.htm">信号与线性系统分析</a><a class="tag" taget="_blank" href="/search/%E8%AF%BE%E5%90%8E%E7%AD%94%E6%A1%88/1.htm">课后答案</a> <div>完整版：http://zgw.100xuexi.com/SubItem/IndexInfoDetail.aspx?id=1d9ef631-a09d-4893-bb2f-597c745f5803第1章信号与系统1.1复习笔记本章是信号分析与系统分析的基础，详细介绍了信号与系统的概念与分类方法以及常用的连续信号与离散信号，讨论了冲激函数和冲激偶函数的重要性质，介绍了线性时不变（LTI）系统的特性，简要</div> </li> <li><a href="/article/1835067468691894272.htm" title="还没坚持到最后~" target="_blank">还没坚持到最后~</a> <span class="text-muted">Faith_耐心女皇</span> <div>运动是我一直以来特别想要坚持的一件事，一直以来我都把它放进了我的日程待办事项里面，一直苦于没有行动。终于开始了，一下是我个人的几点感受。在坚持了一个礼拜之后，感觉倦怠了，特别不想动，然后在6点钟，特别巧合，特别准时的自然醒(我闹钟是6:20am)。起床了不知道干啥，要复习的专业也不想做，洗漱后就去下面操场溜达，想想还是跑一跑，跑了之后，又想一想，不能比昨天差呀，就这样坚持下来了。早起不知道干啥，这</div> </li> <li><a href="/article/1835067341642231808.htm" title="教考结束，新一轮学习目标是什么呢？" target="_blank">教考结束，新一轮学习目标是什么呢？</a> <span class="text-muted">曲歌Sherry</span> <div>历时两个多月的教师资证考试于昨天落幕。顺不顺利不知道，能不能考过不知道，但是这一件事可以先放在一边一段时间了。今天早上对了一下综合题的选择题答案，29个题答对了23个，自己还是很满意的。其他题什么情况就不知道了，剩下的就不是我能管的事了。专业知识科目因为背的内容一直没有看，所以辨析和简答题都不会，只能按着自己的理解去写了。总结这一轮的考前复习工作，感觉自己最大的优点是两个科目的精讲内容都听了一遍，</div> </li> <li><a href="/article/1835025342037848064.htm" title="1月30 日" target="_blank">1月30 日</a> <span class="text-muted">李艺莹</span> <div>今天学习的是用触摸屏做的显示文字，很神奇。就是需要配置的东西很多，管脚很多，其他的东西还好。我接下来需要提高的就是自己来编写所有的配置。明天就要考试了，我真的是很紧张，晚上还是要复习的，虽然就要放假了，但是我还是要多学一点的，不要荒废了时间。不说了，我要去复习啦。FIGHTING，FIGHTING，FIGHTING。</div> </li> <li><a href="/article/1835012337199837184.htm" title="性能测试的复习2-jmeter的搭建、使用、参数化" target="_blank">性能测试的复习2-jmeter的搭建、使用、参数化</a> <span class="text-muted">暖阳与晚风</span> <a class="tag" taget="_blank" href="/search/jmeter/1.htm">jmeter</a><a class="tag" taget="_blank" href="/search/jmeter/1.htm">jmeter</a> <div>通过网盘分享的文件：性能测试共享文件链接:https://pan.baidu.com/s/1A4Nc8C5Xp6qxQ5QFtecK8g?pwd=s73c提取码:s73c1、性能测试工具2、jmeter环境搭建3、jmeter的基本使用4、jmeter的参数化</div> </li> <li><a href="/article/1835010470659059712.htm" title="DAY5硬币的字&花" target="_blank">DAY5硬币的字&花</a> <span class="text-muted">小苏糖</span> <div>我记得以前我遇到自己无法抉择的事情都会抛硬币，正反面来决定最终的结果。后来我不敢再拿起硬币抛出去，我很害怕得到的不是我想要的答案。自从毕业进了事务所工作，我就明白这条路需要考证、攒经验，是很辛苦的但我并不后悔。一个月前我为了看书复习考证，萌生了辞职的念头，我不知道自己的选择对不对，我问了我的朋友们，他们各执一词，还是需要我自己来抉择，我犹豫了两天后向领导说了我的想法，领导答应给我两个月的假让我全力</div> </li> <li><a href="/article/1834986763005816832.htm" title="孩 子 与 教 育" target="_blank">孩 子 与 教 育</a> <span class="text-muted">激流扬帆</span> <div>（2019年9月21日分享第6篇）滑县小规模学校联盟小田小学杜冠鹏今天通过学习陶行知的几篇文章，我收获很大，同时也感悟很多，最让我感悟深的就是孩子与教育。小孩子的力量是不可思议的，小孩子能做老师，做老师不限定要毕业师范毕业。在陶行知致潘一尘先生的信中，谈到一个不满13岁的孩子领导小朋友建学校，表现出超越的天才。小孩子可以把自己读的书教人，一面复习一面把学到的知识传给他人，那是再好无比的啦！陶行知在</div> </li> <li><a href="/article/1834971192675627008.htm" title="换种方式，就会柳暗花明" target="_blank">换种方式，就会柳暗花明</a> <span class="text-muted">凉月西风</span> <div>又进入了期末大复习，一个令语文老师崩溃的时期。明明写了无数次的词语，一听写，还是错。背了无数次的课文，一提问，还是不会。于是乎，火冒三丈，一顿狠批。君不见，办公室里，谈论最多的是“那个谁谁谁，今天把我快我晕了……”，“谁谁谁，我真是服气了，那个什么什么的知识，我都说了一百遍了，还是不会……”焦虑抱怨不绝于耳，怨恨生气如影随形。上帝一思考，天使会发笑；老师一思考，方法就有了。做一个教师，你是不是该反</div> </li> <li><a href="/article/1834966250623692800.htm" title="错点喜欢你 08 不是我" target="_blank">错点喜欢你 08 不是我</a> <span class="text-muted">墨夕澈</span> <div>【下面正文07你那么努力和08不是我合在了一起，因为两篇字数都不超1k，抱歉啦大家】07你那么努力高考转瞬即至，而安青檬还没有复习完，一会儿就是语文高考了，她抬头看了看时间，快8点了，而20分钟后她们就要去考场了！想到这安青檬的心就愈发安静不下来，她紧张极了，这会儿连笔记都不想看了。“啊……”安青檬不由得长长地叫了一声，枕住自己的胳膊趴在桌面上。谌昭听见，不由得皱了皱眉，他轻声问道：“怎么了？”安</div> </li> <li><a href="/article/1834952883603337216.htm" title="2019年7月18日陈宇澄的观察日志" target="_blank">2019年7月18日陈宇澄的观察日志</a> <span class="text-muted">ic班</span> <div>今天馒头在老师的引导下的选择了折布的工作.这份工作根据折痕线将正方形布进行不同方式的折叠.可以培养幼儿在日常生活中的动手能力，为以后的叠衣服做准备，同时也培养孩子的专注力及手眼协调能力。这周馒头开始接触折布的工作，这两天每天都会复习一次，折布的工作目前分三个难度层次，第一块沿折痕线平行对折，老师示范后.馒头第一天就顺利的完成了；第二块对角线折，以及第三块对角线对折再对折，馒头目前独立操作时，会记得</div> </li> <li><a href="/article/1834930503657025536.htm" title="尤占芳 焦点网络初级九期 洛阳 坚持原创分享第39天 （2018-4-4星期三）" target="_blank">尤占芳 焦点网络初级九期 洛阳 坚持原创分享第39天 （2018-4-4星期三）</a> <span class="text-muted">尤占芳</span> <div>今天心里特别乱，被别人侵犯真的很不舒服，我要做一个学会拒绝别人的人，不能老是被别人绑架。我觉得我活的好累、好累、好累……今天就复习一下吧，真的应修整一下自己了。关注正向、关注解决、关注现在与未来、关注成功经验、关注一小步的行动。</div> </li> <li><a href="/article/86.htm" title="linux系统服务器下jsp传参数乱码" target="_blank">linux系统服务器下jsp传参数乱码</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/jsp/1.htm">jsp</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/windows/1.htm">windows</a><a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a> <div>在一次解决乱码问题中， 发现jsp在windows下用js原生的方法进行编码没有问题，但是到了linux下就有问题， escape,encodeURI,encodeURIComponent等都解决不了问题 但是我想了下既然原生的方法不行，我用el标签的方式对中文参数进行加密解密总该可以吧。于是用了java的java.net.URLDecoder,结果还是乱码，最后在绝望之际，用了下面的方法解决了</div> </li> <li><a href="/article/213.htm" title="Spring 注解区别以及应用" target="_blank">Spring 注解区别以及应用</a> <span class="text-muted">BlueSkator</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a> <div>1. @Autowired @Autowired是根据类型进行自动装配的。如果当Spring上下文中存在不止一个UserDao类型的bean，或者不存在UserDao类型的bean，会抛出 BeanCreationException异常，这时可以通过在该属性上再加一个@Qualifier注解来声明唯一的id解决问题。 2. @Qualifier 当spring中存在至少一个匹</div> </li> <li><a href="/article/340.htm" title="printf和sprintf的应用" target="_blank">printf和sprintf的应用</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/sprintf/1.htm">sprintf</a><a class="tag" taget="_blank" href="/search/printf/1.htm">printf</a> <div><?php printf('b: %b <br>c: %c <br>d: %d <bf>f: %f', 80,80, 80, 80); echo '<br />'; printf('%0.2f <br>%+d <br>%0.2f <br>', 8, 8, 1235.456); printf('th</div> </li> <li><a href="/article/467.htm" title="config.getInitParameter" target="_blank">config.getInitParameter</a> <span class="text-muted">171815164</span> <a class="tag" taget="_blank" href="/search/parameter/1.htm">parameter</a> <div>web.xml <servlet> <servlet-name>servlet1</servlet-name> <jsp-file>/index.jsp</jsp-file> <init-param> <param-name>str</param-name> </div> </li> <li><a href="/article/594.htm" title="Ant标签详解--基础操作" target="_blank">Ant标签详解--基础操作</a> <span class="text-muted">g21121</span> <a class="tag" taget="_blank" href="/search/ant/1.htm">ant</a> <div> Ant的一些核心概念： build.xml：构建文件是以XML 文件来描述的，默认构建文件名为build.xml。 project：每个构建文</div> </li> <li><a href="/article/721.htm" title="[简单]代码片段_数据合并" target="_blank">[简单]代码片段_数据合并</a> <span class="text-muted">53873039oycg</span> <a class="tag" taget="_blank" href="/search/%E4%BB%A3%E7%A0%81/1.htm">代码</a> <div> 合并规则:删除家长phone为空的记录,若一个家长对应多个孩子,保留一条家长记录,家长id修改为phone,对应关系也要修改。 代码如下: </div> </li> <li><a href="/article/848.htm" title="java 通信技术" target="_blank">java 通信技术</a> <span class="text-muted">云端月影</span> <a class="tag" taget="_blank" href="/search/Java+%E8%BF%9C%E7%A8%8B%E9%80%9A%E4%BF%A1%E6%8A%80%E6%9C%AF/1.htm">Java 远程通信技术</a> <div>在分布式服务框架中，一个最基础的问题就是远程服务是怎么通讯的，在Java领域中有很多可实现远程通讯的技术，例如：RMI、MINA、ESB、Burlap、Hessian、SOAP、EJB和JMS等，这些名词之间到底是些什么关系呢，它们背后到底是基于什么原理实现的呢，了解这些是实现分布式服务框架的基础知识，而如果在性能上有高的要求的话，那深入了解这些技术背后的机制就是必须的了，在这篇blog中我们将来</div> </li> <li><a href="/article/975.htm" title="string与StringBuilder 性能差距到底有多大" target="_blank">string与StringBuilder 性能差距到底有多大</a> <span class="text-muted">aijuans</span> <div> 之前也看过一些对string与StringBuilder的性能分析，总感觉这个应该对整体性能不会产生多大的影响，所以就一直没有关注这块！ 由于学程序初期最先接触的string拼接，所以就一直没改变过自己的习惯！ </div> </li> <li><a href="/article/1102.htm" title="今天碰到 java.util.ConcurrentModificationException 异常" target="_blank">今天碰到 java.util.ConcurrentModificationException 异常</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/%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">多线程</a><a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a><a class="tag" taget="_blank" href="/search/IBM/1.htm">IBM</a> <div>今天改bug，其中有个实现是要对map进行循环，然后有删除操作，代码如下： Iterator<ListItem> iter = ItemMap.keySet.iterator(); while(iter.hasNext()){ ListItem it = iter.next(); //...一些逻辑操作 ItemMap.remove(it); } 结果运行报Con</div> </li> <li><a href="/article/1229.htm" title="PL/SQL的类型和JDBC操作数据库" target="_blank">PL/SQL的类型和JDBC操作数据库</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/PL%2FSQL%E8%A1%A8/1.htm">PL/SQL表</a><a class="tag" taget="_blank" href="/search/%E6%A0%87%E9%87%8F%E7%B1%BB%E5%9E%8B/1.htm">标量类型</a><a class="tag" taget="_blank" href="/search/%E6%B8%B8%E6%A0%87/1.htm">游标</a><a class="tag" taget="_blank" href="/search/PL%2FSQL%E8%AE%B0%E5%BD%95/1.htm">PL/SQL记录</a> <div>PL/SQL的标量类型: 字符,数字,时间,布尔,%type五中类型的 --标量：数据库中预定义类型的变量 --定义一个变长字符串 v_ename varchar2(10); --定义一个小数,范围 -9999.99~9999.99 v_sal number(6,2); --定义一个小数并给一个初始值为5.4 :=是pl/sql的赋值号 </div> </li> <li><a href="/article/1356.htm" title="Mockito：一个强大的用于 Java 开发的模拟测试框架实例" target="_blank">Mockito：一个强大的用于 Java 开发的模拟测试框架实例</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/mockito/1.htm">mockito</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95/1.htm">单元测试</a> <div>Mockito框架： Mockito是一个基于MIT协议的开源java测试框架。 Mockito区别于其他模拟框架的地方主要是允许开发者在没有建立“预期”时验证被测系统的行为。对于mock对象的一个评价是测试系统的测</div> </li> <li><a href="/article/1483.htm" title="精通Oracle10编程SQL(10)处理例外" target="_blank">精通Oracle10编程SQL(10)处理例外</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>/* *处理例外 */ --例外简介 --处理例外-传递例外 declare v_ename emp.ename%TYPE; begin SELECT ename INTO v_ename FROM emp where empno=&no; dbms_output.put_line('雇员名：'||v_ename); exceptio</div> </li> <li><a href="/article/1610.htm" title="【Java】Java执行远程机器上Linux命令" target="_blank">【Java】Java执行远程机器上Linux命令</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/linux%E5%91%BD%E4%BB%A4/1.htm">linux命令</a> <div>Java使用ethz通过ssh2执行远程机器Linux上命令， 封装定义Linux机器的环境信息 package com.tom; import java.io.File; public class Env { private String hostaddr; //Linux机器的IP地址 private Integer po</div> </li> <li><a href="/article/1737.htm" title="java通信之Socket通信基础" target="_blank">java通信之Socket通信基础</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/socket/1.htm">socket</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%8D%8F%E8%AE%AE/1.htm">网络协议</a> <div>正处于网络环境下的两个程序，它们之间通过一个交互的连接来实现数据通信。每一个连接的通信端叫做一个Socket。一个完整的Socket通信程序应该包含以下几个步骤： ①创建Socket； ②打开连接到Socket的输入输出流； ④按照一定的协议对Socket进行读写操作； ④关闭Socket。 Socket通信分两部分：服务器端和客户端。服务器端必须优先启动，然后等待soc</div> </li> <li><a href="/article/1864.htm" title="angular.bind" target="_blank">angular.bind</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/angular.bind/1.htm">angular.bind</a><a class="tag" taget="_blank" href="/search/AngularJS+API/1.htm">AngularJS API</a><a class="tag" taget="_blank" href="/search/bind/1.htm">bind</a> <div>angular.bind 描述： 上下文，函数以及参数动态绑定，返回值为绑定之后的函数. 其中args是可选的动态参数，self在fn中使用this调用。 使用方法： angular.bind(se</div> </li> <li><a href="/article/1991.htm" title="java-13个坏人和13个好人站成一圈，数到7就从圈里面踢出一个来，要求把所有坏人都给踢出来，所有好人都留在圈里。请找出初始时坏人站的位置。" target="_blank">java-13个坏人和13个好人站成一圈，数到7就从圈里面踢出一个来，要求把所有坏人都给踢出来，所有好人都留在圈里。请找出初始时坏人站的位置。</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> import java.util.ArrayList; import java.util.List; public class KickOutBadGuys { /** * 题目：13个坏人和13个好人站成一圈，数到7就从圈里面踢出一个来，要求把所有坏人都给踢出来，所有好人都留在圈里。请找出初始时坏人站的位置。 * Maybe you can find out </div> </li> <li><a href="/article/2118.htm" title="Redis.conf配置文件及相关项说明（自查备用）" target="_blank">Redis.conf配置文件及相关项说明（自查备用）</a> <span class="text-muted">Kai_Ge</span> <a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a> <div> Redis.conf配置文件及相关项说明 # Redis configuration file example # Note on units: when memory size is needed, it is possible to specifiy # it in the usual form of 1k 5GB 4M and so forth: # </div> </li> <li><a href="/article/2245.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> 真不好意思,各位朋友...博客再次更新... 节点数量太少,网络的分析和处理能力肯定不足,在面对机器人控制的需求方面,显得力不从心.... 但是,节点数太多,对拓扑数据处理的要求又很高,设计目标也很高,实现起来难度颇大... </div> </li> <li><a href="/article/2372.htm" title="记录一些常用的函数" target="_blank">记录一些常用的函数</a> <span class="text-muted">dai_lm</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> public static String convertInputStreamToString(InputStream is) { StringBuilder result = new StringBuilder(); if (is != null) try { InputStreamReader inputReader = new InputStreamRead</div> </li> <li><a href="/article/2499.htm" title="Hadoop中小规模集群的并行计算缺陷" target="_blank">Hadoop中小规模集群的并行计算缺陷</a> <span class="text-muted">datamachine</span> <a class="tag" taget="_blank" href="/search/mapreduce/1.htm">mapreduce</a><a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a><a class="tag" taget="_blank" href="/search/%E5%B9%B6%E8%A1%8C%E8%AE%A1%E7%AE%97/1.htm">并行计算</a> <div>注：写这篇文章的初衷是因为Hadoop炒得有点太热，很多用户现有数据规模并不适用于Hadoop，但迫于扩容压力和去IOE（Hadoop的廉价扩展的确非常有吸引力）而尝试。尝试永远是件正确的事儿，但有时候不用太突进，可以调优或调需求，发挥现有系统的最大效用为上策。 -----------------------------------------------------------------</div> </li> <li><a href="/article/2626.htm" title="小学4年级英语单词背诵第二课" target="_blank">小学4年级英语单词背诵第二课</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>egg 蛋 twenty 二十 any 任何 well 健康的，好 twelve 十二 farm 农场 every 每一个 back 向后，回 fast 快速的 whose 谁的 much 许多 flower 花 watch 手表 very 非常，很 sport 运动 Chinese 中国的 </div> </li> <li><a href="/article/2753.htm" title="自己实践了github的webhooks, linux上面的权限需要注意" target="_blank">自己实践了github的webhooks, linux上面的权限需要注意</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/github/1.htm">github</a><a class="tag" taget="_blank" href="/search/webhook/1.htm">webhook</a> <div>环境, 阿里云服务器 1. 本地创建项目, push到github服务器上面 2. 生成www用户的密钥 sudo -u www ssh-keygen -t rsa -C "xxx@xx.com" 3. 将密钥添加到github帐号的SSH_KEYS里面 3. 用www用户执行克隆, 源使</div> </li> <li><a href="/article/2880.htm" title="Java冒泡排序" target="_blank">Java冒泡排序</a> <span class="text-muted">蕃薯耀</span> <a class="tag" taget="_blank" href="/search/%E5%86%92%E6%B3%A1%E6%8E%92%E5%BA%8F/1.htm">冒泡排序</a><a class="tag" taget="_blank" href="/search/Java%E5%86%92%E6%B3%A1%E6%8E%92%E5%BA%8F/1.htm">Java冒泡排序</a><a class="tag" taget="_blank" href="/search/Java%E6%8E%92%E5%BA%8F/1.htm">Java排序</a> <div>冒泡排序 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2015年6月23日 10:40:14 星期二 http://fanshuyao.iteye.com/</div> </li> <li><a href="/article/3007.htm" title="Excle读取数据转换为实体List【基于apache-poi】" target="_blank">Excle读取数据转换为实体List【基于apache-poi】</a> <span class="text-muted">hanqunfeng</span> <a class="tag" taget="_blank" href="/search/apache/1.htm">apache</a> <div>1.依赖apache-poi 2.支持xls和xlsx 3.支持按属性名称绑定数据值 4.支持从指定行、列开始读取 5.支持同时读取多个sheet 6.具体使用方式参见org.cpframework.utils.excelreader.CP_ExcelReaderUtilTest.java 比如： Str</div> </li> <li><a href="/article/3134.htm" title="3个处于草稿阶段的Javascript API介绍" target="_blank">3个处于草稿阶段的Javascript API介绍</a> <span class="text-muted">jackyrong</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a> <div>原文： http://www.sitepoint.com/3-new-javascript-apis-may-want-follow/?utm_source=html5weekly&utm_medium=email 本文中，介绍3个仍然处于草稿阶段，但应该值得关注的Javascript API. 1) Web Alarm API &</div> </li> <li><a href="/article/3261.htm" title="6个创建Web应用程序的高效PHP框架" target="_blank">6个创建Web应用程序的高效PHP框架</a> <span class="text-muted">lampcy</span> <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/PHP/1.htm">PHP</a> <div>以下是创建Web应用程序的PHP框架，有coder bay网站整理推荐： 1. CakePHP CakePHP是一个PHP快速开发框架，它提供了一个用于开发、维护和部署应用程序的可扩展体系。CakePHP使用了众所周知的设计模式，如MVC和ORM，降低了开发成本，并减少了开发人员写代码的工作量。 2. CodeIgniter CodeIgniter是一个非常小且功能强大的PHP框架，适合需</div> </li> <li><a href="/article/3388.htm" title="评"救市后中国股市新乱象泛起"谣言" target="_blank">评"救市后中国股市新乱象泛起"谣言</a> <span class="text-muted">nannan408</span> <div>首先来看百度百家一位易姓作者的新闻： 三个多星期来股市持续暴跌，跌得投资者及上市公司都处于极度的恐慌和焦虑中，都要寻找自保及规避风险的方式。面对股市之危机，政府突然进入市场救市，希望以此来重建市场信心，以此来扭转股市持续暴跌的预期。而政府进入市场后，由于市场运作方式发生了巨大变化，投资者及上市公司为了自保及为了应对这种变化，中国股市新的乱象也自然产生。 首先，中国股市这两天</div> </li> <li><a href="/article/3515.htm" title="页面全屏遮罩的实现 方式" target="_blank">页面全屏遮罩的实现 方式</a> <span class="text-muted">Rainbow702</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/%E9%81%AE%E7%BD%A9/1.htm">遮罩</a><a class="tag" taget="_blank" href="/search/mask/1.htm">mask</a> <div>之前做了一个页面，在点击了某个按钮之后，要求页面出现一个全屏遮罩，一开始使用了position:absolute来实现的。当时因为画面大小是固定的，不可以resize的，所以，没有发现问题。 最近用了同样的做法做了一个遮罩，但是画面是可以进行resize的，所以就发现了一个问题，当画面被reisze到浏览器出现了滚动条的时候，就发现，用absolute 的做法是有问题的。后来改成fixed定位就</div> </li> <li><a href="/article/3642.htm" title="关于angularjs的点滴" target="_blank">关于angularjs的点滴</a> <span class="text-muted">tntxia</span> <a class="tag" taget="_blank" href="/search/AngularJS/1.htm">AngularJS</a> <div> angular是一个新兴的JS框架，和以往的框架不同的事，Angularjs更注重于js的建模，管理，同时也提供大量的组件帮助用户组建商业化程序，是一种值得研究的JS框架。 Angularjs使我们可以使用MVC的模式来写JS。Angularjs现在由谷歌来维护。 这里我们来简单的探讨一下它的应用。 首先使用Angularjs我</div> </li> <li><a href="/article/3769.htm" title="Nutz--->>反复新建ioc容器的后果" target="_blank">Nutz--->>反复新建ioc容器的后果</a> <span class="text-muted">xiaoxiao1992428</span> <a class="tag" taget="_blank" href="/search/DAO/1.htm">DAO</a><a class="tag" taget="_blank" href="/search/mvc/1.htm">mvc</a><a class="tag" taget="_blank" href="/search/IOC/1.htm">IOC</a><a class="tag" taget="_blank" href="/search/nutz/1.htm">nutz</a> <div>问题： public class DaoZ { public static Dao dao() { // 每当需要使用dao的时候就取一次 Ioc ioc = new NutIoc(new JsonLoader("dao.js")); return ioc.get(</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>