<h1>H1 超大标题</h1>
<h2>H2 大标题</h2>
<h3>H3 小标题</h3>
<h4>H4 标题</h4>
<h5>H5 标题</h5>
<h6>H6 标题</h6>

<p>正文文字</p>
<p><a href="#">链接文字</a></p>
<p><abbr title="Kico Style 自带的提示功能">提示文字</abbr></p>
<p><small>较小文字</small></p>
<p><b>加粗文字</b></p>
<p><cite>引用文字</cite></p>
<p><i>斜体文字</i></p>
<p><em>强调文字</em></p>
<p><mark>加亮文字</mark></p>
<p><del>含删除线文字</del></p>
<p>键盘符号 <kbd>Ctrl + S</kbd></p>
<hr/>
<blockquote>这是一个引用段落的测试。Kico Style 最早起源于 2016 年的“缤奇官网”项目，在保罗开发完此项目之后仍有很多的前端项目，保罗在制作过程中发现不同的项目存在很多的重复之处，因此制作了这个框架。Kico Style 仅包含常用的功能，不含其他繁杂的样式，既方便调用也无需像其他框架一样记录各种类名，让你的前端作品装逼更持久~</blockquote>

<img src="static/saratoga.jpg"/>
<img src="static/test-image-1.jpg"/>
<img src="static/test-image-2.jpg"/>

<article>
  <p>早上在 B 站一个原神的视频下方评论了，结果意外的上了热评，这是我少见的第一次上热评，究竟评论了啥捏？</p>
  <blockquote>原神这么火 我还是遇不到一个玩原神的女朋友 😭</blockquote>
  <p>都知道我喜欢自嘲，我心里就想着肯定会有人说其实是因为我本来就没有女朋友，结果这个人他确实出现了！</p>
  <blockquote>有没有一种可能，你是遇不到女朋友 😂</blockquote>
  <p>主要还是受到了此前那位前同事的朋友圈的影响（他说自己是提瓦特认识的女朋友），总不能在朋友圈里发自己是废物吧，就只能把其他地方当树洞，在网上和群里面吐槽了。这下子不少人都知道我母胎单身 20 年了吧！</p>
</article>

<input class="btn" type="button" value="input 按钮"/>
<button class="btn">button 按钮</button>
<a class="btn">a 按钮</a>

<button class="btn blue small">小按钮</button>
<button class="btn blue">一般按钮</button>
<button class="btn blue middle">中按钮</button>
<button class="btn blue large">大按钮</button>

<button class="btn red">一枚红色按钮</button>
<button class="btn yellow">一枚黄色按钮</button>
<button class="btn blue">一枚蓝色按钮</button>
<button class="btn green">一枚绿色按钮</button>
<button class="btn transparent">一枚透明按钮</button>

<button class="btn red" disabled>禁用的按钮</button>

<span ks-tag="top" ks-text="我在上方显示">上方显示</span>
<span ks-tag="bottom" ks-text="我在底侧显示">底侧显示</span>
<span ks-tag="right" ks-text="我在右侧显示">右侧显示</span>
<span ks-tag="left" ks-text="我在左侧显示">左侧显示</span>

<span ks-tag="top left" ks-text="我在左上方显示（top left）">
  左上方显示
</span>
<span ks-tag="bottom right" ks-text="我在右下方显示（bottom right）">
  右下方显示
</span>

<p><code>alert("Hello World!")</code></p>
<pre><code>function Drawer({ visible, children }) {
  return (
    <div className={clsx(styles.drawer, visible && styles.active)}>
      {children}
    </div>
  );
}</code></pre>

<h3>自驾游采购清单：</h3>
<ul>
  <li>帐篷</li>
  <li>
    吃的
    <ul>
      <li>零食</li>
      <li>钓上来的鱼</li>
      <li>鱼丸、火腿肠</li>
    </ul>
  </li>
  <li>旅行背包</li>
  <li>烧烤、钓鱼装备</li>
</ul>

<h3>明天要做的事情：</h3>
<ol>
  <li>去公司上班
    <ol>
      <li>和同事问好</li>
      <li>完善项目代码</li>
      <li>和项目组交谈事务</li>
    </ol>
  </li>
  <li>和公司同事去吃下午茶</li>
  <li>和女朋友约会（并不可能）</li>
</ol>

<h3>我的梦想：</h3>
<dl>
  <dt>拥有一只女朋友</dt>
  <dd>长相可爱，愿意相互包容</dd>
  <dt>开发属于自己的框架</dt>
  <dd>已实现，也就是 Kico Style</dd>
  <dt>建立缤奇科技公司</dt>
  <dd>选址在珠三角地区为宜</dd>
</dl>

<fieldset>
  <label>
    <span>活动的文本框：</span>
    <input type="text" value="奇趣保罗" />
  </label>
  <label>
    <span>数字形文本框：</span>
    <input type="number" value="5678" />
  </label>
  <label>
    <span>超出数字的文本框：</span>
    <input type="number" min="1" max="100" value="101" />
  </label>
  <label>
    <span>搜索形文本框：</span>
    <input type="search" placeholder="搜索..." />
  </label>
  <label>
    <span>禁用的文本框：</span>
    <input type="text" value="2333" disabled />
  </label>
  <label>
    <span>只读的文本框：</span>
    <input type="text" value="2333" readonly />
  </label>
  <label>
    <span>滑动条：</span>
    <input type="range" name="points" min="1" max="10" value="5" />
  </label>
  <label>
    <span>开关按钮：</span>
    <input type="checkbox" class="switch" />
  </label>
  <label>
    <span>上传文件：</span>
    <input type="file" />
  </label>
  <label>
    <span>上传多文件：</span>
    <input type="file" multiple />
  </label>
  <label>
    <span>选择颜色：</span>
    <input type="color" />
  </label>
  <label>
    <input type="checkbox" />多选选项
  </label>
  <label>
    <input type="radio" />单选选项
  </label>
  <label>
    <input type="checkbox" disabled />禁用的多选选项
  </label>
  <label>
    <input type="radio" disabled />禁用的单选选项
  </label>
  <label>
    <span>个人介绍：</span>
    <textarea placeholder="在此编写你的个人介绍" rows="3"></textarea>
  </label>
  <label>
    <span>选择适合你的英雄：</span>
    <select>
      <option>小缤</option>
      <option>小奇</option>
      <option>保罗</option>
      <option>路人甲</option>
      <option>路人乙</option>
    </select>
  </label>
  <label>
    <span>选择适合你的伙伴：</span>
    <select multiple>
      <option>拉菲</option>
      <option>索菲</option>
      <option>阿卡林</option>
      <option>混沌老师</option>
      <option>埃尔德里奇</option>
    </select>
  </label>
  <label>
    <span>原生进度条：</span>
    <progress value="10" max="50"></progress>
  </label>
</fieldset>

<form>
  <fieldset>
    <legend>多行：</legend>
    <label><input type="checkbox" />多选选项 1</label>
    <label><input type="checkbox" />多选选项 2</label>
    <label><input type="checkbox" />多选选项 3</label>
  </fieldset>
  <fieldset class="inline">
    <legend>单行：</legend>
    <label><input type="radio" name="radio" />单选选项 1</label>
    <label><input type="radio" name="radio" />单选选项 2</label>
    <label><input type="radio" name="radio" />单选选项 3</label>
  </fieldset>
  <fieldset>
    <legend>混搭：</legend>
    <div class="row s">
      <div class="col-m-4">
        <label>
          <input type="text" placeholder="名字：" />
        </label>
      </div>
      <div class="col-m-4">
        <label>
          <input type="text" placeholder="邮箱：" />
        </label>
      </div>
      <div class="col-m-4">
        <label>
          <input type="text" placeholder="网站：" />
        </label>
      </div>
      <div class="col-m-12">
        <label>
          <textarea placeholder="在这里留言吧"></textarea>
        </label>
      </div>
      <div class="col-m-12">
        <button class="btn yellow" type="submit">提交</button>
      </div>
    </div>
  </fieldset>
</form>