Note标签的用法

<div class="note note-info"><div class="note-title">小技巧</div><div class="note-content">这是一个技巧提示示例，用于辅助信息</div></div>

<div class="note note-info"><div class="note-title">信息说明</div><div class="note-content">这是一条普通信息提示，用于中性通知</div></div>

<div class="note note-info"><div class="note-title">注意事项</div><div class="note-content">需要特别注意的内容，用于预防性提醒</div></div>

<div class="note note-info"><div class="note-title">严重警告</div><div class="note-content">高风险操作，用于可能造成损失的场景</div></div>

<div class="note note-info"><div class="note-title">核心要点</div><div class="note-content">关键性信息提示，用于强调重点的内容</div></div>

<div class="note note-info"><div class="note-title">常规说明</div><div class="note-content">通用型信息提示，适合大部分基础场景</div></div>

<div class="note note-info"><div class="note-title">操作成功</div><div class="note-content">流程完成提示，用于确认性成功的反馈</div></div>

{% note tip %}
<div class="blockquote-note__header">
  <div class="blockquote-note__icon">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17">
      <path fill-rule="evenodd" d="M13 0H3a3.1 3.1 0 0 0-3 3v6a3.1 3.1 0 0 0 3 3h1v3l3-3h6a3.1 3.1 0 0 0 3-3V3a3.1 3.1 0 0 0-3-3m-1.3 6.7-2 2A.9.9 0 0 1 9 9H8V7H4V5h4V3h1a.9.9 0 0 1 .7.3l2 2a1 1 0 0 1 0 1.4"/>
    </svg>
  </div>
  自定义标题
</div>
Note标签本质上只是预设了样式的CSS代码，通过手动添加SVG图标就可以实现自定义效果<br>
{% endnote %}