HTML5简介
HTML5是HTML最新的修订版本，于2014年10月由万维联盟（W3C）完成标准指定。
HTML5的设计目的是为了在移动设备上支持多媒体，并且完全支持CSS3
HTML5新元素
新多媒体元素
新表单元素
新的语义和结构元素
HTML5提供了新的元素来创建更好的页面结构
已移除的元素
以下的 HTML 4.01 元素在HTML5中已经被删除
</li> <li><strike></li> <li><tt></li> </ul> <h2 class="wp-block-heading">HTML5 Canvas</h2> <p><canvas> 标签定义图形，比如图表和其他图像，您必须使用脚本来绘制图形。</p> <p><strong>什么是canvas？</strong></p> <blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"> <p><canvas> - 元素用于图形的绘制，通过脚本（一般是JavaScript）来完成</p> <p><canvas> - 标签只是图形容器，您必须使用脚本来绘制图形。</p> <p>你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。</p> </blockquote> <p><strong>创建一个画布</strong></p> <pre class="wp-block-code"><code><canvas id="myCanvas" width="200" height="100"></canvas> <!-- 此标签需要指定 id 属性和 width 与 height 属性 --></code></pre> <p><em>注意：默认情况下 <canvas> 元素没有边框和内容</em></p> <p><em><strong>使用 JavaScript 来绘制图像</strong></em></p> <blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"> <p><em>canvas 元素本身事没有绘图能力的，需要由Javascipt来绘图</em></p> </blockquote> <pre class="wp-block-code"><code>// 绘制一个矩形 var c=document.getElementById("myCanvas"); // 找到 <canvas> 元素 var ctx=c.getContext("2d"); // 创建 context 对象 ctx.fillStyle="#FF0000"; // 设置fillStyle属性 ctx.fillRect(0,0,150,75); // fileRect方法定义了举行当前的填充方式</code></pre> <p><em>getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法</em></p> <p><strong>Canvas 坐标</strong></p> <blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"> <p>canvas - 是一个二维网格</p> <p>canvas - 的左上角坐标为(0,0)</p> <p>上面的 fillRect(0,0,150,75) 意思是：在画布上(0,0)的位置为起始点，绘制 150x75 的矩形</p> </blockquote> <p><strong>Canvas 路径</strong></p> <p>使用Canvas画直线，需要使用两个方法：</p> <ul class="wp-block-list"> <li>moveTo(x,y) 定义线条开始坐标</li> <li>lineTo(x,y) 定义线条结束坐标</li> </ul> <p>再加上一个启动绘制的方法 stroke</p> <pre class="wp-block-code"><code>// 绘制直线 var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.moveTo(0,0); // moveTo(x,y) 定义线条开始坐标 ctx.lineTo(200,100); // lineTo(x,y) 定义线条结束坐标 ctx.stroke(); // 使用 stroke 方法来绘制线条</code></pre> <p>使用Canvas画圆，需要使用一个方法：</p> <ul class="wp-block-list"> <li>arc(x, y, radius, startAngle, endAngle, counterclockwise) 定义一个中心位置在(x,y)，半径为radius，弧度为startAngle，结束弧度为counterclockwise的圆（从三点钟方向开始绘制）</li> </ul> <pre class="wp-block-code"><code>//绘制圆形 var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.beginPath(); // 创建一个新的线条 ctx.arc(95,50,40,0,2*Math.PI); //画一个中心位置在(95,50)，半径为40，弧度为0，结束弧度为2PI的圆 ctx.stroke();</code></pre> <p><strong>Canvas 文本</strong></p> <p>使用canvas绘制文本，需要使用的属性和方法</p> <blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"> <p>font 定义地体</p> <p>fillText(text,x,y) - 在convas上绘制实心的文本</p> <p>strokeText(text,x,y) - 在canvas上绘制空心的文本</p> </blockquote> <pre class="wp-block-code"><code>//绘制文本 var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="30px Arial"; ctx.strokeText("Hello World",10,50);</code></pre> <p><strong>Canvas 渐变</strong></p> <p>渐变可以填充在矩形，圆形，线条，文本等等，各种形状都可以自己定义不同的颜色</p> <blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"> <p>以下有两种不同的方法来设置Canvas渐变：</p> <ul class="wp-block-list"> <li>createLinearGradient(<em>x,y,x1,y1</em>) - 创建线性渐变</li> <li>createRadialGradient(<em>x,y,r,x1,y1,r1</em>) - 创建一个径向/圆渐变</li> </ul> <p>当我们使用渐变对象，必须使用两种或两种以上的停止颜色。</p> <p>addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1</p> <p>使用渐变，设置fillStyle或strokeStyle的值为 渐变，然后绘制形状，如矩形，文本，或一条线。</p> </blockquote> <pre class="wp-block-code"><code>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> <p><strong>Canvas 图像</strong></p> <blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"> <p>把一幅图像放置到画布上，使用以下方法</p> <ul class="wp-block-list"> <li>drawImage(image,x,y)</li> </ul> </blockquote> <pre class="wp-block-code"><code>var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var img=document.getElementById("scream"); ctx.drawImage(img,10,10);</code></pre> <h2 class="wp-block-heading">HTML5 SVG</h2> <blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"> <p>SVG 定义为可缩放矢量图形。</p> <p>HTML5 支持内联 SVG。</p> <p>HTML <strong><svg></strong> 元素是 SVG 图形的容器。</p> <p>SVG 有多种绘制路径、框、圆、文本和图形图像的方法。</p> </blockquote> <p><strong>什么是SVG</strong></p> <ul class="wp-block-list"> <li>SVG 指可伸缩矢量图形 (Scalable Vector Graphics)</li> <li>SVG 用于定义用于网络的基于矢量的图形</li> <li>SVG 使用 XML 格式定义图形</li> <li>SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失</li> <li>SVG 是万维网联盟的标准</li> </ul> <p><strong>SVG优势</strong></p> <p>与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：</p> <ul class="wp-block-list"> <li>SVG 图像可通过文本编辑器来创建和修改</li> <li>SVG 图像可被搜索、索引、脚本化或压缩</li> <li>SBG 是可伸缩的</li> <li>SVG 图像可在任何分辨率下被高质量地打印</li> <li>SVG 可在图像质量不下降的情况下被放大</li> </ul> <p><strong>把 SVG 直接嵌入 HTML 页面</strong></p> <p>在 HTML5 中，您能够将 SVG 元素直接嵌入 HTML 页面中</p> <pre class="wp-block-code"><code><!-- 嵌入一个边框为黑色，填充为红色的圆形 --> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> </svg></code></pre> <p><strong>SVG 与 Canvas 两者间的区别</strong></p> <blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"> <p>SVG 是一种使用 XML 描述 2D 图形的语言。</p> <p>Canvas 通过 JavaScript 来绘制 2D 图形。</p> <p>SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。</p> <p>在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。</p> <p>Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。</p> </blockquote> <p><strong>Canvas 与 SVG 的比较</strong></p> <p>下表列出了 canvas 与 SVG 之间的一些不同之处</p> <figure class="wp-block-table"><table><tbody><tr><th>Canvas</th> <th>SVG</th></tr> <tr><th>依赖分辨率不支持事件处理器弱的文本渲染能力能够以 .png 或 .jpg 格式保存结果图像最适合图像密集型的游戏，其中的许多对象会被频繁重绘</th> <th>不依赖分辨率支持事件处理器最适合带有大型渲染区域的应用程序（比如谷歌地图）复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）不适合游戏应用</th></tr></tbody></table></figure> <h2 class="wp-block-heading">HTML5 MathML</h2> <p>HTML5 可以在文档中使用 MathML 元素，对应的标签是 <math>...</math> 。</p> <p>MathML 是数学标记语言，是一种基于XML（标准通用标记语言的子集）的标准，用来在互联网上书写数学符号和公式的置标语言。</p> <p><strong>实例</strong></p> <pre class="wp-block-code"><code><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <math xmlns="http://www.w3.org/1998/Math/MathML"> <mrow> <msup><mi>a</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>b</mi><mn>2</mn></msup> <mo>=</mo> <msup><mi>c</mi><mn>2</mn></msup> </mrow> </math> </body> </html></code></pre> <p><strong>效果</strong></p> <figure class="wp-block-image"><img decoding="async" src="api/images/G3x56np99aOV/image.png" alt=""></figure> <h2 class="wp-block-heading">HTML5 拖放（Drag 和 Drop）</h2> <p><strong>拖放</strong></p> <blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"> <p>拖放是一种常见的特性，即抓取对象以后拖到另一个位置。</p> <p>在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。</p> </blockquote> <pre class="wp-block-code"><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 decoding="async" loading="lazy" id="drag1" src="/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69"> </body> </html> </code></pre> <p><strong>设置元素为可拖放</strong></p> <p>为了是元素可拖动，把 draggable 属性设置为 true</p> <pre class="wp-block-code"><code><img draggable="true"></code></pre> <p><strong>拖放什么 - ondragstart 和 setData()</strong></p> <p>然后，规定当元素被拖动时，会发生什么。</p> <p>在上面的例子中，ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。</p> <p>dataTransfer.setData() 方法设置被拖数据的数据类型和值</p> <pre class="wp-block-code"><code>function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); }</code></pre> <p>Text 是一个 DOMString 表示要添加到 drag object 的拖动数据的类型。值是可拖动元素的 id ("drag1")。</p> <p><strong>放到何处 - ondragover</strong></p> <p>ondragover 事件规定在何处放置被拖动的数据。</p> <p>默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。</p> <p>这要通过调用 ondragover 事件的 event.preventDefault() 方法</p> <pre class="wp-block-code"><code>event.preventDefault()</code></pre> <p><strong>进行放置 - ondrop</strong></p> <p>当放置被拖数据时，会发生 drop 事件。</p> <p>在上面的例子中，ondrop 属性调用了一个函数，drop(event)</p> <pre class="wp-block-code"><code>function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); }</code></pre> <p>代码解释：</p> <ul class="wp-block-list"> <li>调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）</li> <li>通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。</li> <li>被拖数据是被拖元素的 id ("drag1")</li> <li>把被拖元素追加到放置元素（目标元素）中</li> </ul> <h2 class="wp-block-heading">HTML5 Geolocation（地理定位）</h2> <p>HTML5 Geolocation（地理定位）用于定位用户的位置</p> <p><strong>定位用户的位置</strong></p> <p>HTML5 Geolocation API 用于获得用户的地理位置。</p> <p>鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的</p> <p><strong>HTML5 - 使用地理定位</strong></p> <p>使用 getCurrentPosition() 方法来获得用户的位置</p> <p><strong>getCurrentPosition() 方法 - 返回数据</strong></p> <figure class="wp-block-table"><table><tbody><tr><th>属性</th> <th>描述</th></tr> <tr><th>coords.latitude</th> <th>十进制数的纬度</th></tr> <tr><th>coords.longitude</th> <th>十进制数的经度</th></tr> <tr><th>coords.accuracy</th> <th>位置精度</th></tr> <tr><th>coords.altitude</th> <th>海拔，海平面以上以米计</th></tr> <tr><th>coords.altitudeAccuracy</th> <th>位置的海拔精度</th></tr> <tr><th>coords.heading</th> <th>方向，从正北开始以度计</th></tr> <tr><th>coords.speed</th> <th>速度，以米/每秒计</th></tr> <tr><th>timestamp</th> <th>响应的日期/时间</th></tr></tbody></table></figure> <h2 class="wp-block-heading">HTML5 Video（视频）</h2> <p>HTML5 提供了播放视频文件的标准</p> <p><strong><video> 标签的使用</strong></p> <pre class="wp-block-code"><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> <p><em>注：<video> 元素中可以使用多个<source>元素，浏览器将会使用第一个被检索到的<source></em></p> <p><strong>HTML5 <video> - 使用 DOM 进行控制</strong></p> <blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"> <p>HTML5 <video> 和 <audio> 元素同样拥有方法、属性和事件。</p> <p><video> 和 <audio>元素的方法、属性和事件可以使用JavaScript进行控制.</p> <p>其中的方法用于播放、暂停以及加载等。其中的属性（比如时长、音量等）可以被读取或设置。其中的 DOM 事件能够通知您，比方说，<video> 元素开始播放、已暂停，已停止，等等。</p> </blockquote> <p><strong>HTML5 Video 标签</strong></p> <figure class="wp-block-table"><table><tbody><tr><th>标签</th> <th>描述</th></tr> <tr><th><a href="https://www.runoob.com/tags/tag-video.html"><u><video></u></a></th> <th>定义一个视频</th></tr> <tr><th><a href="https://www.runoob.com/tags/tag-source.html"><u><source></u></a></th> <th>定义多种媒体资源,比如 <video> 和<audio></th></tr> <tr><th><a href="https://www.runoob.com/tags/tag-track.html"><u><track></u></a></th> <th>定义在媒体播放器文本轨迹</th></tr></tbody></table></figure> <h2 class="wp-block-heading">HTML5 Audio（音频）</h2> <p>HTML5 提供了播放音频文件的标准</p> <p><strong><audio> 标签的使用</strong></p> <pre class="wp-block-code"><code><audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> 您的浏览器不支持 audio 元素。 </audio></code></pre> <p><em>注：<audio> 元素中可以使用多个<source>元素，浏览器将会使用第一个被检索到的<source></em></p> <p><em><strong>HTML5 Audio 标签</strong></em></p> <figure class="wp-block-table"><table><tbody><tr><th>标签</th> <th>描述</th></tr> <tr><th><a href="https://www.runoob.com/tags/tag-audio.html"><u><audio></u></a></th> <th>定义了声音内容</th></tr> <tr><th><a href="https://www.runoob.com/tags/tag-source.html"><u><source></u></a></th> <th>规定了多媒体资源, 可以是多个，在 <video> 与 <audio>标签中使用</th></tr></tbody></table></figure> <h2 class="wp-block-heading">HTML5 Input 类型</h2> <p><strong>HTML5 新的 Input 类型</strong></p> <p>HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。</p> <p>本章全面介绍这些新的输入类型：</p> <ul class="wp-block-list"> <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</li> </ul> <p><em>注意:并不是所有的主流浏览器都支持新的input类型，不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持，仍然可以显示为常规的文本域。</em></p> <p><strong>Input 类型：color</strong></p> <p>color 类型用在input字段主要用于选取颜色</p> <pre class="wp-block-code"><code>选择你喜欢的颜色: <input type="color" name="favcolor"></code></pre> <p><strong>Input 类型：date</strong></p> <p>date 类型允许你从一个日期选择器选择一个日期</p> <pre class="wp-block-code"><code>生日: <input type="date" name="bday"></code></pre> <p><strong>Input 类型：datetime</strong></p> <p>datetime 类型允许你选择一个日期（UTC 时间）</p> <pre class="wp-block-code"><code>生日 (日期和时间): <input type="datetime" name="bdaytime"></code></pre> <p><strong>Input 类型：datetime-local</strong></p> <p>datetime-local 类型允许你选择一个日期和时间 (无时区)</p> <pre class="wp-block-code"><code>生日 (日期和时间): <input type="datetime-local" name="bdaytime"></code></pre> <p><strong>Input 类型：email</strong></p> <p>email 类型用于应该包含 e-mail 地址的输入域</p> <pre class="wp-block-code"><code>E-mail: <input type="email" name="email"></code></pre> <p><strong>Input 类型：month</strong></p> <p>month 类型允许你选择一个月份</p> <pre class="wp-block-code"><code>生日 (月和年): <input type="month" name="bdaymonth"></code></pre> <p><strong>Input 类型：number</strong></p> <p>number 类型用于应该包含数值的输入域，您还能够设定对所接受的数字的限定</p> <pre class="wp-block-code"><code>数量 ( 1 到 5 之间 ): <input type="number" name="quantity" min="1" max="5"></code></pre> <p>使用下面的属性来规定对数字类型的限定</p> <figure class="wp-block-table"><table><tbody><tr><th>属性</th> <th>描述</th></tr> <tr><th>disabled</th> <th>规定输入字段是禁用的</th></tr> <tr><th>max</th> <th>规定允许的最大值</th></tr> <tr><th>maxlength</th> <th>规定输入字段的最大字符长度</th></tr> <tr><th>min</th> <th>规定允许的最小值</th></tr> <tr><th>pattern</th> <th>规定用于验证输入字段的模式</th></tr> <tr><th>readonly</th> <th>规定输入字段的值无法修改</th></tr> <tr><th>required</th> <th>规定输入字段的值是必需的</th></tr> <tr><th>size</th> <th>规定输入字段中的可见字符数</th></tr> <tr><th>step</th> <th>规定输入字段的合法数字间隔</th></tr> <tr><th>value</th> <th>规定输入字段的默认值</th></tr></tbody></table></figure> <p><strong>Input 类型：search</strong></p> <p>search 类型用于搜索域，比如站点搜索或 Google 搜索</p> <pre class="wp-block-code"><code>Search Google: <input type="search" name="googlesearch"></code></pre> <p><strong>Input 类型：tel</strong></p> <p>tel 类型用于输入电话号码</p> <pre class="wp-block-code"><code>电话号码: <input type="tel" name="usrtel"></code></pre> <p><strong>Input 类型：time</strong></p> <p>time 类型允许你选择一个时间</p> <pre class="wp-block-code"><code>选择时间: <input type="time" name="usr_time"></code></pre> <p><strong>Input 类型：url</strong></p> <p>url 类型用于应该包含 URL 地址的输入域，在提交表单时，会自动验证 url 域的值</p> <pre class="wp-block-code"><code>添加您的主页: <input type="url" name="homepage"></code></pre> <p><strong>Input 类型：week</strong></p> <p>week 类型允许你选择周和年</p> <pre class="wp-block-code"><code>选择周: <input type="week" name="week_year"></code></pre> <h2 class="wp-block-heading">HTML5 表单元素</h2> <p><strong>HTML5 新的表单元素</strong></p> <p>HTML5 有以下新的表单元素:</p> <ul class="wp-block-list"> <li><datalist></li> <li><keygen></li> <li><output></li> </ul> <p><strong>HTML5 <datalist> 元素</strong></p> <blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"> <p><datalist> 元素规定输入域的选项列表。</p> <p><datalist> 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：</p> </blockquote> <pre class="wp-block-code"><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> <p><strong>HTML5 <keygen> 元素</strong></p> <blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"> <p><keygen> 元素的作用是提供一种验证用户的可靠方法。</p> <p><keygen>标签规定用于表单的密钥对生成器字段。</p> <p>当提交表单时，会生成两个键，一个是私钥，一个公钥。</p> <p>私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）</p> </blockquote> <pre class="wp-block-code"><code><form action="demo_keygen.asp" method="get"> 用户名: <input type="text" name="usr_name"> 加密: <keygen name="security"> <input type="submit"> </form></code></pre> <p><strong>HTML5 <output> 元素</strong></p> <blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"> <p><output> 元素用于不同类型的输出，比如计算或脚本输出</p> </blockquote> <pre class="wp-block-code"><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> <h2 class="wp-block-heading">HTML5 表单属性</h2> <p><strong>HTML5 新的表单属性</strong></p> <p>HTML5 的 <form> 和 <input>标签添加了几个新属性.</p> <p><form>新属性：</p> <ul class="wp-block-list"> <li>autocomplete</li> <li>novalidate</li> </ul> <p><input>新属性：</p> <ul class="wp-block-list"> <li>autocomplete</li> <li>autofocus</li> <li>form</li> <li>formaction</li> <li>formenctype</li> <li>formmethod</li> <li>formnovalidate</li> <li>formtarget</li> <li>height 与 width</li> <li>list</li> <li>min 与 max</li> <li>multiple</li> <li>pattern (regexp)</li> <li>placeholder</li> <li>required</li> <li>step</li> </ul> <p><strong><form> / <input> autocomplete 属性</strong></p> <blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"> <p>autocomplete 属性规定 form 或 input 域应该拥有自动完成功能</p> <p>当用户在该域中开始输入时，浏览器应该在该域中显示填写的选项</p> <p><em>提示：autocomplete 属性可能在 form 元素中是开启的，而在 input 元素中时关闭的</em></p> <p><em>注意：autocomplete 适用于 <form> 标签，以及以下类型的 <input> 标签：text, search, url, telephone, email, password, datepickers, range 以及 color</em></p> </blockquote> <pre class="wp-block-code"><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> <p><strong><form> novalidate 属性</strong></p> <blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"> <p>novalidate 属性是一个 boolean（布尔）属性</p> <p>novalidate 属性规定在提交表单时不应该验证 form 或 input 域</p> </blockquote> <pre class="wp-block-code"><code><form action="demo-form.php" novalidate> E-mail: <input type="email" name="user_email"> <input type="submit"> </form></code></pre> <p><strong><form> autofocus属性</strong></p> <blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"> <p>autofocus 属性是一个布尔属性</p> <p>autofocus 属性规定在页面加载时，域自动地获得焦点</p> </blockquote> <pre class="wp-block-code"><code>First name:<input type="text" name="fname" autofocus></code></pre> <p><strong><input> form 属性</strong></p> <blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"> <p>form 属性规定输入域所属的一个或多个表单</p> <p>提示:如需引用一个以上的表单，请使用空格分隔的列表</p> </blockquote> <pre class="wp-block-code"><code><!-- 位于form表单外的 input 字段引用了 HTML form (该 input 表单仍然属于form表单的一部分) --> <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> <p><strong><inut> formaction 属性</strong></p> <blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"> <p>formaction 属性用于描述表单提交的URL地址</p> <p>formaction 属性会覆盖 <form> 元素中的action属性</p> <p>注意: formaction 属性用于 type="submit" 和 type="image".</p> </blockquote> <pre class="wp-block-code"><code><!-- 以下HTMLform表单包含了两个不同地址的提交按钮 --> <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> <p><strong><input> formenctype 属性</strong></p> <blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"> <p>formenctype 属性描述了表单提交到服务器的数据编码 (只对form表单中 method="post" 表单)</p> <p>formenctype 属性覆盖 form 元素的 enctype 属性。</p> <p>注意：该属性与 type="submit" 和 type="image" 配合使用</p> </blockquote> <pre class="wp-block-code"><code><!-- 第一个提交按钮以默认编码发送表单数据，第二个提交按钮以 "multipart/form-data" 编码格式发送表单数据 --> <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> <p><strong><input> formmethod 属性</strong></p> <blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"> <p>formmethod 属性定义了表单提交的方式。</p> <p>formmethod 属性覆盖了 <form> 元素的 method 属性。</p> <p>注意: 该属性可以与 type="submit" 和 type="image" 配合使用。</p> </blockquote> <pre class="wp-block-code"><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> <p><strong><input> formnovalidate 属性</strong></p> <blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"> <p>novalidate 属性是一个 boolean 属性</p> <p>novalidate属性描述了 <input> 元素在表单提交时无需被验证</p> <p>formnovalidate 属性会覆盖 <form> 元素的novalidate属性</p> <p>注意: formnovalidate 属性与 type="submit" 一起使用</p> </blockquote> <pre class="wp-block-code"><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> <p><strong><input> formtarget 属性</strong></p> <blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"> <p>formtarget 属性指定一个名称或一个关键字来指明表单提交数据接收后的展示。</p> <p>formtarget 属性覆盖 <form>元素的target属性.</p> <p>注意: formtarget 属性与 type="submit" 和 type="image" 配合使用。</p> </blockquote> <pre class="wp-block-code"><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> <p><strong><input> height 和 width 属性</strong></p> <blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"> <p>height 和 width 属性规定用于 image 类型的 <input> 标签的图像高度和宽度。</p> <p>注意：height 和 width 属性只适用于 image 类型的<input> 标签。</p> <p>提示：图像通常会同时指定高度和宽度属性。如果图像设置高度和宽度，图像所需的空间 在加载页时会被保留。如果没有这些属性， 浏览器不知道图像的大小，并不能预留 适当的空间。图片在加载过程中会使页面布局效果改变 （尽管图片已加载）</p> </blockquote> <pre class="wp-block-code"><code><!-- 定义了一个图像提交按钮, 使用了 height 和 width 属性 --> <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48"></code></pre> <p><strong><input> list 属性</strong></p> <blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"> <p>list 属性规定输入域的 datalist。datalist 是输入域的选项列表</p> </blockquote> <pre class="wp-block-code"><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> <p><strong><input> min 和 max 属性</strong></p> <blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"> <p>min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）</p> <p>注意: min、max 和 step 属性适用于以下类型的 <input> 标签：date pickers、number 以及 range</p> </blockquote> <pre class="wp-block-code"><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> <p><strong><input> multiple 属性</strong></p> <blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"> <p>multiple 属性是一个 boolean 属性</p> <p>multiple 属性规定<input> 元素中可选择多个值</p> <p>注意: multiple 属性适用于以下类型的 <input> 标签：email 和 file</p> </blockquote> <pre class="wp-block-code"><code>Select images: <input type="file" name="img" multiple></code></pre> <p><strong><inut> pattern 属性</strong></p> <blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"> <p>pattern 属性描述了一个正则表达式用于验证 <input> 元素的值。</p> <p>注意：pattern 属性适用于以下类型的 <input> 标签: text, search, url, tel, email, 和 password。</p> </blockquote> <pre class="wp-block-code"><code><input type="text" name="fname" placeholder="First name"></code></pre> <p><strong><input> required 属性</strong></p> <blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"> <p>required 属性是一个 boolean 属性</p> <p>required 属性规定必须在提交之前填写输入域（不能为空）</p> <p>注意:required 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file</p> </blockquote> <pre class="wp-block-code"><code>Username: <input type="text" name="usrname" required></code></pre> <p><strong><input> step 属性</strong></p> <blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"> <p>step 属性为输入域规定合法的数字间隔</p> <p>如果 step="3"，则合法的数是 -3,0,3,6 等</p> <p>提示： step 属性可以与 max 和 min 属性创建一个区域值</p> <p>注意: step 属性与以下type类型一起使用: number, range, date, datetime, datetime-local, month, time 和 week</p> </blockquote> <pre class="wp-block-code"><code><!-- 规定input step 步长为3 --> <input type="number" name="points" step="3"></code></pre> <h2 class="wp-block-heading">HTML5 语义元素</h2> <blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"> <p>语义= 意义</p> <p>语义元素 = 有意义的元素</p> </blockquote> <p><strong>什么是语义元素</strong></p> <blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"> <p>一个语义元素能够清楚的描述其意义给浏览器和开发者</p> <p>无语义 元素实例: <div> 和 <span> - 无需考虑内容</p> <p>语义元素实例: <form>, <table>, and <img> 清楚的定义了它的内容</p> </blockquote> <p><strong>HTML5 中新的语义元素</strong></p> <blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"> <p>许多现有网站都包含以下HTML代码： <div id="nav">, <div class="header">, 或者 <div id="footer">, 来指明导航链接, 头部, 以及尾部</p> </blockquote> <p>HTML5 提供了新的语义元素来明确一个web页面的不同部分</p> <ul class="wp-block-list"> <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> <figure class="wp-block-image size-full"><a href="https://www.nilcloud.link/wp-content/uploads/2023/03/image-1.jpg"><div class='fancybox-wrapper lazyload-container-unload' data-fancybox='post-images' href='https://www.nilcloud.link/wp-content/uploads/2023/03/image-1.jpg'><img class="lazyload lazyload-style-1" src="data:image/svg+xml;base64,PCEtLUFyZ29uTG9hZGluZy0tPgo8c3ZnIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjZmZmZmZmMDAiPjxnPjwvZz4KPC9zdmc+" fetchpriority="high" decoding="async" width="500" height="369" data-original="https://www.nilcloud.link/wp-content/uploads/2023/03/image-1.jpg" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" alt="" class="wp-image-660" sizes="(max-width: 500px) 100vw, 500px" /></div></a></figure> <p><strong>HTML5 <section> 元素</strong></p> <blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"> <p><section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分</p> </blockquote> <pre class="wp-block-code"><code><section> <h1>WWF</h1> <p>The World Wide Fund for Nature (WWF) is....</p> </section></code></pre> <p><strong>HTML5 <article> 元素</strong></p> <blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"> <p><article> 标签定义独立的内容</p> </blockquote> <pre class="wp-block-code"><code><article> <h1>Internet Explorer 9</h1> <p>Windows Internet Explorer 9(缩写为 IE9 )在2011年3月14日21:00 发布。</p> </article></code></pre> <p><strong>HTML5 <nav> 元素</strong></p> <blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"> <p><nav> 标签定义导航链接的部分，但不是所有链接都包含在 <nav> 元素中</p> </blockquote> <pre class="wp-block-code"><code><nav> <a href="/html/">HTML</a> | <a href="/css/">CSS</a> | <a href="/js/">JavaScript</a> | <a href="/jquery/">jQuery</a> </nav></code></pre> <p><strong>HTML5 <aside> 元素</strong></p> <blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"> <p><aside> 标签定义页面主区域内容之外的内容（比如侧边栏）</p> <p>aside 标签的内容应与主区域的内容相关</p> </blockquote> <pre class="wp-block-code"><code><p>My family and I visited The Epcot center this summer.</p> <aside> <h4>Epcot Center</h4> <p>The Epcot Center is a theme park in Disney World, Florida.</p> </aside></code></pre> <p><strong>HTML5 <header> 元素</strong></p> <blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"> <p><header>元素描述了文档的头部区域</p> <p><header>元素主要用于定义内容的介绍展示区域</p> <p>在页面中你可以使用多个<header> 元素</p> </blockquote> <pre class="wp-block-code"><code><article> <header> <h1>Internet Explorer 9</h1> <p><time pubdate datetime="2011-03-15"></time></p> </header> <p>Windows Internet Explorer 9(缩写为 IE9 )是在2011年3月14日21:00发布的</p> </article></code></pre> <p><strong>HTML5 <footer> 元素</strong></p> <blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"> <p><footer> 元素描述了文档的底部区域.</p> <p><footer> 元素应该包含它的包含元素</p> <p>一个页脚通常包含文档的作者，著作权信息，链接的使用条款，联系信息等</p> </blockquote> <p><strong>HTML5 <figure> 和 <figcaption> 元素</strong></p> <blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"> <p><figure>标签规定独立的流内容（图像、图表、照片、代码等等）</p> <p><figure> 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响</p> <p><figcaption> 标签定义 <figure> 元素的标题</p> <p><figcaption>元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置</p> </blockquote> <pre class="wp-block-code"><code><figure> <img decoding="async" loading="lazy" src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228"> <figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption> </figure></code></pre> <h2 class="wp-block-heading">HTML5 Web 存储</h2> <blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"> <p>HTML5 web 存储，一个比 cookie 更好的本地存储方式</p> </blockquote> <p><strong>什么是 HTML5 Web 存储</strong></p> <p>webstorage（HTML5 Web 存储）是将数据存储在用户客户端的一种方式，先前有cookie；webstorage相较于cookie更加高效安全，存储容量更大</p> <p><strong>localStorage 和 sessionStorage</strong></p> <p>客户端存储数据的两个对象为：</p> <ul class="wp-block-list"> <li>localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除</li> <li>sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据</li> </ul> <p><strong>localStorage 对象</strong></p> <blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"> <p>localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用</p> </blockquote> <pre class="wp-block-code"><code>// 存储 localStorage.setItem("sitename", "goblog"); //使用 key="sitename" 和 value="菜鸟教程" 创建一个 localStorage 键/值对 // 查找 document.getElementById("result").innerHTML = "网站名：" + localStorage.getItem("sitename"); //检索键值为 "sitename" 的值然后将数据插入 id="result" 的元素中</code></pre> <p>也可以这样子写</p> <pre class="wp-block-code"><code>// 存储 localStorage.sitename = "goblog"; // 查找 document.getElementById("result").innerHTML = localStorage.sitename;</code></pre> <p>移除 localStorage 中的 “sitename”</p> <pre class="wp-block-code"><code>localStorage.removeItem("sitename");</code></pre> <p>不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：</p> <ul class="wp-block-list"> <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);</li> </ul> <p><strong>sessionStorage 对象</strong></p> <blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"> <p>sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除</p> </blockquote> <h2 class="wp-block-heading">HTML5 Web Workers</h2> <p>web worker 是运行在后台的 JavaScript，不会影响页面的性能</p> <p><strong>什么是 Web Workers</strong></p> <p>当 HTML 页面执行脚本时，页面的状态是不可相应的，知道脚本运行完成</p> <p>而web workders 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的正常响应</p> <p><strong>创建 web worker 文件</strong></p> <p>现在，让我们在一个外部 JavaScript 中创建我们的 web worker</p> <p>在这里，我们创建了计数脚本。该脚本存储于 "demo_workers.js" 文件中</p> <pre class="wp-block-code"><code>var i=0; function timedCount() { i=i+1; postMessage(i); setTimeout("timedCount()",500); } timedCount();</code></pre> <p>以上代码中重要的部分是 postMessage() 方法 - 它用于向 HTML 页面传回一段消息。</p> <p><em>注意: web worker 通常不用于如此简单的脚本，而是用于更耗费 CPU 资源的任务。</em></p> <p><strong>创建 Web Worker 对象</strong></p> <p>我们已经有了 web worker 文件，现在我们需要从 HTML 页面调用它</p> <p>下面的代码检测是否存在 worker，如果不存在，- 它会创建一个新的 web worker 对象，然后运行 "demo_workers.js" 中的代码</p> <pre class="wp-block-code"><code>if(typeof(w)=="undefined") { w=new Worker("demo_workers.js"); }</code></pre> <p>然后我们就可以从 web worker 发送和接收消息了</p> <p>向 web worker 添加一个 "onmessage" 事件监听器</p> <pre class="wp-block-code"><code>w.onmessage=function(event){ document.getElementById("result").innerHTML=event.data; };</code></pre> <p><strong>终止 Web Worker</strong></p> <p>当我们创建 web worker 对象后，它会继续监听消息（即使在外部脚本完成之后）直到其被终止为止。</p> <p>如需终止 web worker，并释放浏览器/计算机资源，请使用 terminate() 方法</p> <pre class="wp-block-code"><code>w.terminate();</code></pre> <h2 class="wp-block-heading">HTML5 SSE</h2> <p>HTML5 服务器发送事件（server-sent event）允许网页获得来自服务器的更新</p> <p><strong>Server-Sent 事件 -单向消息传递</strong></p> <p>Server-Sent 事件指的是网页自动获取来自服务器的更新</p> <p>以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过服务器发送事件，更新能够自动到达</p> <p><strong>接受 Server-Sent 事件通知</strong></p> <p>EventSource 对象用于接收服务器发送事件通知</p> <pre class="wp-block-code"><code>var source=new EventSource("demo_sse.php"); source.onmessage=function(event) { document.getElementById("result").innerHTML+=event.data + "<br>"; }; //创建一个新的 EventSource 对象，然后规定发送更新的页面的 URL（本例中是 "demo_sse.php"） //每接收到一次更新，就会发生 onmessage 事件 //当 onmessage 事件发生时，把已接收的数据推入 id 为 "result" 的元素中</code></pre> <p><strong>服务端代码实例</strong></p> <p>为了让上面的例子可以运行，您还需要能够发送数据更新的服务器（比如 PHP 和 ASP）</p> <p>服务器端事件流的语法是非常简单的。把 "Content-Type" 报头设置为 "text/event-stream"。现在，您可以开始发送事件流了</p> <pre class="wp-block-code"><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 代码</p> <pre class="wp-block-code"><code><% Response.ContentType="text/event-stream" Response.Expires=-1 Response.Write("data: " & now()) Response.Flush() %></code></pre> <p><strong>EventSource 对象</strong></p> <p>除了上述事件外还有这些事件</p> <figure class="wp-block-table"><table><tbody><tr><th>事件</th> <th>描述</th></tr> <tr><th>onopen</th> <th>当通往服务器的连接被打开</th></tr> <tr><th>onmessage</th> <th>当接收到消息</th></tr> <tr><th>onerror</th> <th>当发生错误</th></tr></tbody></table></figure> <h2 class="wp-block-heading">HTML5 WebSocket</h2> <p>WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。</p> <p>WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。</p> <p>在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。</p> <p>现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。</p> <p>HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。</p> <figure class="wp-block-image size-full"><a href="https://www.nilcloud.link/wp-content/uploads/2023/03/image.png"><div class='fancybox-wrapper lazyload-container-unload' data-fancybox='post-images' href='https://www.nilcloud.link/wp-content/uploads/2023/03/image.png'><img class="lazyload lazyload-style-1" src="data:image/svg+xml;base64,PCEtLUFyZ29uTG9hZGluZy0tPgo8c3ZnIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjZmZmZmZmMDAiPjxnPjwvZz4KPC9zdmc+" decoding="async" width="834" height="444" data-original="https://www.nilcloud.link/wp-content/uploads/2023/03/image.png" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" alt="" class="wp-image-662" sizes="(max-width: 834px) 100vw, 834px" /></div></a></figure> <p>浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。</p> <p>当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。</p> <p>以下 API 用于创建 WebSocket 对象。</p> <pre class="wp-block-code"><code>var Socket = new WebSocket(url, [protocol] );</code></pre> <p>以上代码中的第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的，指定了可接受的子协议。</p> <p><strong>WebSocket 属性</strong></p> <p>以下是 WebSocket 对象的属性。假定我们使用了以上代码创建了 Socket 对象</p> <figure class="wp-block-table"><table><tbody><tr><th>属性</th> <th>描述</th></tr> <tr><th>Socket.readyState</th> <th>只读属性 <strong>readyState</strong> 表示连接状态，可以是以下值：0 - 表示连接尚未建立。1 - 表示连接已建立，可以进行通信。2 - 表示连接正在进行关闭。3 - 表示连接已经关闭或者连接不能打开。</th></tr> <tr><th>Socket.bufferedAmount</th> <th>只读属性 <strong>bufferedAmount</strong> 已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数。</th></tr></tbody></table></figure> <p><strong>WebSocket 事件</strong></p> <p>以下是 WebSocket 对象的相关事件。假定我们使用了以上代码创建了 Socket 对象</p> <figure class="wp-block-table"><table><tbody><tr><th>事件</th> <th>事件处理程序</th> <th>描述</th></tr> <tr><th>open</th> <th>Socket.onopen</th> <th>连接建立时触发</th></tr> <tr><th>message</th> <th>Socket.onmessage</th> <th>客户端接收服务端数据时触发</th></tr> <tr><th>error</th> <th>Socket.onerror</th> <th>通信发生错误时触发</th></tr> <tr><th>close</th> <th>Socket.onclose</th> <th>连接关闭时触发</th></tr></tbody></table></figure> <p><strong>WebSocket 方法</strong></p> <p>以下是 WebSocket 对象的相关方法。假定我们使用了以上代码创建了 Socket 对象</p> <figure class="wp-block-table"><table><tbody><tr><th>方法</th> <th>描述</th></tr> <tr><th>Socket.send()</th> <th>使用连接发送数据</th></tr> <tr><th>Socket.close()</th> <th>关闭连接</th></tr></tbody></table></figure> <h2 class="wp-block-heading">结语</h2> <p>至此，您已经完成HTML5的学习，下面为您提供了 HTML5 代码规范，方便您写出更加优美的 HTML 代码</p> <p><a href="https://www.nilcloud.link/html5-%e4%bb%a3%e7%a0%81%e8%a7%84%e8%8c%83/">HTML5 代码规范 – GoBlog</a></p> </div> <div class="post-tags"> <i class="fa fa-tags" aria-hidden="true"></i> <a href='https://nilcloud.link/tag/html/' target='_blank' class='tag badge badge-secondary post-meta-detail-tag'>HTML</a><a href='https://nilcloud.link/tag/html5/' target='_blank' class='tag badge badge-secondary post-meta-detail-tag'>HTML5</a> </div> </article> <div id="share_container"> <div id="share" data-initialized="true"> <a class="no-pjax icon-wechat" tooltip="分享到微信"> <button class="btn btn-icon btn-success"> <span class="btn-inner--icon"><i class="fa fa-weixin"></i></span> </button> </a> <a target="_blank" class="no-pjax icon-douban" tooltip="分享到豆瓣"> <button class="btn btn-icon btn-primary" style="background: #209261;border: none;"> <span aria-hidden="true">豆</span> </button> </a> <a target="_blank" class="no-pjax icon-qq" tooltip="分享到 QQ"> <button class="btn btn-icon btn-primary" style="background: #2196f3;border: none;"> <span class="btn-inner--icon"><i class="fa fa-qq"></i></span> </button> </a> <a target="_blank" class="no-pjax icon-qzone" tooltip="分享到 QQ 空间"> <button class="btn btn-icon btn-primary" style="background: #ffc107;border: none;"> <span class="btn-inner--icon"><i class="fa fa-star"></i></span> </button> </a> <a target="_blank" class="no-pjax icon-weibo" tooltip="分享到微博"> <button class="btn btn-icon btn-warning"> <span class="btn-inner--icon"><i class="fa fa-weibo"></i></span> </button> </a> <a target="_blank" class="no-pjax icon-facebook" tooltip="分享到 Facebook"> <button class="btn btn-icon btn-primary" style="background: #283593;border: none;"> <span class="btn-inner--icon"><i class="fa fa-facebook"></i></span> </button> </a> <a target="_blank" class="no-pjax icon-twitter" tooltip="分享到 Twitter"> <button class="btn btn-icon btn-primary" style="background: #03a9f4;border: none;"> <span class="btn-inner--icon"><i class="fa fa-twitter"></i></span> </button> </a> <a target="_blank" class="no-pjax icon-telegram" href="https://telegram.me/share/url?url=nilcloud.link&text=HTML5+%E2%80%93+HTML%E8%BF%9B%E9%98%B6" tooltip="分享到 Telegram"> <button class="btn btn-icon btn-primary" style="background: #42a5f5;border: none;"> <span class="btn-inner--icon"><i class="fa fa-telegram"></i></span> </button> </a> <a target="_blank" class="no-pjax icon-copy-link" id="share_copy_link" tooltip="复制链接"> <button class="btn btn-icon btn-default"> <span class="btn-inner--icon"><i class="fa fa-link"></i></span> </button> </a> </div> <button id="share_show" class="btn btn-icon btn-primary" tooltip="分享"> <span class="btn-inner--icon"><i class="fa fa-share"></i></span> </button> </div> <script type="text/javascript"> socialShare("#share", { title : 'HTML5 – HTML进阶', description : 'HTML5简介 HTML5是HTML最新的修订版本，于2014年10月由万维联盟（W3C）完成标准指…', wechatQrcodeTitle : "分享到微信", wechatQrcodeHelper : '微信扫描二维码', source : 'https://nilcloud.link/html5-html%e8%bf%9b%e9%98%b6/' }); $("#share_show")[0].onclick = function(){ $("#share_container").addClass("opened"); }; $("#share_copy_link")[0].onclick = function(){ let input = document.createElement('input'); document.body.appendChild(input); input.setAttribute("value", window.location.href); input.setAttribute("readonly", "readonly"); input.setAttribute("style", "opacity: 0;mouse-events:none;"); input.select(); if (document.execCommand('copy')){ iziToast.show({ title: '链接已复制', message: "链接已复制到剪贴板", class: 'shadow', position: 'topRight', backgroundColor: '#2dce89', titleColor: '#ffffff', messageColor: '#ffffff', iconColor: '#ffffff', progressBarColor: '#ffffff', icon: 'fa fa-check', timeout: 5000 }); }else{ iziToast.show({ title: '复制失败', message: "请手动复制链接", class: 'shadow', position: 'topRight', backgroundColor: '#f5365c', titleColor: '#ffffff', messageColor: '#ffffff', iconColor: '#ffffff', progressBarColor: '#ffffff', icon: 'fa fa-close', timeout: 5000 }); } document.body.removeChild(input); }; </script> <div id="comments" class="comments-area card shadow-sm"> <div class="card-body"> <span>暂无评论</span> </div> </div> <div id="post_comment" class="card shadow-sm enable-qq-avatar"> <div class="card-body"> <h2 class="post-comment-title"> <i class="fa fa-commenting"></i> <span class="hide-on-comment-editing">发送评论</span> <span class="hide-on-comment-not-editing">编辑评论</span> </h2> <div id="post_comment_reply_info" class="post-comment-reply" style="display: none;"> <span>正在回复 <b><span id="post_comment_reply_name"></span></b> 的评论 :</span> <div id="post_comment_reply_preview" class="post-comment-reply-preview"></div> <button id="post_comment_reply_cancel" class="btn btn-outline-primary btn-sm">取消回复</button> </div> <form> <div class="row"> <div class="col-md-12"> <textarea id="post_comment_content" class="form-control form-control-alternative" placeholder="评论内容" name="comment" style="height: 80px;"></textarea> </div> <div class="col-md-12" style="height: 0;overflow: hidden;"> <pre id="post_comment_content_hidden" class=""></pre> </div> </div> <div class="row hide-on-comment-editing" style="margin-bottom: -10px;"> <div class="col-md-4"> <div class="form-group"> <div class="input-group input-group-alternative mb-4"> <div class="input-group-prepend"> <span class="input-group-text"><i class="fa fa-user-circle"></i></span> </div> <input id="post_comment_name" class="form-control" placeholder="昵称" type="text" name="author" value=""> </div> </div> </div> <div class="col-md-5"> <div class="form-group"> <div class="input-group input-group-alternative mb-4"> <div class="input-group-prepend"> <span class="input-group-text"><i class="fa fa-envelope"></i></span> </div> <input id="post_comment_email" class="form-control" placeholder="邮箱 / QQ 号" type="email" name="email" value=""> </div> </div> </div> <div class="col-md-3"> <div class="form-group"> <div class="input-group input-group-alternative mb-4 post-comment-captcha-container" captcha="42 / 6 = "> <div class="input-group-prepend"> <span class="input-group-text"><i class="fa fa-key"></i></span> </div> <input id="post_comment_captcha" class="form-control" placeholder="验证码" type="text" > <style> .post-comment-captcha-container:before{ content: attr(captcha); } </style> </div> </div> </div> </div> <div class="row hide-on-comment-editing" id="post_comment_extra_input" style="display: none";> <div class="col-md-12" style="margin-bottom: -10px;"> <div class="form-group"> <div class="input-group input-group-alternative mb-4 post-comment-link-container"> <div class="input-group-prepend"> <span class="input-group-text"><i class="fa fa-link"></i></span> </div> <input id="post_comment_link" class="form-control" placeholder="网站" type="text" name="url" value=""> </div> </div> </div> </div> <div class="row hide-on-comment-editing " style="margin-top: 10px; "> <div class="col-md-12"> <button id="post_comment_toggle_extra_input" type="button" class="btn btn-icon btn-outline-primary btn-sm" tooltip-show-extra-field="展开附加字段" tooltip-hide-extra-field="折叠附加字段"> <span class="btn-inner--icon"><i class="fa fa-angle-down"></i></span> </button> </div></div> <div class="row" style="margin-top: 5px; margin-bottom: 10px;"> <div class="col-md-12"> <div class="custom-control custom-checkbox comment-post-checkbox comment-post-use-markdown"> <input class="custom-control-input" id="comment_post_use_markdown" type="checkbox" checked="true"> <label class="custom-control-label" for="comment_post_use_markdown">Markdown</label> </div> <div class="custom-control custom-checkbox comment-post-checkbox comment-post-privatemode" tooltip="评论仅发送者和博主可见"> <input class="custom-control-input" id="comment_post_privatemode" type="checkbox"> <label class="custom-control-label" for="comment_post_privatemode">悄悄话</label> </div> <div class="custom-control custom-checkbox comment-post-checkbox comment-post-mailnotice" tooltip="有回复时邮件通知我"> <input class="custom-control-input" id="comment_post_mailnotice" type="checkbox"> <label class="custom-control-label" for="comment_post_mailnotice">邮件提醒</label> </div> <button id="post_comment_send" class="btn btn-icon btn-primary comment-btn pull-right mr-0" type="button"> <span class="btn-inner--icon hide-on-comment-editing"><i class="fa fa-send"></i></span> <span class="btn-inner--icon hide-on-comment-not-editing"><i class="fa fa-pencil"></i></span> <span class="btn-inner--text hide-on-comment-editing" style="margin-right: 0;">发送</span> <span class="btn-inner--text hide-on-comment-not-editing" style="margin-right: 0;">编辑</span> </button> <button id="post_comment_edit_cancel" class="btn btn-icon btn-danger comment-btn pull-right hide-on-comment-not-editing" type="button" style="margin-right: 8px;"> <span class="btn-inner--icon"><i class="fa fa-close"></i></span> <span class="btn-inner--text">取消</span> </button> <button id="comment_emotion_btn" class="btn btn-icon btn-primary pull-right" type="button" title="表情"> <i class="fa fa-smile-o" aria-hidden="true"></i> </button> <div id="emotion_keyboard" class="emotion-keyboard card shadow-sm bg-white"> <div class="emotion-keyboard-content"> <div class='emotion-group' index='0'><div class='emotion-item' text='|´・ω・)ノ' title=''>|´・ω・)ノ</div><div class='emotion-item' text='ヾ(≧∇≦*)ゝ' title=''>ヾ(≧∇≦*)ゝ</div><div class='emotion-item' text='(☆ω☆)' title=''>(☆ω☆)</div><div class='emotion-item' text='（╯‵□′）╯︵┴─┴' title=''>（╯‵□′）╯︵┴─┴</div><div class='emotion-item' text='￣﹃￣' title=''>￣﹃￣</div><div class='emotion-item' text='(/ω＼)' title=''>(/ω＼)</div><div class='emotion-item' text='∠( ᐛ 」∠)＿' title=''>∠( ᐛ 」∠)＿</div><div class='emotion-item' text='(๑•̀ㅁ•́ฅ)' title=''>(๑•̀ㅁ•́ฅ)</div><div class='emotion-item' text='→_→' title=''>→_→</div><div class='emotion-item' text='୧(๑•̀⌄•́๑)૭' title=''>୧(๑•̀⌄•́๑)૭</div><div class='emotion-item' text='٩(ˊᗜˋ*)و' title=''>٩(ˊᗜˋ*)و</div><div class='emotion-item' text='(ノ°ο°)ノ' title=''>(ノ°ο°)ノ</div><div class='emotion-item' text='(´இ皿இ｀)' title=''>(´இ皿இ｀)</div><div class='emotion-item' text='⌇●﹏●⌇' title=''>⌇●﹏●⌇</div><div class='emotion-item' text='(ฅ´ω`ฅ)' title=''>(ฅ´ω`ฅ)</div><div class='emotion-item' text='(╯°A°)╯︵○○○' title=''>(╯°A°)╯︵○○○</div><div class='emotion-item' text='φ(￣∇￣o)' title=''>φ(￣∇￣o)</div><div class='emotion-item' text='ヾ(´･ ･｀｡)ノ"' title=''>ヾ(´･ ･｀｡)ノ"</div><div class='emotion-item' text='( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃' title=''>( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃</div><div class='emotion-item' text='(ó﹏ò｡)' title=''>(ó﹏ò｡)</div><div class='emotion-item' text='Σ(っ °Д °;)っ' title=''>Σ(っ °Д °;)っ</div><div class='emotion-item' text='( ,,´･ω･)ﾉ"(´っω･｀｡)' title=''>( ,,´･ω･)ﾉ"(´っω･｀｡)</div><div class='emotion-item' text='╮(╯▽╰)╭' title=''>╮(╯▽╰)╭</div><div class='emotion-item' text='o(*////▽////*)q' title=''>o(*////▽////*)q</div><div class='emotion-item' text='＞﹏＜' title=''>＞﹏＜</div><div class='emotion-item' text='( ๑´•ω•) "(ㆆᴗㆆ)' title=''>( ๑´•ω•) "(ㆆᴗㆆ)</div></div><div class='emotion-group d-none' index='1'><div class='emotion-item' text='😂' title=''>😂</div><div class='emotion-item' text='😀' title=''>😀</div><div class='emotion-item' text='😅' title=''>😅</div><div class='emotion-item' text='😊' title=''>😊</div><div class='emotion-item' text='🙂' title=''>🙂</div><div class='emotion-item' text='🙃' title=''>🙃</div><div class='emotion-item' text='😌' title=''>😌</div><div class='emotion-item' text='😍' title=''>😍</div><div class='emotion-item' text='😘' title=''>😘</div><div class='emotion-item' text='😜' title=''>😜</div><div class='emotion-item' text='😝' title=''>😝</div><div class='emotion-item' text='😏' title=''>😏</div><div class='emotion-item' text='😒' title=''>😒</div><div class='emotion-item' text='🙄' title=''>🙄</div><div class='emotion-item' text='😳' title=''>😳</div><div class='emotion-item' text='😡' title=''>😡</div><div class='emotion-item' text='😔' title=''>😔</div><div class='emotion-item' text='😫' title=''>😫</div><div class='emotion-item' text='😱' title=''>😱</div><div class='emotion-item' text='😭' title=''>😭</div><div class='emotion-item' text='💩' title=''>💩</div><div class='emotion-item' text='👻' title=''>👻</div><div class='emotion-item' text='🙌' title=''>🙌</div><div class='emotion-item' text='🖕' title=''>🖕</div><div class='emotion-item' text='👍' title=''>👍</div><div class='emotion-item' text='👫' title=''>👫</div><div class='emotion-item' text='👬' title=''>👬</div><div class='emotion-item' text='👭' title=''>👭</div><div class='emotion-item' text='🌚' title=''>🌚</div><div class='emotion-item' text='🌝' title=''>🌝</div><div class='emotion-item' text='🙈' title=''>🙈</div><div class='emotion-item' text='💊' title=''>💊</div><div class='emotion-item' text='😶' title=''>😶</div><div class='emotion-item' text='🙏' title=''>🙏</div><div class='emotion-item' text='🍦' title=''>🍦</div><div class='emotion-item' text='🍉' title=''>🍉</div><div class='emotion-item' text='😣' title=''>😣</div></div><div class='emotion-group d-none' index='2'><div class='emotion-item emotion-item-sticker' code='dinosaur-shy' title=''><img class='lazyload' src='data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iZW1vdGlvbi1sb2FkaW5nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9Ii04IC04IDQwIDQwIiBzdHJva2U9IiM4ODgiIG9wYWNpdHk9Ii41IiB3aWR0aD0iNjAiIGhlaWdodD0iNjAiPgogIDxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik0xNC44MjggMTQuODI4YTQgNCAwIDAxLTUuNjU2IDBNOSAxMGguMDFNMTUgMTBoLjAxTTIxIDEyYTkgOSAwIDExLTE4IDAgOSA5IDAgMDExOCAweiIvPgo8L3N2Zz4=' data-original='https://nilcloud.link/wp-content/themes/argon/stickers/dinosaur/1.jpg'/></div><div class='emotion-item emotion-item-sticker' code='dinosaur-daze' title=''><img class='lazyload' src='data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iZW1vdGlvbi1sb2FkaW5nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9Ii04IC04IDQwIDQwIiBzdHJva2U9IiM4ODgiIG9wYWNpdHk9Ii41IiB3aWR0aD0iNjAiIGhlaWdodD0iNjAiPgogIDxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik0xNC44MjggMTQuODI4YTQgNCAwIDAxLTUuNjU2IDBNOSAxMGguMDFNMTUgMTBoLjAxTTIxIDEyYTkgOSAwIDExLTE4IDAgOSA5IDAgMDExOCAweiIvPgo8L3N2Zz4=' data-original='https://nilcloud.link/wp-content/themes/argon/stickers/dinosaur/2.jpg'/></div><div class='emotion-item emotion-item-sticker' code='dinosaur-sweat' title=''><img class='lazyload' src='data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iZW1vdGlvbi1sb2FkaW5nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9Ii04IC04IDQwIDQwIiBzdHJva2U9IiM4ODgiIG9wYWNpdHk9Ii41IiB3aWR0aD0iNjAiIGhlaWdodD0iNjAiPgogIDxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik0xNC44MjggMTQuODI4YTQgNCAwIDAxLTUuNjU2IDBNOSAxMGguMDFNMTUgMTBoLjAxTTIxIDEyYTkgOSAwIDExLTE4IDAgOSA5IDAgMDExOCAweiIvPgo8L3N2Zz4=' data-original='https://nilcloud.link/wp-content/themes/argon/stickers/dinosaur/3.jpg'/></div><div class='emotion-item emotion-item-sticker' code='dinosaur-proud' title=''><img class='lazyload' src='data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iZW1vdGlvbi1sb2FkaW5nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9Ii04IC04IDQwIDQwIiBzdHJva2U9IiM4ODgiIG9wYWNpdHk9Ii41IiB3aWR0aD0iNjAiIGhlaWdodD0iNjAiPgogIDxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik0xNC44MjggMTQuODI4YTQgNCAwIDAxLTUuNjU2IDBNOSAxMGguMDFNMTUgMTBoLjAxTTIxIDEyYTkgOSAwIDExLTE4IDAgOSA5IDAgMDExOCAweiIvPgo8L3N2Zz4=' data-original='https://nilcloud.link/wp-content/themes/argon/stickers/dinosaur/4.jpg'/></div><div class='emotion-item emotion-item-sticker' code='dinosaur-powerless' title=''><img class='lazyload' src='data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iZW1vdGlvbi1sb2FkaW5nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9Ii04IC04IDQwIDQwIiBzdHJva2U9IiM4ODgiIG9wYWNpdHk9Ii41IiB3aWR0aD0iNjAiIGhlaWdodD0iNjAiPgogIDxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik0xNC44MjggMTQuODI4YTQgNCAwIDAxLTUuNjU2IDBNOSAxMGguMDFNMTUgMTBoLjAxTTIxIDEyYTkgOSAwIDExLTE4IDAgOSA5IDAgMDExOCAweiIvPgo8L3N2Zz4=' data-original='https://nilcloud.link/wp-content/themes/argon/stickers/dinosaur/5.jpg'/></div><div class='emotion-item emotion-item-sticker' code='dinosaur-pouting' title=''><img class='lazyload' src='data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iZW1vdGlvbi1sb2FkaW5nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9Ii04IC04IDQwIDQwIiBzdHJva2U9IiM4ODgiIG9wYWNpdHk9Ii41IiB3aWR0aD0iNjAiIGhlaWdodD0iNjAiPgogIDxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik0xNC44MjggMTQuODI4YTQgNCAwIDAxLTUuNjU2IDBNOSAxMGguMDFNMTUgMTBoLjAxTTIxIDEyYTkgOSAwIDExLTE4IDAgOSA5IDAgMDExOCAweiIvPgo8L3N2Zz4=' data-original='https://nilcloud.link/wp-content/themes/argon/stickers/dinosaur/6.jpg'/></div><div class='emotion-item emotion-item-sticker' code='dinosaur-eating' title=''><img class='lazyload' src='data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iZW1vdGlvbi1sb2FkaW5nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9Ii04IC04IDQwIDQwIiBzdHJva2U9IiM4ODgiIG9wYWNpdHk9Ii41IiB3aWR0aD0iNjAiIGhlaWdodD0iNjAiPgogIDxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik0xNC44MjggMTQuODI4YTQgNCAwIDAxLTUuNjU2IDBNOSAxMGguMDFNMTUgMTBoLjAxTTIxIDEyYTkgOSAwIDExLTE4IDAgOSA5IDAgMDExOCAweiIvPgo8L3N2Zz4=' data-original='https://nilcloud.link/wp-content/themes/argon/stickers/dinosaur/7.jpg'/></div><div class='emotion-item emotion-item-sticker' code='dinosaur-ok' title=''><img class='lazyload' src='data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iZW1vdGlvbi1sb2FkaW5nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9Ii04IC04IDQwIDQwIiBzdHJva2U9IiM4ODgiIG9wYWNpdHk9Ii41IiB3aWR0aD0iNjAiIGhlaWdodD0iNjAiPgogIDxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik0xNC44MjggMTQuODI4YTQgNCAwIDAxLTUuNjU2IDBNOSAxMGguMDFNMTUgMTBoLjAxTTIxIDEyYTkgOSAwIDExLTE4IDAgOSA5IDAgMDExOCAweiIvPgo8L3N2Zz4=' data-original='https://nilcloud.link/wp-content/themes/argon/stickers/dinosaur/8.jpg'/></div><div class='emotion-item emotion-item-sticker' code='dinosaur-doubt' title=''><img class='lazyload' src='data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iZW1vdGlvbi1sb2FkaW5nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9Ii04IC04IDQwIDQwIiBzdHJva2U9IiM4ODgiIG9wYWNpdHk9Ii41IiB3aWR0aD0iNjAiIGhlaWdodD0iNjAiPgogIDxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik0xNC44MjggMTQuODI4YTQgNCAwIDAxLTUuNjU2IDBNOSAxMGguMDFNMTUgMTBoLjAxTTIxIDEyYTkgOSAwIDExLTE4IDAgOSA5IDAgMDExOCAweiIvPgo8L3N2Zz4=' data-original='https://nilcloud.link/wp-content/themes/argon/stickers/dinosaur/9.jpg'/></div><div class='emotion-item emotion-item-sticker' code='dinosaur-depressed' title=''><img class='lazyload' src='data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iZW1vdGlvbi1sb2FkaW5nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9Ii04IC04IDQwIDQwIiBzdHJva2U9IiM4ODgiIG9wYWNpdHk9Ii41IiB3aWR0aD0iNjAiIGhlaWdodD0iNjAiPgogIDxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik0xNC44MjggMTQuODI4YTQgNCAwIDAxLTUuNjU2IDBNOSAxMGguMDFNMTUgMTBoLjAxTTIxIDEyYTkgOSAwIDExLTE4IDAgOSA5IDAgMDExOCAweiIvPgo8L3N2Zz4=' data-original='https://nilcloud.link/wp-content/themes/argon/stickers/dinosaur/10.jpg'/></div><div class='emotion-item emotion-item-sticker' code='dinosaur-close-eyes' title=''><img class='lazyload' src='data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iZW1vdGlvbi1sb2FkaW5nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9Ii04IC04IDQwIDQwIiBzdHJva2U9IiM4ODgiIG9wYWNpdHk9Ii41IiB3aWR0aD0iNjAiIGhlaWdodD0iNjAiPgogIDxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik0xNC44MjggMTQuODI4YTQgNCAwIDAxLTUuNjU2IDBNOSAxMGguMDFNMTUgMTBoLjAxTTIxIDEyYTkgOSAwIDExLTE4IDAgOSA5IDAgMDExOCAweiIvPgo8L3N2Zz4=' data-original='https://nilcloud.link/wp-content/themes/argon/stickers/dinosaur/11.jpg'/></div><div class='emotion-item emotion-item-sticker' code='dinosaur-sleeping' title=''><img class='lazyload' src='data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iZW1vdGlvbi1sb2FkaW5nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9Ii04IC04IDQwIDQwIiBzdHJva2U9IiM4ODgiIG9wYWNpdHk9Ii41IiB3aWR0aD0iNjAiIGhlaWdodD0iNjAiPgogIDxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik0xNC44MjggMTQuODI4YTQgNCAwIDAxLTUuNjU2IDBNOSAxMGguMDFNMTUgMTBoLjAxTTIxIDEyYTkgOSAwIDExLTE4IDAgOSA5IDAgMDExOCAweiIvPgo8L3N2Zz4=' data-original='https://nilcloud.link/wp-content/themes/argon/stickers/dinosaur/12.jpg'/></div><div class='emotion-item emotion-item-sticker' code='dinosaur-puzzled' title=''><img class='lazyload' src='data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iZW1vdGlvbi1sb2FkaW5nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9Ii04IC04IDQwIDQwIiBzdHJva2U9IiM4ODgiIG9wYWNpdHk9Ii41IiB3aWR0aD0iNjAiIGhlaWdodD0iNjAiPgogIDxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik0xNC44MjggMTQuODI4YTQgNCAwIDAxLTUuNjU2IDBNOSAxMGguMDFNMTUgMTBoLjAxTTIxIDEyYTkgOSAwIDExLTE4IDAgOSA5IDAgMDExOCAweiIvPgo8L3N2Zz4=' data-original='https://nilcloud.link/wp-content/themes/argon/stickers/dinosaur/13.jpg'/></div><div class='emotion-item emotion-item-sticker' code='dinosaur-agree' title=''><img class='lazyload' src='data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iZW1vdGlvbi1sb2FkaW5nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9Ii04IC04IDQwIDQwIiBzdHJva2U9IiM4ODgiIG9wYWNpdHk9Ii41IiB3aWR0aD0iNjAiIGhlaWdodD0iNjAiPgogIDxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik0xNC44MjggMTQuODI4YTQgNCAwIDAxLTUuNjU2IDBNOSAxMGguMDFNMTUgMTBoLjAxTTIxIDEyYTkgOSAwIDExLTE4IDAgOSA5IDAgMDExOCAweiIvPgo8L3N2Zz4=' data-original='https://nilcloud.link/wp-content/themes/argon/stickers/dinosaur/14.jpg'/></div><div class='emotion-item emotion-item-sticker' code='dinosaur-crazy' title=''><img class='lazyload' src='data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iZW1vdGlvbi1sb2FkaW5nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9Ii04IC04IDQwIDQwIiBzdHJva2U9IiM4ODgiIG9wYWNpdHk9Ii41IiB3aWR0aD0iNjAiIGhlaWdodD0iNjAiPgogIDxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik0xNC44MjggMTQuODI4YTQgNCAwIDAxLTUuNjU2IDBNOSAxMGguMDFNMTUgMTBoLjAxTTIxIDEyYTkgOSAwIDExLTE4IDAgOSA5IDAgMDExOCAweiIvPgo8L3N2Zz4=' data-original='https://nilcloud.link/wp-content/themes/argon/stickers/dinosaur/15.jpg'/></div><div class='emotion-item emotion-item-sticker' code='dinosaur-angry' title=''><img class='lazyload' src='data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iZW1vdGlvbi1sb2FkaW5nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9Ii04IC04IDQwIDQwIiBzdHJva2U9IiM4ODgiIG9wYWNpdHk9Ii41IiB3aWR0aD0iNjAiIGhlaWdodD0iNjAiPgogIDxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik0xNC44MjggMTQuODI4YTQgNCAwIDAxLTUuNjU2IDBNOSAxMGguMDFNMTUgMTBoLjAxTTIxIDEyYTkgOSAwIDExLTE4IDAgOSA5IDAgMDExOCAweiIvPgo8L3N2Zz4=' data-original='https://nilcloud.link/wp-content/themes/argon/stickers/dinosaur/16.jpg'/></div></div><div class='emotion-group d-none' index='3'><div class='emotion-item emotion-item-sticker' code='flower-flower' title=''><img class='lazyload' src='data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iZW1vdGlvbi1sb2FkaW5nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9Ii04IC04IDQwIDQwIiBzdHJva2U9IiM4ODgiIG9wYWNpdHk9Ii41IiB3aWR0aD0iNjAiIGhlaWdodD0iNjAiPgogIDxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik0xNC44MjggMTQuODI4YTQgNCAwIDAxLTUuNjU2IDBNOSAxMGguMDFNMTUgMTBoLjAxTTIxIDEyYTkgOSAwIDExLTE4IDAgOSA5IDAgMDExOCAweiIvPgo8L3N2Zz4=' data-original='https://nilcloud.link/wp-content/themes/argon/stickers/flower/1.jpg'/></div><div class='emotion-item emotion-item-sticker' code='flower-grass' title=''><img class='lazyload' src='data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iZW1vdGlvbi1sb2FkaW5nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9Ii04IC04IDQwIDQwIiBzdHJva2U9IiM4ODgiIG9wYWNpdHk9Ii41IiB3aWR0aD0iNjAiIGhlaWdodD0iNjAiPgogIDxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik0xNC44MjggMTQuODI4YTQgNCAwIDAxLTUuNjU2IDBNOSAxMGguMDFNMTUgMTBoLjAxTTIxIDEyYTkgOSAwIDExLTE4IDAgOSA5IDAgMDExOCAweiIvPgo8L3N2Zz4=' data-original='https://nilcloud.link/wp-content/themes/argon/stickers/flower/2.jpg'/></div><div class='emotion-item emotion-item-sticker' code='flower-leaf' title=''><img class='lazyload' src='data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iZW1vdGlvbi1sb2FkaW5nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9Ii04IC04IDQwIDQwIiBzdHJva2U9IiM4ODgiIG9wYWNpdHk9Ii41IiB3aWR0aD0iNjAiIGhlaWdodD0iNjAiPgogIDxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik0xNC44MjggMTQuODI4YTQgNCAwIDAxLTUuNjU2IDBNOSAxMGguMDFNMTUgMTBoLjAxTTIxIDEyYTkgOSAwIDExLTE4IDAgOSA5IDAgMDExOCAweiIvPgo8L3N2Zz4=' data-original='https://nilcloud.link/wp-content/themes/argon/stickers/flower/3.jpg'/></div><div class='emotion-item emotion-item-sticker' code='flower-star' title=''><img class='lazyload' src='data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iZW1vdGlvbi1sb2FkaW5nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9Ii04IC04IDQwIDQwIiBzdHJva2U9IiM4ODgiIG9wYWNpdHk9Ii41IiB3aWR0aD0iNjAiIGhlaWdodD0iNjAiPgogIDxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik0xNC44MjggMTQuODI4YTQgNCAwIDAxLTUuNjU2IDBNOSAxMGguMDFNMTUgMTBoLjAxTTIxIDEyYTkgOSAwIDExLTE4IDAgOSA5IDAgMDExOCAweiIvPgo8L3N2Zz4=' data-original='https://nilcloud.link/wp-content/themes/argon/stickers/flower/4.jpg'/></div><div class='emotion-item emotion-item-sticker' code='flower-sun' title=''><img class='lazyload' src='data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iZW1vdGlvbi1sb2FkaW5nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9Ii04IC04IDQwIDQwIiBzdHJva2U9IiM4ODgiIG9wYWNpdHk9Ii41IiB3aWR0aD0iNjAiIGhlaWdodD0iNjAiPgogIDxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik0xNC44MjggMTQuODI4YTQgNCAwIDAxLTUuNjU2IDBNOSAxMGguMDFNMTUgMTBoLjAxTTIxIDEyYTkgOSAwIDExLTE4IDAgOSA5IDAgMDExOCAweiIvPgo8L3N2Zz4=' data-original='https://nilcloud.link/wp-content/themes/argon/stickers/flower/5.jpg'/></div><div class='emotion-item emotion-item-sticker' code='flower-moon' title=''><img class='lazyload' src='data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iZW1vdGlvbi1sb2FkaW5nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9Ii04IC04IDQwIDQwIiBzdHJva2U9IiM4ODgiIG9wYWNpdHk9Ii41IiB3aWR0aD0iNjAiIGhlaWdodD0iNjAiPgogIDxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik0xNC44MjggMTQuODI4YTQgNCAwIDAxLTUuNjU2IDBNOSAxMGguMDFNMTUgMTBoLjAxTTIxIDEyYTkgOSAwIDExLTE4IDAgOSA5IDAgMDExOCAweiIvPgo8L3N2Zz4=' data-original='https://nilcloud.link/wp-content/themes/argon/stickers/flower/6.jpg'/></div><div class='emotion-item emotion-item-sticker' code='flower-water' title=''><img class='lazyload' src='data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iZW1vdGlvbi1sb2FkaW5nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9Ii04IC04IDQwIDQwIiBzdHJva2U9IiM4ODgiIG9wYWNpdHk9Ii41IiB3aWR0aD0iNjAiIGhlaWdodD0iNjAiPgogIDxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik0xNC44MjggMTQuODI4YTQgNCAwIDAxLTUuNjU2IDBNOSAxMGguMDFNMTUgMTBoLjAxTTIxIDEyYTkgOSAwIDExLTE4IDAgOSA5IDAgMDExOCAweiIvPgo8L3N2Zz4=' data-original='https://nilcloud.link/wp-content/themes/argon/stickers/flower/7.jpg'/></div><div class='emotion-item emotion-item-sticker' code='flower-heihei' title=''><img class='lazyload' src='data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iZW1vdGlvbi1sb2FkaW5nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9Ii04IC04IDQwIDQwIiBzdHJva2U9IiM4ODgiIG9wYWNpdHk9Ii41IiB3aWR0aD0iNjAiIGhlaWdodD0iNjAiPgogIDxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik0xNC44MjggMTQuODI4YTQgNCAwIDAxLTUuNjU2IDBNOSAxMGguMDFNMTUgMTBoLjAxTTIxIDEyYTkgOSAwIDExLTE4IDAgOSA5IDAgMDExOCAweiIvPgo8L3N2Zz4=' data-original='https://nilcloud.link/wp-content/themes/argon/stickers/flower/8.jpg'/></div><div class='emotion-item emotion-item-sticker' code='flower-lemon' title=''><img class='lazyload' src='data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iZW1vdGlvbi1sb2FkaW5nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9Ii04IC04IDQwIDQwIiBzdHJva2U9IiM4ODgiIG9wYWNpdHk9Ii41IiB3aWR0aD0iNjAiIGhlaWdodD0iNjAiPgogIDxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik0xNC44MjggMTQuODI4YTQgNCAwIDAxLTUuNjU2IDBNOSAxMGguMDFNMTUgMTBoLjAxTTIxIDEyYTkgOSAwIDExLTE4IDAgOSA5IDAgMDExOCAweiIvPgo8L3N2Zz4=' data-original='https://nilcloud.link/wp-content/themes/argon/stickers/flower/9.jpg'/></div><div class='emotion-item emotion-item-sticker' code='flower-birthday' title=''><img class='lazyload' src='data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iZW1vdGlvbi1sb2FkaW5nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9Ii04IC04IDQwIDQwIiBzdHJva2U9IiM4ODgiIG9wYWNpdHk9Ii41IiB3aWR0aD0iNjAiIGhlaWdodD0iNjAiPgogIDxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik0xNC44MjggMTQuODI4YTQgNCAwIDAxLTUuNjU2IDBNOSAxMGguMDFNMTUgMTBoLjAxTTIxIDEyYTkgOSAwIDExLTE4IDAgOSA5IDAgMDExOCAweiIvPgo8L3N2Zz4=' data-original='https://nilcloud.link/wp-content/themes/argon/stickers/flower/10.jpg'/></div><div class='emotion-item emotion-item-sticker' code='flower-sea' title=''><img class='lazyload' src='data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iZW1vdGlvbi1sb2FkaW5nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9Ii04IC04IDQwIDQwIiBzdHJva2U9IiM4ODgiIG9wYWNpdHk9Ii41IiB3aWR0aD0iNjAiIGhlaWdodD0iNjAiPgogIDxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik0xNC44MjggMTQuODI4YTQgNCAwIDAxLTUuNjU2IDBNOSAxMGguMDFNMTUgMTBoLjAxTTIxIDEyYTkgOSAwIDExLTE4IDAgOSA5IDAgMDExOCAweiIvPgo8L3N2Zz4=' data-original='https://nilcloud.link/wp-content/themes/argon/stickers/flower/11.jpg'/></div><div class='emotion-item emotion-item-sticker' code='flower-vegetable' title=''><img class='lazyload' src='data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iZW1vdGlvbi1sb2FkaW5nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9Ii04IC04IDQwIDQwIiBzdHJva2U9IiM4ODgiIG9wYWNpdHk9Ii41IiB3aWR0aD0iNjAiIGhlaWdodD0iNjAiPgogIDxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik0xNC44MjggMTQuODI4YTQgNCAwIDAxLTUuNjU2IDBNOSAxMGguMDFNMTUgMTBoLjAxTTIxIDEyYTkgOSAwIDExLTE4IDAgOSA5IDAgMDExOCAweiIvPgo8L3N2Zz4=' data-original='https://nilcloud.link/wp-content/themes/argon/stickers/flower/12.jpg'/></div><div class='emotion-item emotion-item-sticker' code='flower-tile' title=''><img class='lazyload' src='data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iZW1vdGlvbi1sb2FkaW5nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9Ii04IC04IDQwIDQwIiBzdHJva2U9IiM4ODgiIG9wYWNpdHk9Ii41IiB3aWR0aD0iNjAiIGhlaWdodD0iNjAiPgogIDxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik0xNC44MjggMTQuODI4YTQgNCAwIDAxLTUuNjU2IDBNOSAxMGguMDFNMTUgMTBoLjAxTTIxIDEyYTkgOSAwIDExLTE4IDAgOSA5IDAgMDExOCAweiIvPgo8L3N2Zz4=' data-original='https://nilcloud.link/wp-content/themes/argon/stickers/flower/13.jpg'/></div><div class='emotion-item emotion-item-sticker' code='flower-utf' title=''><img class='lazyload' src='data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iZW1vdGlvbi1sb2FkaW5nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9Ii04IC04IDQwIDQwIiBzdHJva2U9IiM4ODgiIG9wYWNpdHk9Ii41IiB3aWR0aD0iNjAiIGhlaWdodD0iNjAiPgogIDxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik0xNC44MjggMTQuODI4YTQgNCAwIDAxLTUuNjU2IDBNOSAxMGguMDFNMTUgMTBoLjAxTTIxIDEyYTkgOSAwIDExLTE4IDAgOSA5IDAgMDExOCAweiIvPgo8L3N2Zz4=' data-original='https://nilcloud.link/wp-content/themes/argon/stickers/flower/14.jpg'/></div><div class='emotion-group-description'>Source: github.com/k4yt3x/flowerhd</div></div> </div> <div class="emotion-keyboard-bar"> <div class='emotion-group-name active' index='0'>颜文字</div><div class='emotion-group-name' index='1'>Emoji</div><div class='emotion-group-name' index='2'>小恐龙</div><div class='emotion-group-name' index='3'>花!</div> </div> </div> </div> </div> <input id="post_comment_captcha_seed" value="" style="display: none;"></input> <input id="post_comment_post_id" value="652" style="display: none;"></input> </form> </div> </div> <div id="comment_edit_history" class="modal fade" tabindex="-1" role="dialog" aria-modal="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" style="font-size: 20px;"></h4> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body" style="word-break: break-word;"></div> </div> </div> </div> <div id="comment_pin_comfirm_dialog" class="modal fade" tabindex="-1" role="dialog" aria-modal="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" style="font-size: 20px;"></h4> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body" style="word-break: break-word;"></div> <div class="modal-footer"> <button type="button" class="btn btn-secondary btn-dismiss" data-dismiss="modal"></button> <button type="button" class="btn btn-primary btn-comfirm"></button> </div> </div> </div> </div> <div class="post-navigation card shadow-sm"><div class="post-navigation-item post-navigation-pre"><span class="page-navigation-extra-text"><i class="fa fa-arrow-circle-o-left" aria-hidden="true"></i>上一篇</span><a href="https://nilcloud.link/mysql%e4%bb%8e%e9%9b%b6%e5%88%b0%e5%88%a0%e5%ba%93%e8%b7%91%e8%b7%af/" rel="prev">MySQL从零到删库跑路</a></div><div class="post-navigation-item post-navigation-next"><span class="page-navigation-extra-text">下一篇 <i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i></span><a href="https://nilcloud.link/html5-%e4%bb%a3%e7%a0%81%e8%a7%84%e8%8c%83/" rel="next">HTML5 代码规范</a></div></div><div class="related-posts card shadow-sm"> <h2 class="post-comment-title" style="margin-top: 1.2rem;margin-left: 1.5rem;margin-right: 1.5rem;"> <i class="fa fa-book"></i> <span>推荐文章</span> </h2> <div style="overflow-x: auto;padding: 1.5rem;padding-top: 0.8rem;padding-bottom: 0.8rem;}"><a class="related-post-card" href="https://nilcloud.link/html%e9%80%9f%e6%9f%a5%e5%88%97%e8%a1%a8/"><div class="related-post-card-container"> <div class="related-post-title clamp" clamp-line="3">HTML速查列表</div> <i class="related-post-arrow fa fa-chevron-right" aria-hidden="true"></i> </div></a><a class="related-post-card" href="https://nilcloud.link/javascript%e6%95%99%e7%a8%8b-3/"><div class="related-post-card-container has-thumbnail"> <div class="related-post-title clamp" clamp-line="3">JavaScript教程-3</div> <i class="related-post-arrow fa fa-chevron-right" aria-hidden="true"></i> </div><img class="related-post-thumbnail lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABBJREFUeNpi+P//PwNAgAEACPwC/tuiTRYAAAAASUVORK5CYII=" data-original="https://nilcloud.link/wp-content/uploads/2023/03/Pasted-6-8.jpg"/></a><a class="related-post-card" href="https://nilcloud.link/css%e6%b5%85%e5%b0%9d/"><div class="related-post-card-container has-thumbnail"> <div class="related-post-title clamp" clamp-line="3">CSS浅尝</div> <i class="related-post-arrow fa fa-chevron-right" aria-hidden="true"></i> </div><img class="related-post-thumbnail lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABBJREFUeNpi+P//PwNAgAEACPwC/tuiTRYAAAAASUVORK5CYII=" data-original="https://nilcloud.link/wp-content/uploads/2023/03/Pasted-4.jpg"/></a><a class="related-post-card" href="https://nilcloud.link/html5-%e4%bb%a3%e7%a0%81%e8%a7%84%e8%8c%83/"><div class="related-post-card-container"> <div class="related-post-title clamp" clamp-line="3">HTML5 代码规范</div> <i class="related-post-arrow fa fa-chevron-right" aria-hidden="true"></i> </div></a><a class="related-post-card" href="https://nilcloud.link/javascript%e6%95%99%e7%a8%8b-1/"><div class="related-post-card-container has-thumbnail"> <div class="related-post-title clamp" clamp-line="3">JavaScript教程-1</div> <i class="related-post-arrow fa fa-chevron-right" aria-hidden="true"></i> </div><img class="related-post-thumbnail lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABBJREFUeNpi+P//PwNAgAEACPwC/tuiTRYAAAAASUVORK5CYII=" data-original="https://nilcloud.link/wp-content/uploads/2023/03/Pasted-6-8.jpg"/></a><a class="related-post-card" href="https://nilcloud.link/javascript%e6%95%99%e7%a8%8b-4/"><div class="related-post-card-container has-thumbnail"> <div class="related-post-title clamp" clamp-line="3">JavaScript教程-4</div> <i class="related-post-arrow fa fa-chevron-right" aria-hidden="true"></i> </div><img class="related-post-thumbnail lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABBJREFUeNpi+P//PwNAgAEACPwC/tuiTRYAAAAASUVORK5CYII=" data-original="https://nilcloud.link/wp-content/uploads/2023/03/Pasted-6-8.jpg"/></a><a class="related-post-card" href="https://nilcloud.link/html%e5%85%a5%e9%97%a8%e6%95%99%e7%a8%8b/"><div class="related-post-card-container has-thumbnail"> <div class="related-post-title clamp" clamp-line="3">HTML入门教程</div> <i class="related-post-arrow fa fa-chevron-right" aria-hidden="true"></i> </div><img class="related-post-thumbnail lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABBJREFUeNpi+P//PwNAgAEACPwC/tuiTRYAAAAASUVORK5CYII=" data-original="https://nilcloud.link/wp-content/uploads/2023/03/Pasted.png"/></a><a class="related-post-card" href="https://nilcloud.link/xml-%e8%a7%a3%e6%9e%90/"><div class="related-post-card-container"> <div class="related-post-title clamp" clamp-line="3">XML 解析</div> <i class="related-post-arrow fa fa-chevron-right" aria-hidden="true"></i> </div></a><a class="related-post-card" href="https://nilcloud.link/html-%e6%a0%87%e7%ad%be%e7%ae%80%e5%86%99%e5%8f%8a%e5%85%a8%e7%a7%b0/"><div class="related-post-card-container"> <div class="related-post-title clamp" clamp-line="3">HTML 标签简写及全称</div> <i class="related-post-arrow fa fa-chevron-right" aria-hidden="true"></i> </div></a><a class="related-post-card" href="https://nilcloud.link/html-dom/"><div class="related-post-card-container has-thumbnail"> <div class="related-post-title clamp" clamp-line="3">HTML DOM</div> <i class="related-post-arrow fa fa-chevron-right" aria-hidden="true"></i> </div><img class="related-post-thumbnail lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABBJREFUeNpi+P//PwNAgAEACPwC/tuiTRYAAAAASUVORK5CYII=" data-original="https://www.nilcloud.link/wp-content/uploads/2023/04/image.png"/></a></div></div> <footer id="footer" class="site-footer card shadow-sm border-0"> <div>由 <a href="https://www.dkdun.cn/aff/XPYAWQMA" target="_blank"><strong>DK盾</strong></a> 独家赞助</div> <div><small>Theme <a href="https://github.com/solstice23/argon-theme" target="_blank"><strong>Argon</strong></a></small></div> </footer> </main> </div> </div> <script src="https://nilcloud.link/wp-content/themes/argon/argontheme.js?v1.3.5"></script> <link rel="stylesheet" href="https://nilcloud.link/wp-content/themes/argon/assets/vendor/highlight/styles/vs2015.css"> </div> </div> <script type="speculationrules"> {"prefetch":[{"source":"document","where":{"and":[{"href_matches":"\/*"},{"not":{"href_matches":["\/wp-*.php","\/wp-admin\/*","\/wp-content\/uploads\/*","\/wp-content\/*","\/wp-content\/plugins\/*","\/wp-content\/themes\/argon\/*","\/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]} </script> <script type="text/javascript" src="https://nilcloud.link/wp-content/plugins/markup-markdown/assets/lightbox2/js/lightbox.min.js?ver=2.11.4" id="lightbox-js"></script> <script type="text/javascript" src="https://nilcloud.link/wp-content/plugins/markup-markdown/assets/imagesloaded/js/imagesloaded.pkgd.min.js?ver=5.0.0" id="imagesloaded-js"></script> </body> <script>!function(){function n(n,e,t){return n.getAttribute(e)||t}function e(n){return document.getElementsByTagName(n)}function t(){var t=e("script"),o=t.length,i=t[o-1];return{l:o,z:n(i,"zIndex",-1),o:n(i,"opacity",1),c:n(i,"color","255,255,255"),n:n(i,"count",150)}}function o(){a=m.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,c=m.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight}function i(){r.clearRect(0,0,a,c);var n,e,t,o,m,l;s.forEach(function(i,x){for(i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>a||i.x<0?-1:1,i.ya*=i.y>c||i.y<0?-1:1,r.fillRect(i.x-.5,i.y-.5,1,1),e=x+1;e<u.length;e++)n=u[e],null!==n.x&&null!==n.y&&(o=i.x-n.x,m=i.y-n.y,l=o*o+m*m,l<n.max&&(n===y&&l>=n.max/2&&(i.x-=.03*o,i.y-=.03*m),t=(n.max-l)/n.max,r.beginPath(),r.lineWidth=t/2,r.strokeStyle="rgba("+d.c+","+(t+.2)+")",r.moveTo(i.x,i.y),r.lineTo(n.x,n.y),r.stroke()))}),x(i)}var a,c,u,m=document.createElement("canvas"),d=t(),l="c_n"+d.l,r=m.getContext("2d"),x=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(n){window.setTimeout(n,1e3/45)},w=Math.random,y={x:null,y:null,max:2e4};m.id=l,m.style.cssText="position:fixed;top:0;left:0;z-index:"+d.z+";opacity:"+d.o,e("body")[0].appendChild(m),o(),window.onresize=o,window.onmousemove=function(n){n=n||window.event,y.x=n.clientX,y.y=n.clientY},window.onmouseout=function(){y.x=null,y.y=null};for(var s=[],f=0;d.n>f;f++){var h=w()*a,g=w()*c,v=2*w()-1,p=2*w()-1;s.push({x:h,y:g,xa:v,ya:p,max:6e3})}u=s.concat([y]),setTimeout(function(){i()},100)}(); </script> </html>