• 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.131008"></script> <script type="text/javascript" src="https://static.sitestack.cn/static/js/main.js?version=v2.13"></script> <script type="text/javascript"> 'use strict'; $(function () { var keywords="html"; 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>