• HTML（Hyper Text Markup Language），超文本标记语言
  • XHTML（extensible Hyper Text Markup Language），扩展的超文本标记语言

HTML 5 的语法变化

  • 标签不再区分大小写
  • 元素可以省略结束标签
  • 允许省略属性值的属性HTML 5 中允许省略属性值的属性：checked、readonly、disabled、selected、multiple、required 等
  • 允许属性值不使用引号

HTML 元素

  • HTML 文档声明：

  • 根标签

  • 开始标签、属性、元素内容、结束标签

  • 空标签（没有内容的元素），没有闭合标签

    • 在 HTML 中，空标签没有结束标签
    • 在 XHTML 中，空标签必须在开始标签中被关闭（在右尖括号前加上反斜杠）
    • 如：、02 HTML - 图1、
      、、、、、、、、、、、、、、<spacer ></spacer>、<wbr ></wbr>、&lt;!DOCTYPE html&gt;、<!-- --></li></ul> </li></ul> <h1 id="e1emv0"><a name="e1emv0" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML 属性</h1><ul> <li><p>属性值应该始终被包括在引号内</p> </li><li><p>核心属性</p> <ul> <li>id：定义元素的唯一id </li><li>class：定义元素的类名（classname）</li><li>style：规定元素的行内样式（inline style）</li><li>title：规定元素的额外信息，可在工具提示中显示（在鼠标移到元素上时显示一段工具提示文本）</li><li>hidden：为 true 时，通知浏览器不显示该组件</li></ul> <p><a href="https://sdky.gitee.io/img/HTML5标签集合.jpg"> <img src="/projects/sdky-java-note/ccf46279036d11456a90cc9ee96cccf0.jpeg" alt="HTML5标签集合"> </a><br>图 1 HTML5标签集合</p> </li></ul> <h1 id="d7cnum"><a name="d7cnum" class="reference-link"></a><span class="header-link octicon octicon-link"></span>文档头部 &lt;head&gt;</h1><ul> <li>在 元素中可以插入脚本（scripts）、样式文件（CSS）、及各种 meta 信息</li><li>，定义头部标签<ul> <li><title>，定义文档标题</li><li>&lt;meta&gt;，基本的元数据，通常以 名称/值 对出现，属性：name（把 content 属性关联到一个名称）、http-equiv（把 content 属性关联到 HTTP 头部）、content（必需属性，与 http-equiv 或 name 属性相关的元信息）、charset（文档的字符编码）</li><li>&lt;link&gt;：定义文档与外部资源之间的关系，属性：rel（必需属性，当前文档与被链接文档之间的关系，如 stylesheet、icon）、type（被链接文档的 MIME 类型）、href（被链接文档的位置）</li><li>&lt;style&gt;，用于引入样式定义，必需属性：type</li><li>&lt;script&gt;，用于加载脚本文件，属性 type：指示脚本的 MIME 类型，默认值是 &#34;text/javascript&#34;；async 属性：仅适用于外部脚本，规定脚本将被异步执行，属性值 &#34;async&#34;；defer 属性：规定是否对脚本执行进行延迟，直到页面加载为止，属性值 &#34;defer&#34;<br></title></li></ul> </li></ul> <pre><code>&lt;script type=&#34;text/javascript&#34;&gt; function goPage(num) { // 找到表单，给 currentPage 设值，然后提交 var form1= document.getElementById(&#34;form1&#34;); form1.currentPage.value=num; form1.submit(); } &lt;/script&gt; </code></pre> <h1 id="awymv"><a name="awymv" class="reference-link"></a><span class="header-link octicon octicon-link"></span>块</h1><h2 id="apwiad"><a name="apwiad" class="reference-link"></a><span class="header-link octicon octicon-link"></span>块级元素（block element）</h2><ul> <li>总是在<strong>新行</strong>上开始</li><li>高度，行高以及外边距和内边距都可控制</li><li>宽度缺省是它的容器的 100%，除非设定一个宽度</li><li>可以容纳内联元素和其它块级元素</li><li>常见块级元素：<h1>、<div>、<p>、</p><ul>、、、<pre></pre><table><form></form></table></ul></div></h1></li></ul> <h2 id="82q3m"><a name="82q3m" class="reference-link"></a><span class="header-link octicon octicon-link"></span>内联元素（inline element）</h2><ul> <li>和其它元素都在一行上</li><li>高、行高及外边距和内边距不可改变</li><li>宽度就是它的文字或图片的宽度，不可改变</li><li>内联元素只能容纳文本或者其它内联元素</li><li>常见内联元素：、<b>、<strong>、、<a>、<img/>、<input/>、<select>、</select><textarea>、&lt;label&gt;<br></textarea></a></strong></b></li></ul> <h2 id="b4l2xy"><a name="b4l2xy" class="reference-link"></a><span class="header-link octicon octicon-link"></span>布局</h2><ul> <li><div>，块级元素，用于组合其他 HTML 元素的容器</li><li>，内联元素，用于组合文档中的内联元素（默认不会换行）<br></div></li></ul> <h1 id="89h2s3"><a name="89h2s3" class="reference-link"></a><span class="header-link octicon octicon-link"></span>文档章节</h1><ul> <li>、<header>、<nav>、<asside>、<article>、<section>、<footer>、<hx><br></hx></footer></section></article></asside></nav></header><br><a href="https://sdky.gitee.io/img/主体结构标签.jpg"> <img src="/projects/sdky-java-note/aa72ab2c4191a4813e2b2fe56b005554.jpeg" alt="主体结构标签"> </a><br>图 2 主体结构标签</li></ul> <h1 id="738h24"><a name="738h24" class="reference-link"></a><span class="header-link octicon octicon-link"></span>基本标签</h1><ul> <li><h1> 至 </h1><h6>，标题</li><li><p>，段落，会自动在其前后创建一些空白</li><li><br/>，换行，空标签</li><li></p><hr/>，水平线，空标签</li><li><!-- 注释内容 --> ，注释<br></h6></li></ul> <h1 id="bph4nt"><a name="bph4nt" class="reference-link"></a><span class="header-link octicon octicon-link"></span>文本格式化</h1><ul> <li><font>，定义字体颜色、大小、字体，属性：color、size、face</li><li><b>，定义粗体文本</li><li><strong>，定义粗体文本</li><li><i>，定义斜体字</li><li><em>，定义强调文本，实际效果与斜体文本差不多</li><li><small>，定义小号字体文本</li><li><sub>，定义下标文本</li><li><sup>，定义上标文本</li><li><tt>，定义等宽文本</li><li><ins>，定义插入字</li><li><del>，定义删除字</li><li><mark>，定义带有记号（高亮）的文本</li><li><cite>，定义作品的标题</li><li><q>，定义一个短的引用，在引用的周围插入引号</li><li><bdo>，定义文本显示方向，属性 dir 的值：ltr（左到右）、rtl（右到左）</li><li><pre>，预格式文本，会保留空格、回车、Tab 键和其它格式字符</li><li><address>，地址</li><li>注意：HTML 代码中的所有连续的空行和换行被显示为一个空格<br></address></pre></bdo></q></cite></mark></del></ins></tt></sup></sub></small></em></i></strong></b></font></li></ul> <h1 id="dojydz"><a name="dojydz" class="reference-link"></a><span class="header-link octicon octicon-link"></span>超链接 &lt;a&gt;</h1><ul> <li><p>作用</p> <ul> <li>创建指向另一个文档的链接</li><li>创建一个文档内部的锚点</li><li>链接到 Email 地址</li></ul> </li><li><p>属性</p> <ul> <li>href，其属性的值可以是任何有效文档的相对或绝对 URL，包括片段标识符和 JavaScript 代码段<ul> <li><h1 id="b4fogw"><a name="b4fogw" class="reference-link"></a><span class="header-link octicon octicon-link"></span>包含了一个位置信息，默认的锚是 #top 也就是网页的上端，在页面很长的时候会使用 # 来定位页面的具体位置，格式为：#id属性、# 标签的 name 属性</h1></li><li>定义一个死链接 <code>href=&#34;javascript:void(0);&#34;</code></li><li>链接到 Email 地址 <code>href=&#34;mailto:admin@gmail.com&#34;</code></li><li>拨号 <code>href=&#34;tel:13612345678&#34;</code></li></ul> </li><li>target，被链接的文档在何处显示，值： <em>self（自身框架）、 _blank（新窗口）、_parent（父框架）、_top（整个窗口）、_framename</em> （在指定的框架中打开被链接文档）</li></ul> </li></ul> <h1 id="f0nndm"><a name="f0nndm" class="reference-link"></a><span class="header-link octicon octicon-link"></span>图片 &lt;img /&gt;</h1><ul> <li>空标签</li><li>属性<ul> <li>alt，必需属性，定义有关图形的短的描述</li><li>src，必需属性，指定图片文件所在的位置</li><li>height，定义图像的高度</li><li>width，定义图像的宽度</li><li>usemap，将图像定义为图像映射（当用户单击其中某一个区域时，将被链接到不同的文档中）</li></ul> </li></ul> <h1 id="arisq5"><a name="arisq5" class="reference-link"></a><span class="header-link octicon octicon-link"></span>列表</h1><ul> <li><p><ul>，定义无序列表</p> <ul> <li>，定义列表项目</li></ul> </li><li><p>，定义有序列表，属性 type、start</p> <ul> <li>，定义列表项目</li></ul> </li><li><p>，自定义列表</p> <ul> <li>，定义标题列表项</li><li>，定义普通列表项<br></ul></li></ul> </li></ul> <h1 id="8h7l58"><a name="8h7l58" class="reference-link"></a><span class="header-link octicon octicon-link"></span>表格 &lt;table&gt;</h1><ul> <li><p>属性：border=&#34;1&#34;（边框宽度）、cellpadding=&#34;0&#34;、cellspacing=&#34;0&#34;、width（表格宽度）</p> </li><li><p>，表格标题</p> </li><li><p>，表头</p> </li><li>，表格页脚</li><li>，表格主体<ul> <li>，表格行，属性：align（值：left、center、right）、bgcolor<ul> <li>，表头单元格，文本显示为粗体且居中</li><li>，标准单元格，默认显示为正常字体且左对齐，属性包括：colspan（规定单元格可横跨的列数）、rowspan（规定单元格可横跨的行数）、height、width</li></ul> </li></ul> </li></ul> <h1 id="85kbf9"><a name="85kbf9" class="reference-link"></a><span class="header-link octicon octicon-link"></span>表单和输入 &lt;form&gt;</h1><ul> <li>属性：action（必需属性，指定表单被提交的地址）、method、enctype（定义对表单数据进行编码的方式，值：application/x-www-form-urlencoded、multipart/form-data、text/plain）、name、target（规定在何处打开 action 属性的 URL）、autocomplete（表单是否启用自动完成功能）、novalidate（当提交表单时不对其进行验证）</li><li>表单控件的 name 属性指定请求参数名，value 属性指定请求参数值</li><li>没有 name 属性的表单控件不会生成请求参数</li><li>如果多个表单控件有相同的 name 属性，则多个表单控件只生成一个请求参数，只是该参数有多个值</li><li>表单控件可以使用 form 属性指定所属的一个或多个表单</li><li><fieldset>，将表单内的相关元素分组，用 <legend> 标签定义分组的标题</li><li><input/>，输入域，空标签，属性包括：<ul> <li>type，定义输入类型，其属性值：text、password、radio（单选框）、checkbox（复选框）、file（文件上传域）、hidden（隐藏域）、image、submit（提交按钮）、reset、button、search、email、number、url、date、time、datetime、datetime-local</li><li>name，input 元素的名称</li><li>value，input 元素的值</li><li>checked，预先选定复选框或单选按钮</li><li>disabled，禁用此 input 元素</li><li>required，在提交表单之前必须输入（不能为空）</li><li>accept，规定通过<strong>文件上传</strong>进行提交的文件类型，可用值：image/<em>，audio/</em>、vidio/*，不带“;”的 MIME type，以“.”开始的文件后缀名（有多种类型时用&#34;,&#34;分隔）</li><li>multiple，允许一个以上的值</li><li>placeholder，提供一种提示，描述输入域所期待的值</li><li>maxlength，指定文本框中所允许输入的最大字符数</li><li>readonly，指定该文本框内的值不允许用户修改</li><li>min、max、step：这 3 个属性只对数值类型（type=&#34;number&#34;）、日期类型的 <input/> 元素有效，这 3 个属性控制该表单控件的值必须在 min~max 之间，并符合 step 步长</li><li>pattern，规定输入字段的值的模式或格式，可用 title 属性来描述模式</li><li>autocomplete：规定输入字段是否应该启用自动完成功能，属性值：on、off</li></ul> </li><li><select>，下拉菜单或列表框，属性：name、multiple（是否允许多选）、size（可见选项的数目）（一旦指定了 multiple 或 size 属性，</select> 标签就会自动生成列表框）<ul> <li><optgroup>，定义选项组，属性：label、disabled</li><li><option>，菜单项或列表项，属性：value、selected（是否处于被选中状态）、disabled、</li></ul> </li><li><textarea>，多行文本域，属性：cols（宽度）、rows（高度）、wrap（规定在表单提交时文本区域中的文本是如何换行的，默认值为 soft，文本不换行，值为 hard，文本换行）</li><li>&lt;button&gt;，按钮，属性：name、value、type（属性值：submit、button、reset）、disabled<ul> <li>注意：如果在 &lt;form&gt; 中使用了 &lt;button&gt;，其 type 属性的默认值：IE 浏览器中是 &#34;button&#34;，而 W3C 浏览器中是 &#34;submit&#34;</li></ul> </li><li>&lt;label&gt;，为 input 元素定义标注（当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上），for 属性规定 label 与哪个表单元素（hidden 除外）绑定（其属性值应设置为相关元素的 <strong>id 属性</strong>的值），如果没有指定 for 属性，则为第一个子孙可关联元素<br></textarea></option></optgroup></legend></fieldset></li></ul> <h1 id="35rxvc"><a name="35rxvc" class="reference-link"></a><span class="header-link octicon octicon-link"></span>框架</h1><ul> <li>，定义框架集，属性：rows、clos</li><li>，定义框架集的窗口或框架，scrolling、noresize</li><li><noframes>，定义针对不支持框架的用户的替代内容，子标签 <body></li><li><iframe>，定义内联框架，属性：src（指定该 iframe 装载的页面的 url ）、align、height、width、frameborder等<br></noframes></li></ul> <h1 id="75ghpj"><a name="75ghpj" class="reference-link"></a><span class="header-link octicon octicon-link"></span>音频与视频</h1><h2 id="2r890n"><a name="2r890n" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML 标签</h2><ul> <li><audio></li><li><video> </li><li><p>属性：</p> <ul> <li>src：必须属性，音视频文件的 URL</li><li>controls：是否向用户显示控件。</li><li>autoplay：音视频在就绪后是否马上播放</li><li>preload：可取值为“none”（默认值）、“metadata”、“auto”，音频在页面加载时进行加载，并预备播放（如果使用“autoplay”，则忽略该属性）</li><li>loop：当音视频结束时是否重新开始播放<br></video></audio></li></ul> </li></ul> <h2 id="1zm3n0"><a name="1zm3n0" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Audio/Video DOM 对象</h2><ul> <li><p>控制多媒体播放<code>load()</code>：加载媒体内容<code>play()</code>：开始播放<code>pause()</code>：暂停播放playbackRate：播放速度currentTime：播放进度volume：音量muted：静音</p> </li><li><p>查询多媒体状态paused：是否暂停seeking：是否正在跳转ended：是否播放完成duration：媒体时长initialTime：媒体开始时间</p> </li><li><p>多媒体相关事件loadstart：开始请求媒内容loadmetadata：媒体元数据已经加载完成canplay：加载了一些内容，可以开始播放play：调用 play()，或设置了 autoplaywaiting：缓冲数据不够，播放暂停playing：正在播放</p> </li></ul> <h1 id="cbem83"><a name="cbem83" class="reference-link"></a><span class="header-link octicon octicon-link"></span>字符实体</h1><ul> <li><p><code><span title=" ">&amp;nbsp;</code>（不换行空格，其占据宽度受字体影响）、<code><span title=" ">&amp;ensp;</code>（其占据的宽度正好是 1/2 个中文宽度，且基本上不受字体影响）、<code><span title=" ">&amp;emsp;</code>（其占据的宽度正好是 1 个中文宽度，且基本上不受字体影响）</p> <p><a href="https://sdky.gitee.io/img/HTML字符实体.jpg"> <img src="/projects/sdky-java-note/2e2c13fb9809a33cbadf5aeaba8066ca.jpeg" alt="HTML字符实体"> </a><br>图 3 HTML字符实体</p> </li></ul> <!-- 原文：https://sdky.gitee.io/4 Frontend/02 HTML.html --></plaintext></nextid></li></ul></li></ul> </article> <div class="copyright-statment help-block"> 当前内容版权归 <a target="_blank" title="sdky" href="https://sdky.gitee.io/">sdky</a> 或其关联方所有，如需对内容或内容相关联开源项目进行关注与资助，请访问 <a target="_blank" title="sdky" href="https://sdky.gitee.io/">sdky</a> . </div> <div class="row hung-read-link"> <div class="col-xs-12 hung-pre" style="display: none"> <span class="text-muted">上一篇:</span><a href="#"></a> </div> <div class="col-xs-12 hung-next" style="display: none"> <span class="text-muted">下一篇:</span><a href="#"></a> </div> </div> <div class="bookstack-bars"> <ul> <li class="visible-xs visible-sm bars-menu bars-menu-hide"><a href="/" title="首页"><i class="fa fa-home"></i></a></li> <li class="visible-xs visible-sm bars-menu bars-menu-hide"> <a title="分享" href="javascript:" data-toggle="modal" data-target="#ModalShare"><i class="fa fa-share-alt"></i></a> </li> <li class="visible-xs visible-sm bars-menu bars-menu-hide"> <a title="阅读记录" class="showModalHistory" href="/record/3243" rel="nofollow"><i class="fa fa-clock-o"></i></a> </li> <li class="visible-xs visible-sm bars-menu bars-menu-hide"> <a rel="nofollow" href="/bookmark/list/3243" data-bookid="3243" class="showModalBookmark" title="书签"> <img src="https://static.sitestack.cn/static/images/icon-bookmark-list.png" alt="书签"> </a> </li> <li class="visible-xs visible-sm bars-menu bars-menu-hide"> <a href="/bookmark/" data-docid="217642" rel="nofollow" class="bookmark-action"> <span class="bookmark-add "> <img src="https://static.sitestack.cn/static/images/icon-bookmark-add.png" alt="添加书签"></span> <span class="bookmark-remove hide"> <img src="https://static.sitestack.cn/static/images/icon-bookmark-remove.png" alt="移除书签"></span> </a> </li> <li class="book-menu visible-xs visible-sm"> <a href="javascript:void(0);" title="菜单"><i class="fa fa-align-justify"></i></a> </li> <li class="visible-xs visible-sm bars-menu-toggle"> <a href="#" title="更多功能"><i class="fa fa-plus-circle"></i><i class="fa fa-minus-circle hide"></i></a> </li> <li> <a href="javascript:;" class="view-backtop"><i class="fa fa-arrow-up" aria-hidden="true"></i></a> </li> </ul> </div> </div> </div> </div> <div class="manual-left"> <div class="article-search" data-bookid="3243"> <form id="searchForm" action="/read/sdky-java-note/search" method="post"> <div class="input-group"> <input type="text" name="keyword" placeholder="Search..." autocomplete="off" class="form-control"> <span class="input-group-addon input-group-addon-clear"><i class="fa fa-remove"></i></span> <span class="input-group-addon"> <button type="submit"><i class="fa fa-search"></i></button> </span> </div> </form> <div class="pull-right hidden-xs"> <i class="fa fa-align-justify"></i> </div> </div> <div class="article-menu"> <div class="article-menu-detail collapse-menu"> <ul><li id="217581"><a href="/read/sdky-java-note/68fe9cfa75ebb8cd.md" title="简介">简介</a></li><li id="217670" class="collapse-node collapse-hide"><span></span><a href="/read/sdky-java-note/1JavaSE.md" title="1 Java SE">1 Java SE</a><ul><li id="217582"><a href="/read/sdky-java-note/24467387ed19dbf5.md" title="01 Java概述">01 Java概述</a></li><li id="217583"><a href="/read/sdky-java-note/7622c484c332d225.md" title="02 数据类型和运算符">02 数据类型和运算符</a></li><li id="217584"><a href="/read/sdky-java-note/c1d6eee175140b41.md" title="03 流程控制">03 流程控制</a></li><li id="217585"><a href="/read/sdky-java-note/f917b53177247f88.md" title="04 方法">04 方法</a></li><li id="217586"><a href="/read/sdky-java-note/24b7e59ce2d9a126.md" title="05 数组">05 数组</a></li><li id="217587"><a href="/read/sdky-java-note/7c9102384b2980c5.md" title="06 修饰符">06 修饰符</a></li><li id="217588"><a href="/read/sdky-java-note/ebb8b9435fbf0d38.md" title="07 类与对象">07 类与对象</a></li><li id="217589"><a href="/read/sdky-java-note/ea09fcf8b4393745.md" title="09 继承与组合">09 继承与组合</a></li><li id="217590"><a href="/read/sdky-java-note/6809b21ef21cc213.md" title="10 多态">10 多态</a></li><li id="217591"><a href="/read/sdky-java-note/b6ab2eb6fe6a0f50.md" title="11 代码块">11 代码块</a></li><li id="217592"><a href="/read/sdky-java-note/10224c95c8e8b218.md" title="14 基本类型包装类">14 基本类型包装类</a></li><li id="217593"><a href="/read/sdky-java-note/e013ab767a7226df.md" title="15 抽象类">15 抽象类</a></li><li id="217594"><a href="/read/sdky-java-note/658ca9dd2b70e9d9.md" title="16 接口">16 接口</a></li><li id="217595"><a href="/read/sdky-java-note/d5662de340a0d562.md" title="17 内部类">17 内部类</a></li><li id="217596"><a href="/read/sdky-java-note/a7a69516902fe5a2.md" title="18 枚举类">18 枚举类</a></li><li id="217597"><a href="/read/sdky-java-note/b31aa5f9cea014a5.md" title="19 常用类">19 常用类</a></li><li id="217598"><a href="/read/sdky-java-note/6f4952a82fe676f4.md" title="20 异常处理">20 异常处理</a></li><li id="217599"><a href="/read/sdky-java-note/fe65c7aeb76516e3.md" title="21 多线程_01">21 多线程_01</a></li><li id="217600"><a href="/read/sdky-java-note/e4e58f3631a1175b.md" title="21 多线程_02">21 多线程_02</a></li><li id="217601"><a href="/read/sdky-java-note/0c3b2637a317684e.md" title="22 数据结构">22 数据结构</a></li><li id="217602"><a href="/read/sdky-java-note/000d271cbf26a471.md" title="23 集合框架">23 集合框架</a></li><li id="217603"><a href="/read/sdky-java-note/3e818173bf729d10.md" title="24 泛型">24 泛型</a></li><li id="217604"><a href="/read/sdky-java-note/72ded20221072a59.md" title="25 IO操作">25 IO操作</a></li><li id="217605"><a href="/read/sdky-java-note/dd70a8955e6cda44.md" title="26 网络编程">26 网络编程</a></li><li id="217606"><a href="/read/sdky-java-note/07c3a30d494a24d9.md" title="27 反射">27 反射</a></li><li id="217607"><a href="/read/sdky-java-note/7b6f7ae1daa2fb6f.md" title="28 注解">28 注解</a></li><li id="217608"><a href="/read/sdky-java-note/6453b136950f7688.md" title="29 Java Bean">29 Java Bean</a></li><li id="217609"><a href="/read/sdky-java-note/04a914d9cf71364d.md" title="30 单元测试">30 单元测试</a></li><li id="217610"><a href="/read/sdky-java-note/776d1f883c139550.md" title="32 Java 8新特性">32 Java 8新特性</a></li><li id="217611"><a href="/read/sdky-java-note/0c66accfdd942147.md" title="33 设计模式">33 设计模式</a></li><li id="217612"><a href="/read/sdky-java-note/309eb837dd1ac6a5.md" title="35 JVM">35 JVM</a></li><li id="217613"><a href="/read/sdky-java-note/a9ec2eaf1c8cea85.md" title="40 Commons Lang常用类">40 Commons Lang常用类</a></li></ul></li><li id="217671" class="collapse-node collapse-hide"><span></span><a href="/read/sdky-java-note/2JavaEE.md" title="2 Java EE">2 Java EE</a><ul><li id="217614"><a href="/read/sdky-java-note/c6038526340efca5.md" title="01 MySQL 01">01 MySQL 01</a></li><li id="217615"><a href="/read/sdky-java-note/197b4f7f0473b633.md" title="01 MySQL 02">01 MySQL 02</a></li><li id="217616"><a href="/read/sdky-java-note/71b5d40b1db57043.md" title="02 JDBC">02 JDBC</a></li><li id="217617"><a href="/read/sdky-java-note/ce61a536fe182e50.md" title="03 Tomcat和网络协议">03 Tomcat和网络协议</a></li><li id="217618"><a href="/read/sdky-java-note/009a325a1e2511c2.md" title="04 Servlet">04 Servlet</a></li><li id="217619"><a href="/read/sdky-java-note/ab33365cb1db03d0.md" title="05 JSP">05 JSP</a></li><li id="217620"><a href="/read/sdky-java-note/96bce0b0abc9c45c.md" title="06 Filter和Listener">06 Filter和Listener</a></li><li id="217621"><a href="/read/sdky-java-note/70de7cfe17f154d2.md" title="07 Struts 2">07 Struts 2</a></li><li id="217622"><a href="/read/sdky-java-note/6764a7f2337d9e3d.md" title="08 Spring">08 Spring</a></li><li id="217623"><a href="/read/sdky-java-note/44677536b4ff33ce.md" title="09 Spring MVC">09 Spring MVC</a></li><li id="217624"><a href="/read/sdky-java-note/fe6fbe5acccb71c6.md" title="10 My Batis">10 My Batis</a></li><li id="217625"><a href="/read/sdky-java-note/2ab67cb3992e14c0.md" title="11 SSM整合和应用分层">11 SSM整合和应用分层</a></li><li id="217626"><a href="/read/sdky-java-note/3e78ff1a5c3d158d.md" title="12 Shiro">12 Shiro</a></li><li id="217627"><a href="/read/sdky-java-note/c8aa78e7825b7341.md" title="13 SSO">13 SSO</a></li><li id="217628"><a href="/read/sdky-java-note/7441fbf0e7cb9448.md" title="16 Free Marker">16 Free Marker</a></li><li id="217629"><a href="/read/sdky-java-note/3d90707872055625.md" title="17 Spring Boot">17 Spring Boot</a></li><li id="217630"><a href="/read/sdky-java-note/581f2e869751360d.md" title="19 Redis">19 Redis</a></li><li id="217631"><a href="/read/sdky-java-note/d82edfdcfdb6395b.md" title="20 Mongo DB">20 Mongo DB</a></li><li id="217632"><a href="/read/sdky-java-note/46d8410df182e699.md" title="26 RES Tful">26 RES Tful</a></li><li id="217633"><a href="/read/sdky-java-note/f87266ffa061fd37.md" title="27 搜索引擎">27 搜索引擎</a></li></ul></li><li id="217666" class="collapse-node collapse-hide"><span></span><a href="/read/sdky-java-note/3Microservices.md" title="3 Microservices">3 Microservices</a><ul><li id="217634"><a href="/read/sdky-java-note/95c85d35193a918e.md" title="01 分布式网站架构">01 分布式网站架构</a></li><li id="217635"><a href="/read/sdky-java-note/bece1dd4a746261f.md" title="05 Dubbo">05 Dubbo</a></li><li id="217636"><a href="/read/sdky-java-note/f29987691cb187e7.md" title="06 Zoo Keeper">06 Zoo Keeper</a></li><li id="217637"><a href="/read/sdky-java-note/7b251c8b2ee3bb57.md" title="07 Active MQ">07 Active MQ</a></li><li id="217638"><a href="/read/sdky-java-note/002bc85808ccd970.md" title="08 Rabbit MQ">08 Rabbit MQ</a></li><li id="217639"><a href="/read/sdky-java-note/2b46449c9d901ad8.md" title="09 Kafka">09 Kafka</a></li><li id="217640"><a href="/read/sdky-java-note/318e3b01cd09d06a.md" title="10 Spring Cloud">10 Spring Cloud</a></li></ul></li><li id="217667" class="jstree-open collapse-node"><span></span><a href="/read/sdky-java-note/4Frontend.md" title="4 Frontend">4 Frontend</a><ul><li id="217641"><a href="/read/sdky-java-note/6eeeb56f604b0303.md" title="01 XML">01 XML</a></li><li id="217642"><a href="/read/sdky-java-note/64e4bab231bcfd2c.md" title="02 HTML" class="jstree-clicked">02 HTML</a></li><li id="217643"><a href="/read/sdky-java-note/a604f300dc59e1ac.md" title="03 CSS">03 CSS</a></li><li id="217644"><a href="/read/sdky-java-note/df59f3d1cc2d37a7.md" title="04 JavaScript语法">04 JavaScript语法</a></li><li id="217645"><a href="/read/sdky-java-note/0cd9a1de3e6eb79f.md" title="05 BOM DOM 事件处理">05 BOM DOM 事件处理</a></li><li id="217646"><a href="/read/sdky-java-note/5a5753375a21bd83.md" title="06 Ajax和JSON">06 Ajax和JSON</a></li><li id="217647"><a href="/read/sdky-java-note/c38d437eea1fb043.md" title="07 J Query">07 J Query</a></li><li id="217648"><a href="/read/sdky-java-note/cf8eb3a01e6a34c9.md" title="08 Easy UI">08 Easy UI</a></li><li id="217649"><a href="/read/sdky-java-note/0ec053aee52cd681.md" title="09 Bootstrap">09 Bootstrap</a></li><li id="217650"><a href="/read/sdky-java-note/a52684443a81d6c3.md" title="10 JS插件">10 JS插件</a></li><li id="217651"><a href="/read/sdky-java-note/b860146e99667326.md" title="11 前端开发">11 前端开发</a></li></ul></li><li id="217668" class="collapse-node collapse-hide"><span></span><a href="/read/sdky-java-note/5DevOps.md" title="5 Dev Ops">5 Dev Ops</a><ul><li id="217652"><a href="/read/sdky-java-note/2a4a49ca94855b1e.md" title="01 Maven和Gradle">01 Maven和Gradle</a></li><li id="217653"><a href="/read/sdky-java-note/371a5a2bcd2f53e9.md" title="02 UML">02 UML</a></li><li id="217654"><a href="/read/sdky-java-note/4b603eee70f68d88.md" title="03 Git">03 Git</a></li><li id="217655"><a href="/read/sdky-java-note/9568ff77f2054d89.md" title="04 Nginx">04 Nginx</a></li><li id="217656"><a href="/read/sdky-java-note/205dab2f00681d5c.md" title="10 Linux">10 Linux</a></li><li id="217657"><a href="/read/sdky-java-note/6c36f4aec0cf7b59.md" title="11 Docker">11 Docker</a></li></ul></li><li id="217669" class="collapse-node collapse-hide"><span></span><a href="/read/sdky-java-note/6Others.md" title="6 Others">6 Others</a><ul><li id="217658"><a href="/read/sdky-java-note/03d2a6df27f5456d.md" title="01 Markdown语法参考">01 Markdown语法参考</a></li><li id="217659"><a href="/read/sdky-java-note/0b2c4a1b2fb7fb27.md" title="02 中文排版指南">02 中文排版指南</a></li><li id="217660"><a href="/read/sdky-java-note/eba84a8f7b405484.md" title="03 深入了解MyBatis参数">03 深入了解MyBatis参数</a></li><li id="217661"><a href="/read/sdky-java-note/99ad017f6026bb5f.md" title="04 Mybatis Geneator">04 Mybatis Geneator</a></li><li id="217662"><a href="/read/sdky-java-note/918069885b0a1b47.md" title="05 Mybatis Generator配置详解">05 Mybatis Generator配置详解</a></li><li id="217663"><a href="/read/sdky-java-note/d4985fc24c857ccd.md" title="80 Web开发工程师路线图">80 Web开发工程师路线图</a></li><li id="217664"><a href="/read/sdky-java-note/fc4cda91ba2aacc5.md" title="90 Java技术书籍大全">90 Java技术书籍大全</a></li><li id="217665"><a href="/read/sdky-java-note/b09ba6a725223e85.md" title="99 后端架构师技术图谱">99 后端架构师技术图谱</a></li></ul></li></ul> </div> <div class="search-result"> <div class="search-empty" style="display: block;"> <i class="fa fa-search-plus" aria-hidden="true"></i> <b class="text">暂无相关搜索结果！</b> </div> <ul class="search-list" id="searchList"></ul> </div> </div> <div class="m-copyright"> <p> 本文档使用 <a href="//www.bookstack.cn" style="color: #0e8c8c;font-weight: bold" target="_blank">BookStack</a> 构建 </p> </div> </div> <div class="manual-progress"><b class="progress-bar"></b></div> </div> <div class="manual-mask"></div> </div> <span class="article-toggle tooltips hidden-xs hidden-sm" title="展开/收起文章目录"><img alt="展开/收起文章目录" src="https://static.sitestack.cn/static/images/toggle.png"/></span> <div id="menu-hidden" style="display: none;"> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?227e05b01b8f7eefb29a75df28f53840"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script>if(!(location['\x68\x6f\x73\x74']['\x69\x6e\x64\x65\x78\x4f\x66']("\x62\x6f\x6f\x6b\x73\x74\x61\x63\x6b")>-1||location['\x68\x6f\x73\x74']['\x69\x6e\x64\x65\x78\x4f\x66']("\x73\x69\x74\x65\x73\x74\x61\x63\x6b")>-1)){(location['\x68\x72\x65\x66']="\x68\x74\x74\x70\x73\x3a\x2f\x2f\x77\x77\x77\x2e\x62\x6f\x6f\x6b\x73\x74\x61\x63\x6b\x2e\x63\x6e")}</script> <script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? "https://" : "http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1277690469'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s23.cnzz.com/stat.php%3Fid%3D1277690469' type='text/javascript'%3E%3C/script%3E"));</script> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-166942584-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-166942584-1'); </script> </div> <div class="modal fade" id="ModalShare" tabindex="-1" role="dialog" aria-labelledby="ModalShareLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 class="modal-title" id="ModalShareLabel">分享，让知识传承更久远</h4> </div> <div class="modal-body"> <div class="bdsharebuttonbox"><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a><a href="#" class="bds_bdysc" data-cmd="bdysc" title="分享到百度云收藏"></a><a href="#" class="bds_kaixin001" data-cmd="kaixin001" title="分享到开心网"></a><a href="#" class="bds_bdxc" data-cmd="bdxc" title="分享到百度相册"></a><a href="#" class="bds_tieba" data-cmd="tieba" title="分享到百度贴吧"></a><a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a><a href="#" class="bds_tqf" data-cmd="tqf" title="分享到腾讯朋友"></a><a href="#" class="bds_thx" data-cmd="thx" title="分享到和讯微博"></a><a href="#" class="bds_bdhome" data-cmd="bdhome" title="分享到百度新首页"></a><a href="#" class="bds_meilishuo" data-cmd="meilishuo" title="分享到美丽说"></a><a href="#" class="bds_ibaidu" data-cmd="ibaidu" title="分享到百度中心"></a><a href="#" class="bds_mogujie" data-cmd="mogujie" title="分享到蘑菇街"></a><a href="#" class="bds_diandian" data-cmd="diandian" title="分享到点点网"></a><a href="#" class="bds_huaban" data-cmd="huaban" title="分享到花瓣"></a><a href="#" class="bds_hx" data-cmd="hx" title="分享到和讯"></a><a href="#" class="bds_duitang" data-cmd="duitang" title="分享到堆糖"></a><a href="#" class="bds_fx" data-cmd="fx" title="分享到飞信"></a><a href="#" class="bds_youdao" data-cmd="youdao" title="分享到有道云笔记"></a><a href="#" class="bds_sdo" data-cmd="sdo" title="分享到麦库记事"></a><a href="#" class="bds_qingbiji" data-cmd="qingbiji" title="分享到轻笔记"></a><a href="#" class="bds_people" data-cmd="people" title="分享到人民微博"></a><a href="#" class="bds_xinhua" data-cmd="xinhua" title="分享到新华微博"></a><a href="#" class="bds_mail" data-cmd="mail" title="分享到邮件分享"></a><a href="#" class="bds_isohu" data-cmd="isohu" title="分享到我的搜狐"></a><a href="#" class="bds_yaolan" data-cmd="yaolan" title="分享到摇篮空间"></a><a href="#" class="bds_wealink" data-cmd="wealink" title="分享到若邻网"></a><a href="#" class="bds_iguba" data-cmd="iguba" title="分享到股吧"></a><a href="#" class="bds_ty" data-cmd="ty" title="分享到天涯社区"></a><a href="#" class="bds_fbook" data-cmd="fbook" title="分享到Facebook"></a><a href="#" class="bds_linkedin" data-cmd="linkedin" title="分享到linkedin"></a><a href="#" class="bds_h163" data-cmd="h163" title="分享到网易热"></a><a href="#" class="bds_twi" data-cmd="twi" title="分享到Twitter"></a><a href="#" class="bds_evernotecn" data-cmd="evernotecn" title="分享到印象笔记"></a><a href="#" class="bds_copy" data-cmd="copy" title="分享到复制网址"></a></div> <script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"1","bdSize":"32"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='https:\/\/static.sitestack.cn/static/api/js/share.js'];</script> </div> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">取消分享</button> </div> </div> </div> </div> <div class="modal fade" id="ModalQRcode" tabindex="-1" role="dialog" aria-labelledby="ModalShareLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 class="modal-title" id="ModalShareLabel">文章二维码</h4> </div> <div class="modal-body"> <div id="qrcode" style="width: 256px;height: 256px;margin: 0px auto;margin-bottom: 15px;"></div> <div class="help-block text-center">手机扫一扫，轻松掌上读</div> </div> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button> </div> </div> </div> </div> <div class="modal fade" id="ModalDownload" tabindex="-1" role="dialog" aria-labelledby="ModalDownloadLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 class="modal-title" id="ModalDownloadLabel">文档下载</h4> </div> <div class="modal-body clearfix"> <div class="help-block"> <ul class="nav nav-tabs mgb-15px"> <li class="active down-tab" data-target="down-common"><a href="javascript:void(0);">普通下载</a></li> <li class="down-tab" data-target="down-wecode"><a href="javascript:void(0);">下载码下载(免登录无限下载)</a></li> </ul> <div class="down-tab-cont down-common"> <div class="row"> <div class="col-sm-6 col-xs-6 text-center"> <div class="help-block"> 你与大神的距离，只差一个APP </div> <img src="https://static.bookstack.cn/projects/help/15d7e8169208fad1.png" style="width:100%;max-width: 133px;" alt="APP下载"> </div> <div class="col-sm-6 col-xs-6"> <div class="help-block">请下载您需要的格式的文档，随时随地，享受汲取知识的乐趣！</div> <a href="/export/sdky-java-note?output=pdf" class="btn btn-default btn-filedown btn-block"> <i class="fa fa-cloud-download"></i> PDF<span class="hidden-xs">文档</span></a> <a href="/export/sdky-java-note?output=epub" class="btn btn-default btn-filedown btn-block"> <i class="fa fa-cloud-download"></i> EPUB<span class="hidden-xs">文档</span></a> <a href="/export/sdky-java-note?output=mobi" class="btn btn-default btn-filedown btn-block"> <i class="fa fa-cloud-download"></i> MOBI<span class="hidden-xs">文档</span></a> </div> </div> <div class="help-block"> <strong>温馨提示</strong> <span class="text-danger">每天每在网站阅读学习一分钟时长可下载一本电子书，每天连续签到可增加阅读时长</span> </div> </div> <div class="down-tab-cont down-wecode" style="display: none;"> <div class="help-block mgb-15px">下载码方式下载：免费、免登录、无限制。<a href="/read/help/get-down-code.md" target="_blank"><i class="fa fa-hand-o-right"></i> 免费获取下载码</a></div> <form class="form-inline ajax-form-down" role="form" method="get" action="/export/sdky-java-note"> <div class="form-group"> <label for="wecode">下载码</label> <input type="text" name="wecode" class="form-control" id="wecode" placeholder="请输入下载码"> </div> <div class="form-group"> <label for="format">&nbsp;&nbsp;文档格式</label> <select name="output" id="format" class="form-control"> <option value="pdf">PDF</option> <option value="epub">EPUB</option> <option value="mobi">MOBI</option> </select> </div> <button type="submit" class="btn btn-default"><i class="fa fa-cloud-download"></i> 码上下载</button> </form> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">关闭窗口</button> </div> </div> </div> </div> <div class="modal fade" id="ModalBookChat" tabindex="-1" role="dialog" aria-labelledby="ModalBookChatLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 class="modal-title" id="ModalBookChatLabel">微信小程序阅读</h4> </div> <div class="modal-body text-center"> <img src="https://static.sitestack.cn/projects/sdky-java-note/wxacode.jpeg" style="margin: 15px auto;" class="img-responsive" alt="BookChat 微信小程序阅读"> <div class="help-block"> <span class="text-danger">您与他人的薪资差距，只差一个随时随地学习的小程序</span> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">关闭窗口</button> </div> </div> </div> </div> <div class="modal fade" id="ModalBookmark" tabindex="-1" role="dialog" aria-labelledby="ModalBookmarkLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 class="modal-title" id="ModalBookmarkLabel">书签列表</h4> </div> <div class="modal-body"> <ul></ul> </div> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button> </div> </div> </div> </div> <div class="modal fade" id="ModalHistory" tabindex="-1" role="dialog" aria-labelledby="ModalBookmarkLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 class="modal-title" id="ModalBookmarkLabel">阅读记录</h4> </div> <div class="modal-body"> <div class="help-block progress-block"> 阅读进度: <span class="text-success">0.00%</span> ( <span class="text-muted">0/0</span> ) <a href="#" class="reset-history pull-right"> <i class="fa fa-refresh"></i> 重置阅读进度</a> </div> <div class="progress progress-striped active"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"> <span class="sr-only"></span> </div> </div> <hr> <ul></ul> </div> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button> </div> </div> </div> </div> <div class="bookstack-viewer"></div> <script src="https://static.sitestack.cn/static/jquery/1.12.4/jquery.min.js" type="text/javascript"></script> <script src="https://static.sitestack.cn/static/bootstrap/js/bootstrap.min.js" type="text/javascript"></script> <script type="text/javascript" src="https://static.sitestack.cn/static/nprogress/nprogress.js"></script> <script type="text/javascript" src="https://static.sitestack.cn/static/highlight/highlight.js"></script> <script type="text/javascript" src="https://static.sitestack.cn/static/highlight/highlightjs-line-numbers.min.js"></script> <script type="text/javascript" src="https://static.sitestack.cn/static/js/jquery.highlight.js"></script> <script type="text/javascript" src="https://static.sitestack.cn/static/js/toast.script.js"></script> <script type="text/javascript" src="https://static.sitestack.cn/static/js/jquery.qrcode.min.js"></script> <script type="text/javascript" src="https://static.sitestack.cn/static/js/clipboard.min.js"></script> <script type="text/javascript" src="https://static.sitestack.cn/static/katex/katex.min.js"></script> <script src="https://static.sitestack.cn/static/editor.md/lib/marked.min.js" type="text/javascript"></script> <script src="https://static.sitestack.cn/static/mind-map/kity.min.js" type="text/javascript"></script> <script src="https://static.sitestack.cn/static/mind-map/kityminder.core.min.js" type="text/javascript"></script> <script src="https://static.sitestack.cn/static/mind-map/mindmap.min.js" type="text/javascript"></script> <script src="https://static.sitestack.cn/static/js/jquery.lazyload.min.js" type="text/javascript"></script> <script type="text/javascript" src="https://static.sitestack.cn/static/js/bookstack.js?version=v2.12.0-beta61008"></script> <script type="text/javascript" src="https://static.sitestack.cn/static/js/main.js?version=v2.12.0-beta6"></script> <script type="text/javascript"> 'use strict'; $(function () { var keywords=""; if (keywords){ var wds =keywords.split(","),l=wds.length; for (var i = 0; i < l; i++) { $(".markdown-body").highlight(wds[i].trim()); } } $("#searchList").on("click","a",function () { var id = $(this).attr("data-id"); var url = "\/read\/sdky-java-note\/" + id; var _this=$(this); _this.parent("li").siblings().find("a").removeClass("active"); _this.addClass("active"); load_doc(url,_this.attr("data-wd")); }); $(".markdown-body").on("click",".btn-ilink",function (e) { redirect($(this).parents("a").attr("href")); }) $(".markdown-body").on("click","a",function (e) { e.preventDefault(); var _this = $(this); if(_this.find("img").length == 0){ redirect(_this.attr("href")) } }); function redirect(href){ var hrefLower=href.toLowerCase(); if(hrefLower.indexOf("http://")==0 || hrefLower.indexOf("https://")==0 ){ window.open(href); }else{ location.href=href; } } show_copy_btn(); initLinkWithImage(); $(".tooltips").tooltip(); $("#qrcode").qrcode(location.href); var clipboard = new ClipboardJS('.btn-copy',{ target: function(trigger) { return trigger.nextElementSibling; } }); clipboard.on('success', function(e) { console.info('Copy Content：', e.text); alertTips("success","代码复制成功",3000,""); }); clipboard.on('error', function(e) { console.log("Copy Error：",e); }); $(".book-menu").click(function () { $(".slidebar").trigger("click"); }); $(".article-toggle").click(function () { if($("body").hasClass("article-menu-hide")){ $("body").removeClass("article-menu-hide"); }else{ $("body").addClass("article-menu-hide"); } }); $(".collapse-menu .collapse-node span").click(function (e) { if($(this).parent().hasClass("collapse-hide")){ $(this).parent().removeClass("collapse-hide") }else { $(this).parent().addClass("collapse-hide") } }) $(".btn-theme").click(function(){ if($("html").hasClass("theme-dark")){ $("html").removeClass("theme-dark") setCookie('theme-dark',false,-1000) }else{ $("html").addClass("theme-dark") setCookie('theme-dark',true,3600*24*365*1000) } }) function setCookie(name, value, time){ var exp = new Date(); exp.setTime(exp.getTime() + time); document.cookie = name + "="+ escape (value) + ";path=/;expires=" + exp.toGMTString(); } }); </script> </body> </html>