<link rel="stylesheet" href="https://cdn.fzf404.art/sedom/dist/sedom.css"/>

<script src="https://cdn.fzf404.art/sedom/dist/sedom.js"></script>

npm i sedom

import Sedom from 'sedom'

import 'sedom/dist/sedom.css'

Sedom.initDOM()

<h1>一级标题</h1>

<h2>二级标题</h2>

<h3>三级标题</h3>

<h4>四级标题</h4>

<h5>五级标题</h5>

<h6>六级标题</h6>

<p class="large">扬前端之帆，起样式之航，打赢极简样式库攻坚战。</p>

<p>

  新时代来临，我们的极简样式库实现了历史跨越性发展，样式得到切实巩固和提高，文档发生深刻变化。

  <small>注：此处的历史跨越式发展含有夸大成分。</small>

</p>

<p class="small">

  要实现极简样式库的发展，必须在发展中借鉴成就。建章立制，积极推进极简样式库管理制度化；建体立系，积极推进极简样式库督查正常化；注质重量，积极推进极简样式库工作规范化。

</p>

<code>

  <pre>求真务实，抓好极简样式库调研工作。</pre>

  <pre>紧跟进度，抓好极简样式库督促工作。</pre>

  <pre>严格要求，做好极简样式库服务工作。</pre>

</code>

求真务实，抓好极简样式库调研工作。

紧跟进度，抓好极简样式库督促工作。

严格要求，做好极简样式库服务工作。

<p>

  <span>编写</span>

  <abbr title="Hyper Text Markup Language">HTML</abbr>

  <span>代码并获得良好的视觉效果。</span>

</p>

<aside>注：需使用 Sedom 样式库。</aside>

<p>

  <span>编写</span>

  <abbr>HTML</abbr>

  <span>代码并获得良好的视觉效果。</span>

</p>

<span class="white">白色文本</span>

<span class="light">浅色文本</span>

<span class="middle">中性文本</span>

<span class="gray">灰色文本</span>

<span class="dark">暗色文本</span>

<span class="black">黑色文本</span>

<span class="red">红色文本</span>

<span class="orange">橙色文本</span>

<span class="yellow">黄色文本</span>

<span class="lime">黄绿文本</span>

<span class="green">绿色文本</span>

<span class="teal">蓝绿文本</span>

<span class="cyan">青色文本</span>

<span class="blue">蓝色文本</span>

<span class="indigo">靛青文本</span>

<span class="violet">蓝紫文本</span>

<span class="purple">紫色文本</span>

<span class="pink">粉色文本</span>

<span class="rainbow">彩虹文本</span>

<span class="rainbow reverse">彩虹文本</span>

<a class="white">白色链接</a>

<a class="light">浅色链接</a>

<a class="middle">中性链接</a>

<a class="gray">灰色链接</a>

<a class="dark">暗色链接</a>

<a class="black">黑色链接</a>

<a class="red">红色链接</a>

<a class="orange">橙色链接</a>

<a class="yellow">黄色链接</a>

<a class="lime">黄绿链接</a>

<a class="green">绿色链接</a>

<a class="teal">蓝绿链接</a>

<a class="cyan">青色链接</a>

<a class="blue">蓝色链接</a>

<a class="indigo">靛青链接</a>

<a class="violet">蓝紫链接</a>

<a class="purple">紫色链接</a>

<a class="rainbow">彩虹链接</a>

<a class="rainbow reverse">彩虹链接</a>

<button class="white">白色按钮</button>

<button class="light">浅色按钮</button>

<button class="middle">中性按钮</button>

<button class="gray">灰色按钮</button>

<button class="dark">暗色按钮</button>

<button class="black">黑色按钮</button>

<button class="red">红色按钮</button>

<button class="orange">橙色按钮</button>

<button class="yellow">黄色按钮</button>

<button class="lime">黄绿按钮</button>

<button class="green">绿色按钮</button>

<button class="teal">蓝绿按钮</button>

<button class="cyan">青色按钮</button>

<button class="blue">蓝色按钮</button>

<button class="indigo">靛青按钮</button>

<button class="violet">蓝紫按钮</button>

<button class="purple">紫色按钮</button>

<button class="pink">粉色按钮</button>

<button class="rainbow">彩虹按钮</button>

<button class="rainbow reverse">彩虹按钮</button>

<button class="orange" disabled>禁用按钮</button>

<button class="indigo" disabled>禁用按钮</button>

<form onsubmit="return false">

  <label for="name">姓名</label>

  <input id="name" type="text" placeholder="请输入姓名" />

  <br />

  <label for="password">密码</label>

  <input id="password" type="password" placeholder="请输入密码" />

  <button class="blue">确认</button>

</form>

<table>

  <thead>

    <tr>

      <th>名称</th>

      <th>链接</th>

      <th>描述</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td>🎯 Moint</td>

      <td>

        <a class="blue" href="https://monit.fzf404.art/" target="_blank">

          monit.fzf404.art

        </a>

      </td>

      <td>桌面小组件</td>

    </tr>

    <tr>

      <td>📦 Tabox</td>

      <td>

        <a class="pink" href="https://tab.fzf404.art/" target="_blank">

          tab.fzf404.art

        </a>

      </td>

      <td>新起始页</td>

    </tr>

    <tr>

      <td>🎲 Pixxel</td>

      <td>

        <a class="green" href="https://px.fzf404.art/" target="_blank">

          px.fzf404.art

        </a>

      </td>

      <td>像素画工具</td>

    </tr>

  </tbody>

</table>

<hr />

<audio controls src="/asset/internationale.mp3"></audio>

<button class="theme">🌓</button>

<p class="center">

  <button class="left">居左</button>

  <button>居中</button>

  <button class="right">居右</button>

</p>

<p class="space">

  <span>富强</span>

  <span>民主</span>

  <span>文明</span>

  <span>和谐</span>

</p>

<button class="jump">跳跃</button>

<button class="jump">👍</button>

<button>静止</button>

<button>✋</button>

<button class="wave">摆动</button>

<button class="wave">👋</button>