来源 1
浏览 1343
扫码
打印
2020-04-01 20:00:39
- XHTML（extensible Hyper Text Markup Language），扩展的超文本标记语言
HTML 5 的语法变化
- 标签不再区分大小写
- 元素可以省略结束标签
- 允许省略属性值的属性HTML 5 中允许省略属性值的属性：checked、readonly、disabled、selected、multiple、required 等
- 允许属性值不使用引号
HTML 元素
-
-
-
-
- 在 HTML 中，空标签没有结束标签
- 如：、、、、、、、、、、、、、、、<![CDATA[、<spacer/>、<wbr/>、<!DOCTYPE html>、<!-- --></plaintext></meta></link></li></ul>
</li></ul>
<h1 id="e1emv0"><a class="reference-link" name="e1emv0"></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 alt="HTML5标签集合" src="/projects/sdky-java-note/ccf46279036d11456a90cc9ee96cccf0.jpeg"/> </a><br/>图 1 HTML5标签集合</p>
</li></ul>
<h1 id="d7cnum"><a class="reference-link" name="d7cnum"></a><span class="header-link octicon octicon-link"></span>文档头部 <head></h1><ul>
<li>在 元素中可以插入脚本（scripts）、样式文件（CSS）、及各种 meta 信息</li><li>，定义头部标签<ul>
<li><title>，定义文档标题</title></li><li><meta>，基本的元数据，通常以 名称/值 对出现，属性：name（把 content 属性关联到一个名称）、http-equiv（把 content 属性关联到 HTTP 头部）、content（必需属性，与 http-equiv 或 name 属性相关的元信息）、charset（文档的字符编码）</li><li><link>：定义文档与外部资源之间的关系，属性：rel（必需属性，当前文档与被链接文档之间的关系，如 stylesheet、icon）、type（被链接文档的 MIME 类型）、href（被链接文档的位置）</li><li><style>，用于引入样式定义，必需属性：type</li><li><script>，用于加载脚本文件，属性 type：指示脚本的 MIME 类型，默认值是 "text/javascript"；async 属性：仅适用于外部脚本，规定脚本将被异步执行，属性值 "async"；defer 属性：规定是否对脚本执行进行延迟，直到页面加载为止，属性值 "defer"<br/></li></ul>
</li></ul>
<pre><code><script type="text/javascript">
function goPage(num) {
// 找到表单，给 currentPage 设值，然后提交
var form1= document.getElementById("form1");
form1.currentPage.value=num;
form1.submit();
}
</script>
</code></pre>
<h1 id="awymv"><a class="reference-link" name="awymv"></a><span class="header-link octicon octicon-link"></span>块</h1><h2 id="apwiad"><a class="reference-link" name="apwiad"></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 class="reference-link" name="82q3m"></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>、<label><br/></textarea></img></a></strong></b></li></ul>
<h2 id="b4l2xy"><a class="reference-link" name="b4l2xy"></a><span class="header-link octicon octicon-link"></span>布局</h2><ul>
<li><div>，块级元素，用于组合其他 HTML 元素的容器</div></li><li>，内联元素，用于组合文档中的内联元素（默认不会换行）<br/></li></ul>
</article>
<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="row comments-box">
<div class="comments-form col-md-12">
<form action="/book/comment/3243" method="post" class="ajax-form comment-form">
<div class="form-group">
<textarea name="content" rows="5" placeholder="文明评论，理性发言."></textarea>
<input type="hidden" name="pid" value="0">
<input type="hidden" name="doc_id" value="217642">
</div>
<div class="form-group row">
<div class="col-xs-7 col-sm-9 col-md-10"></div>
<div class="col-xs-5 col-sm-3 col-md-2">
<button type="submit" class="btn btn-success btn-block"><i class="fa fa-paper-plane-o"></i> 发布点评</button>
</div>
</div>
</form>
</div>
<div class="comments-list col-md-12">
</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="#ModalDownload"><i class="fa fa-cloud-download"></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="/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="/static/images/icon-bookmark-add.png" alt="添加书签"></span>
<span class="bookmark-remove hide"> <img src="/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="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="217602"><a href="/read/sdky-java-note/000d271cbf26a471.md" title="23 集合框架">23 集合框架</a></li><li id="217609"><a href="/read/sdky-java-note/04a914d9cf71364d.md" title="30 单元测试">30 单元测试</a></li><li id="217606"><a href="/read/sdky-java-note/07c3a30d494a24d9.md" title="27 反射">27 反射</a></li><li id="217601"><a href="/read/sdky-java-note/0c3b2637a317684e.md" title="22 数据结构">22 数据结构</a></li><li id="217611"><a href="/read/sdky-java-note/0c66accfdd942147.md" title="33 设计模式">33 设计模式</a></li><li id="217592"><a href="/read/sdky-java-note/10224c95c8e8b218.md" title="14 基本类型包装类">14 基本类型包装类</a></li><li id="217582"><a href="/read/sdky-java-note/24467387ed19dbf5.md" title="01 Java概述">01 Java概述</a></li><li id="217586"><a href="/read/sdky-java-note/24b7e59ce2d9a126.md" title="05 数组">05 数组</a></li><li id="217612"><a href="/read/sdky-java-note/309eb837dd1ac6a5.md" title="35 JVM">35 JVM</a></li><li id="217603"><a href="/read/sdky-java-note/3e818173bf729d10.md" title="24 泛型">24 泛型</a></li><li id="217608"><a href="/read/sdky-java-note/6453b136950f7688.md" title="29 Java Bean">29 Java Bean</a></li><li id="217594"><a href="/read/sdky-java-note/658ca9dd2b70e9d9.md" title="16 接口">16 接口</a></li><li id="217590"><a href="/read/sdky-java-note/6809b21ef21cc213.md" title="10 多态">10 多态</a></li><li id="217598"><a href="/read/sdky-java-note/6f4952a82fe676f4.md" title="20 异常处理">20 异常处理</a></li><li id="217604"><a href="/read/sdky-java-note/72ded20221072a59.md" title="25 IO操作">25 IO操作</a></li><li id="217583"><a href="/read/sdky-java-note/7622c484c332d225.md" title="02 数据类型和运算符">02 数据类型和运算符</a></li><li id="217610"><a href="/read/sdky-java-note/776d1f883c139550.md" title="32 Java 8新特性">32 Java 8新特性</a></li><li id="217607"><a href="/read/sdky-java-note/7b6f7ae1daa2fb6f.md" title="28 注解">28 注解</a></li><li id="217587"><a href="/read/sdky-java-note/7c9102384b2980c5.md" title="06 修饰符">06 修饰符</a></li><li id="217596"><a href="/read/sdky-java-note/a7a69516902fe5a2.md" title="18 枚举类">18 枚举类</a></li><li id="217613"><a href="/read/sdky-java-note/a9ec2eaf1c8cea85.md" title="40 Commons Lang常用类">40 Commons Lang常用类</a></li><li id="217597"><a href="/read/sdky-java-note/b31aa5f9cea014a5.md" title="19 常用类">19 常用类</a></li><li id="217591"><a href="/read/sdky-java-note/b6ab2eb6fe6a0f50.md" title="11 代码块">11 代码块</a></li><li id="217584"><a href="/read/sdky-java-note/c1d6eee175140b41.md" title="03 流程控制">03 流程控制</a></li><li id="217595"><a href="/read/sdky-java-note/d5662de340a0d562.md" title="17 内部类">17 内部类</a></li><li id="217605"><a href="/read/sdky-java-note/dd70a8955e6cda44.md" title="26 网络编程">26 网络编程</a></li><li id="217593"><a href="/read/sdky-java-note/e013ab767a7226df.md" title="15 抽象类">15 抽象类</a></li><li id="217600"><a href="/read/sdky-java-note/e4e58f3631a1175b.md" title="21 多线程_02">21 多线程_02</a></li><li id="217589"><a href="/read/sdky-java-note/ea09fcf8b4393745.md" title="09 继承与组合">09 继承与组合</a></li><li id="217588"><a href="/read/sdky-java-note/ebb8b9435fbf0d38.md" title="07 类与对象">07 类与对象</a></li><li id="217585"><a href="/read/sdky-java-note/f917b53177247f88.md" title="04 方法">04 方法</a></li><li id="217599"><a href="/read/sdky-java-note/fe65c7aeb76516e3.md" title="21 多线程_01">21 多线程_01</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="217618"><a href="/read/sdky-java-note/009a325a1e2511c2.md" title="04 Servlet">04 Servlet</a></li><li id="217615"><a href="/read/sdky-java-note/197b4f7f0473b633.md" title="01 MySQL 02">01 MySQL 02</a></li><li id="217625"><a href="/read/sdky-java-note/2ab67cb3992e14c0.md" title="11 SSM整合和应用分层">11 SSM整合和应用分层</a></li><li id="217629"><a href="/read/sdky-java-note/3d90707872055625.md" title="17 Spring Boot">17 Spring Boot</a></li><li id="217626"><a href="/read/sdky-java-note/3e78ff1a5c3d158d.md" title="12 Shiro">12 Shiro</a></li><li id="217623"><a href="/read/sdky-java-note/44677536b4ff33ce.md" title="09 Spring MVC">09 Spring MVC</a></li><li id="217632"><a href="/read/sdky-java-note/46d8410df182e699.md" title="26 RES Tful">26 RES Tful</a></li><li id="217630"><a href="/read/sdky-java-note/581f2e869751360d.md" title="19 Redis">19 Redis</a></li><li id="217622"><a href="/read/sdky-java-note/6764a7f2337d9e3d.md" title="08 Spring">08 Spring</a></li><li id="217621"><a href="/read/sdky-java-note/70de7cfe17f154d2.md" title="07 Struts 2">07 Struts 2</a></li><li id="217616"><a href="/read/sdky-java-note/71b5d40b1db57043.md" title="02 JDBC">02 JDBC</a></li><li id="217628"><a href="/read/sdky-java-note/7441fbf0e7cb9448.md" title="16 Free Marker">16 Free Marker</a></li><li id="217620"><a href="/read/sdky-java-note/96bce0b0abc9c45c.md" title="06 Filter和Listener">06 Filter和Listener</a></li><li id="217619"><a href="/read/sdky-java-note/ab33365cb1db03d0.md" title="05 JSP">05 JSP</a></li><li id="217614"><a href="/read/sdky-java-note/c6038526340efca5.md" title="01 MySQL 01">01 MySQL 01</a></li><li id="217627"><a href="/read/sdky-java-note/c8aa78e7825b7341.md" title="13 SSO">13 SSO</a></li><li id="217617"><a href="/read/sdky-java-note/ce61a536fe182e50.md" title="03 Tomcat和网络协议">03 Tomcat和网络协议</a></li><li id="217631"><a href="/read/sdky-java-note/d82edfdcfdb6395b.md" title="20 Mongo DB">20 Mongo DB</a></li><li id="217633"><a href="/read/sdky-java-note/f87266ffa061fd37.md" title="27 搜索引擎">27 搜索引擎</a></li><li id="217624"><a href="/read/sdky-java-note/fe6fbe5acccb71c6.md" title="10 My Batis">10 My Batis</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="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><li id="217637"><a href="/read/sdky-java-note/7b251c8b2ee3bb57.md" title="07 Active MQ">07 Active MQ</a></li><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></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="217645"><a href="/read/sdky-java-note/0cd9a1de3e6eb79f.md" title="05 BOM DOM 事件处理">05 BOM DOM 事件处理</a></li><li id="217649"><a href="/read/sdky-java-note/0ec053aee52cd681.md" title="09 Bootstrap">09 Bootstrap</a></li><li id="217646"><a href="/read/sdky-java-note/5a5753375a21bd83.md" title="06 Ajax和JSON">06 Ajax和JSON</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="217641"><a href="/read/sdky-java-note/6eeeb56f604b0303.md" title="01 XML">01 XML</a></li><li id="217650"><a href="/read/sdky-java-note/a52684443a81d6c3.md" title="10 JS插件">10 JS插件</a></li><li id="217643"><a href="/read/sdky-java-note/a604f300dc59e1ac.md" title="03 CSS">03 CSS</a></li><li id="217651"><a href="/read/sdky-java-note/b860146e99667326.md" title="11 前端开发">11 前端开发</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="217644"><a href="/read/sdky-java-note/df59f3d1cc2d37a7.md" title="04 JavaScript语法">04 JavaScript语法</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="217656"><a href="/read/sdky-java-note/205dab2f00681d5c.md" title="10 Linux">10 Linux</a></li><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="217657"><a href="/read/sdky-java-note/6c36f4aec0cf7b59.md" title="11 Docker">11 Docker</a></li><li id="217655"><a href="/read/sdky-java-note/9568ff77f2054d89.md" title="04 Nginx">04 Nginx</a></li></ul></li><li id="217581"><a href="/read/sdky-java-note/68fe9cfa75ebb8cd.md" title="简介">简介</a></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="217662"><a href="/read/sdky-java-note/918069885b0a1b47.md" title="05 Mybatis Generator配置详解">05 Mybatis Generator配置详解</a></li><li id="217661"><a href="/read/sdky-java-note/99ad017f6026bb5f.md" title="04 Mybatis Geneator">04 Mybatis Geneator</a></li><li id="217665"><a href="/read/sdky-java-note/b09ba6a725223e85.md" title="99 后端架构师技术图谱">99 后端架构师技术图谱</a></li><li id="217663"><a href="/read/sdky-java-note/d4985fc24c857ccd.md" title="80 Web开发工程师路线图">80 Web开发工程师路线图</a></li><li id="217660"><a href="/read/sdky-java-note/eba84a8f7b405484.md" title="03 深入了解MyBatis参数">03 深入了解MyBatis参数</a></li><li id="217664"><a href="/read/sdky-java-note/fc4cda91ba2aacc5.md" title="90 Java技术书籍大全">90 Java技术书籍大全</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.iquanku.com" style="color: #0e8c8c;font-weight: bold" target="_blank">全库网</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" title="展开/收起文章目录"><img alt="展开/收起文章目录" src="/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?1ac9fcfc53368290cbaa2fc420e6df89";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</div>
<div class="modal fade" id="ModalNote" tabindex="-1" role="dialog" aria-labelledby="ModalReplaceLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h1 class="modal-title" id="ModalReplaceLabel" style="align:center;">思维导图备注</h1></div>
<div class="modal-body" style="overflow-y:auto; height:400px;"></div>
<div class="modal-footer">
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button></div>
</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">×</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">×</button>
<h4 class="modal-title" id="ModalDownloadLabel">文档下载</h4>
</div>
<div class="modal-body clearfix">
<div class="help-block">
<div class="down-tab-cont down-common">
<div class="help-block">请下载您需要的格式的文档，随时随地，享受汲取知识的乐趣！</div>
<a href="/export/sdky-java-note?output=pdf" class="btn btn-default btn-filedown"> <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"> <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"> <i class="fa fa-cloud-download"></i> MOBI<span class="hidden-xs">文档</span></a>
</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="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">×</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">×</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="/static/jquery/1.12.4/jquery.min.js" type="text/javascript"></script>
<script src="/static/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/static/nprogress/nprogress.js"></script>
<script type="text/javascript" src="/static/highlight/highlight.js"></script>
<script type="text/javascript" src="/static/highlight/highlightjs-line-numbers.min.js"></script>
<script type="text/javascript" src="/static/js/jquery.highlight.js"></script>
<script type="text/javascript" src="/static/js/toast.script.js"></script>
<script type="text/javascript" src="/static/js/jquery.qrcode.min.js"></script>
<script type="text/javascript" src="/static/js/clipboard.min.js"></script>
<script type="text/javascript" src="/static/katex/katex.min.js"></script>
<script src="/static/editor.md/lib/marked.min.js" type="text/javascript"></script>
<script src="/static/mind-map/kity.min.js" type="text/javascript"></script>
<script src="/static/mind-map/kityminder.core.min.js" type="text/javascript"></script>
<script src="/static/mind-map/mindmap.min.js" type="text/javascript"></script>
<script src="/static/js/jquery.lazyload.min.js" type="text/javascript"></script>
<script src="/static/js/printThis.js" type="text/javascript"></script>
<script type="text/javascript" src="/static/js/bookstack.js?version=unknown"></script>
<script type="text/javascript" src="/static/js/main.js?version=unknown"></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();
$(".printPDF").click(function(){
$("img.lazy").each(function(){
$(this).attr("src",$(this).attr("data-original"))
});
$(".manual-article").printThis({
printDelay:500,
});
})
$(".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>]]></plaintext></nextid></li></ul></li></ul></article></div></div></div></div></div></body>
我的书签
添加书签
移除书签