之前在文章中插入示例DEMO是通过异步加载codepen来实现的，但是受制于网络条件，有时候加载缓慢，甚至无法加载。就想着将一些简单的示例直接在Markdown中写为HTML代码输出到前端页面运行，可是这样一来，不仅让Markdown失去了严谨性和优美性，而且如果不小心写了一个可能污染全局的样式或者脚本，那就翻船咯~
但是Markdown最终是要转换成HTML的，因此只要在Markdown的转换过程中做点手脚，再配合上Shadow DOM这个魔法盒子将示例代码运行在一个沙箱中，问题就能得到解决。
HTML5中有很多十分有趣的标签，相比于article/section等这些我们所熟知并且已经应用的标签，还有些标签或者因为兼容性，或者因为还处于草稿阶段而不那么为人所知。在使用Bootstrap/Element等UI组件时，常常看到某个标签上会应用一些如role="dialog"的不常见的属性，这是因为HTML语义化的需要。role属性主要供有障碍人士使用，作用是告诉如屏幕朗读程序等辅助程序当前元素所扮演的角色。由于HTML5标签本身已经实现了语义化，role属性不建议被添加。而对于一些老浏览器或者一些模拟元素（如div模拟dialog），role属性则应该被注明。Bootstrap中有很多注明了role属性的组件，而这些组件有一部分已经被HTML5所实现，并已经标签化，如dialog,progress等。当然，这些标签的原始样式各个浏览器不统一，并且可以说很简陋，对此，可以通过一些自定义CSS样式来进行优化。
特别说明：本文介绍的标签，目前兼容性都很差（虽然部分标签有对应的polyfill），仅供学习和了解，请勿用于生产环境。同时，DEMO仅限Chrome浏览器预览。
分页是WEB开发中很常用的功能，尤其是在各种前后端分离的今天，后端API返回数据，前端根据数据的count以及当前页码pageIndex来计算分页页码并渲染到页面上已经是一个很普通很常见的功能了。从最开始的jquery时代到现在的各种各样的前端框架时代，分页功能都是必不可少的。
分页大多数（基本上）情况下都是对异步数据列表的处理，这里首先需要明白一下分页的流程。
在已知每页显示数据量pageSize以及当前页码pageIndex的情况下：
