以下内容取自主题与插件作者的文章整合再进行的优化

以下使用方法需要安装HaoTag插件

段落文本

{tabs-item 标签语法}

<p class="p 样式参数(参数以空格划分)">文本内容</p>

{/tabs-item} {tabs-item 参数配置}

字体: logo, code
颜色: red, yellow, green, cyan, blue, gray
大小: small, h4, h3, h2, h1, large, huge, ultra
对齐方向: left, center, right

{/tabs-item} {tabs-item 样式预览}

彩色文字在一段话中方便插入各种颜色的标签，包括：
红色

黄色

绿色

青色

蓝色

灰色
超大号文字文档「开始」页面中的标题部分就是超大号文字。

大标题

小标题

{/tabs-item} {tabs-item 示例代码}

- 彩色文字
  在一段话中方便插入各种颜色的标签，包括：
        <p class="p red">红色</p>
        <p class="p yellow">黄色</p>
        <p class="p green">绿色</p>
        <p class="p cyan">青色</p>
        <p class="p blue">蓝色</p>
        <p class="p gray">灰色</p>
- 超大号文字
  文档「开始」页面中的标题部分就是超大号文字。
        
  <p class="p center logo large">大标题</p>
  <p class="p center small">小标题</p>

{/tabs-item}

行内文本

{tabs-item 标签语法}

<span class="p 样式参数(参数以空格划分)">文本内容</span>

{/tabs-item} {tabs-item 参数配置}

字体: logo, code
颜色: red, yellow, green, cyan, blue, gray
大小: small, h4, h3, h2, h1, large, huge, ultra
对齐方向: left, center, right

{/tabs-item} {tabs-item 样式预览}

彩色文字在一段话中方便插入各种颜色的标签，包括：红色、黄色、绿色、青色、蓝色、灰色。

{/tabs-item} {tabs-item 示例代码}

- 彩色文字
  在一段话中方便插入各种颜色的标签，包括：
        <span class="p red">红色</span>、
        <span class="p yellow">黄色</span>、
        <span class="p green">绿色</span>、
        <span class="p cyan">青色</span>、
        <span class="p blue">蓝色</span>、
        <span class="p gray">灰色</span>。

{/tabs-item}

小标签

{tabs-item 标签语法}

<hao-sign type="类型">内容</hao-sign>,

{/tabs-item} {tabs-item 参数配置}

已预制参数: gpt, modified, not-sure
可引入自定义css

{/tabs-item} {tabs-item 样式预览}

ChatGPT
已修正内容
待确认内容

{/tabs-item} {tabs-item 示例代码}

<!-- type支持自定义 可以仿照插件中的相关CSS实现自定义小标签备注功能 -->
<hao-sign type="gpt">ChatGPT</hao-sign>
<hao-sign type="modified">已修正内容</hao-sign>
<hao-sign type="not-sure">待确认内容</hao-sign>

{/tabs-item}

进度条

{tabs-item 标签语法}

<hao-progress percentage="比例" color="颜色代码"></hao-progress>

{/tabs-item} {tabs-item 样式预览} {/tabs-item} {tabs-item 示例代码}

<hao-progress percentage="50%" color="#6ce766"></hao-progress>

{/tabs-item}

分割线

{tabs-item 标签语法}

<hao-dotted begin="开始颜色" end="结束颜色"></hao-dotted>

{/tabs-item} {tabs-item 参数配置}

不填写begin与end的话将使用默认值

begin: 开始颜色
end: 结束颜色

{/tabs-item} {tabs-item 样式预览}

{/tabs-item} {tabs-item 示例代码}

<hao-dotted></hao-dotted>
<hao-dotted begin="#1772e8" end="#4cd327"></hao-dotted>

{/tabs-item}

tag-hide

如果你想把一些文字、内容隐藏起来，并提供按钮让用户点击显示。可以使用这个标签外挂。
请注意，tag-hide内的标签外挂content内都不建议有h1 - h6 等标题。
因为Toc会把隐藏内容标题也显示出来，而且当滚动屏幕时，如果隐藏内容没有显示出来，会导致Toc的滚动出现异常。

{tabs-item 标签语法}

<hao-tag-hide display='按钮显示的文字' bg='按钮的背景颜色' color='按钮文字的颜色'>内容</hao-tag-hide>

{/tabs-item} {tabs-item 参数配置}

display: 按钮显示的文字
bg: 按钮的背景颜色
color: 按钮文字的颜色

{/tabs-item} {tabs-item 样式预览}

哪个英文字母最酷？因为西装裤(C装酷)

门里站着一个人?闪

{/tabs-item} {tabs-item 示例代码}

哪个英文字母最酷？<hao-tag-hide display='查看答案' bg='#ff7242' color='#fff'>因为西装裤(C装酷)</hao-tag-hide>
    
门里站着一个人?<hao-tag-hide display='Click'>闪</hao-tag-hide>

{/tabs-item}

复选列表

{tabs-item 标签语法}

<hao-checkbox class ='样式' colour='颜色' status='选中状态'>内容</hao-checkbox>

{/tabs-item} {tabs-item 参数配置}

样式class: plus, minus, times
颜色colour: red, yellow, green, cyan, blue, gray
选中状态status: checked

{/tabs-item} {tabs-item 样式预览}

纯文本测试支持简单的 markdown 语法支持自定义颜色绿色 + 默认选中黄色 + 默认选中青色 + 默认选中蓝色 + 默认选中增加减少叉

{/tabs-item} {tabs-item 示例代码}

<hao-checkbox>纯文本测试</hao-checkbox>
<hao-checkbox status='checked'>支持简单的 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://guides.github.com/features/mastering-markdown/">markdown</a> 语法</hao-checkbox>
<hao-checkbox colour='red'>支持自定义颜色</hao-checkbox>
<hao-checkbox colour='green' status='checked'>绿色 + 默认选中</hao-checkbox>
<hao-checkbox colour='yellow' status='checked'>黄色 + 默认选中</hao-checkbox>
<hao-checkbox colour='cyan' status='checked'>青色 + 默认选中</hao-checkbox>
<hao-checkbox colour='blue' status='checked'>蓝色 + 默认选中</hao-checkbox>
<hao-checkbox class='plus' colour='green' status='checked'>增加</hao-checkbox>
<hao-checkbox class='minus' colour='yellow' status='checked'>减少</hao-checkbox>
<hao-checkbox class='times' colour='red' status='checked'>叉</hao-checkbox>

{/tabs-item}

分栏

{tabs-item 标签语法}

    <hao-tabs id="选项卡块标签的唯一名称" index="选择第几个标签">
        <div class="_tpl" >   
            {tabs-item 标题}内容{\/tabs-item}
            {tabs-item 标题}内容{\/tabs-item}
        </div> 
    </hao-tabs>

{/tabs-item} {tabs-item 参数配置}

id:
- 选项卡块标签的唯一名称，不带逗号。
- 将在#id 中用作每个标签及其索引号的前缀。
- 不要设置空格
- 仅当前帖子/页面的 URL 必须是唯一的！
index:
- 活动选项卡的索引号。
- 如果未指定，将选择第一个标签（1）。
- 如果 index 为-1，则不会选择任何选项卡。

{/tabs-item} {tabs-item 样式预览}

This is Tab 1.

This is Tab 2.

This is Tab 3.

{tabs-pane 第一个}单身狗的故事{/tabs-pane} {tabs-pane 第二个}小说家的故事{/tabs-pane}

{/tabs-item} {tabs-item 示例代码}

    <tool-tabs>
      <div class="_tpl">
        {tabs-pane 第一个}单身狗的故事{/tabs-pane}
        {tabs-pane 第二个}小说家的故事{/tabs-pane}
      </div>
    </tool-tabs>

{/tabs-item}

按钮

{tabs-item 标签语法}

<hao-btns class="样式" style="布局" grid="列数" >
     <div class="_tpl" > 
       {标题, 链接, 图片或者图标}
       {标题, 链接, 图片或者图标}
     </div> 
</hao-btns> 

<hao-btns class="样式" style="布局" grid="列数">
     <div class="_tpl" > 
       {标题, 描述, 链接, 图片, 图标}
       {标题, 描述, 链接, 图片, 图标}
     </div> 
</hao-btns>

{/tabs-item} {tabs-item 参数配置}

圆角样式class：rounded, circle
布局方式style：wide, fill, center,around 默认为自动宽度，适合视野内只有一两个的情况。
列数grid: grid2, grid3, grid4, grid5

参数	含义
wide	宽一点的按钮
fill	填充布局，自动铺满至少一行，多了会换行
center	居中，按钮之间是固定间距
around	居中分散
grid2	等宽最多 2 列，屏幕变窄会适当减少列数
grid3	等宽最多 3 列，屏幕变窄会适当减少列数
grid4	等宽最多 4 列，屏幕变窄会适当减少列数
grid5	等宽最多 5 列，屏幕变窄会适当减少列数

{/tabs-item} {tabs-item 样式预览}

如果需要显示类似「团队成员」之类的一组含有头像的链接：

{小林, https://www.lucksss.com/, /upload/headimg_dl.jpg,} {困困鱼, https://0206.ink/, https://0206.ink/upload/645fac04e203a.jpeg}

或者含有图标的按钮：

{查看文档, /, haofont hao-icon-book} {查看文档, /, haofont hao-icon-book}

圆形图标 + 标题 + 描述 + 图片 + 网格 5 列 + 居中

{心率管,专业版,https://apps.apple.com/cn/app/heart-mate-pro-hrm-utility/id1463348922?ls=1,https://cdn1.tianli0.top/gh/xaoxuu/cdn-assets/qrcode/heartmate_pro.png,haofont hao-icon-heartbeat1} {心率管,专业版,https://apps.apple.com/cn/app/heart-mate-pro-hrm-utility/id1463348922?ls=1,https://cdn1.tianli0.top/gh/xaoxuu/cdn-assets/qrcode/heartmate_pro.png,haofont hao-icon-heartbeat1}

{/tabs-item} {tabs-item 示例代码}

如果需要显示类似「团队成员」之类的一组含有头像的链接：

<hao-btns class="circle" grid="grid5">
     <div class="_tpl" > 
       {小林, https://www.lucksss.com/, /upload/headimg_dl.jpg,}
       {困困鱼, https://0206.ink/, https://0206.ink/upload/645fac04e203a.jpeg}
     </div> 
</hao-btns>

或者含有图标的按钮：

<hao-btns class="rounded" grid="grid2">
     <div class="_tpl" > 
       {查看文档, /, haofont hao-icon-book}
       {查看文档, /, haofont hao-icon-book}
     </div> 
</hao-btns>

圆形图标 + 标题 + 描述 + 图片 + 网格 5 列 + 居中

<hao-btns class="circle" style="center" grid="grid5">
     <div class="_tpl" > 
       {心率管,专业版,https://apps.apple.com/cn/app/heart-mate-pro-hrm-utility/id1463348922?ls=1,https://cdn1.tianli0.top/gh/xaoxuu/cdn-assets/qrcode/heartmate_pro.png,haofont hao-icon-heartbeat1}
       {心率管,专业版,https://apps.apple.com/cn/app/heart-mate-pro-hrm-utility/id1463348922?ls=1,https://cdn1.tianli0.top/gh/xaoxuu/cdn-assets/qrcode/heartmate_pro.png,haofont hao-icon-heartbeat1}
     </div> 
</hao-btns>

{/tabs-item}

时间线

{tabs-item 标签语法}

<hao-timeline title="标题/时间线" color="颜色">
     <div class="_tpl">
       {timeline-item 时间}内容{/timeline-item}
       {timeline-item 时间}内容{/timeline-item}
     </div>  
</hao-timeline>

{/tabs-item} {tabs-item 参数配置}

参数	含义
title	标题/时间线
color	default(留空) / blue / pink / red / purple / orange / green

{/tabs-item} {tabs-item 样式预览}

默认颜色

{timeline-item 01-02}这是测试页面{/timeline-item} {timeline-item 01-03}这是测试页面{/timeline-item}

pink

{timeline-item 01-02}这是测试页面{/timeline-item} {timeline-item 01-03}这是测试页面{/timeline-item}

{/tabs-item} {tabs-item 示例代码}

默认颜色

<hao-timeline title="2023">
     <div class="_tpl" >
       {timeline-item 01-02}这是测试页面{/timeline-item}
       {timeline-item 01-03}这是测试页面{/timeline-item}
     </div>  
</hao-timeline>

pink

<hao-timeline title="2023" color="pink">
     <div class="_tpl" >
       {timeline-item 01-02}这是测试页面{/timeline-item}
       {timeline-item 01-03}这是测试页面{/timeline-item}
     </div>  
</hao-timeline>

{/tabs-item}

折叠框

{tabs-item 标签语法}

<hao-folding title="标题" color="颜色" type="状态"> 
    <div class="_tpl">
        内容
    </div>  
</hao-folding>

{/tabs-item} {tabs-item 参数配置}

参数	含义
title	标题
color	颜色：blue, cyan, green, yellow, red
type	状态填写 open 代表默认打开

{/tabs-item} {tabs-item 样式预览}

博主的主页

这是一个默认打开的折叠框。

    # 代码示例
    public class HelloWorld {
        public static void main(String[] args) {
            System.out.println("Hello World!");
        }
    }

无序列表内容3
- 二级无序列表内容
  1. 三级有序列表内容

测试

{/tabs-item} {tabs-item 示例代码}

<hao-folding title="查看图片测试"> 
    <div class="_tpl">
        
![博主的主页](https://www.lucksss.com/assets/images/myblog.jpg)
    </div>  
</hao-folding>

<hao-folding title="查看默认打开的折叠框" color="blue" type="open"> 
    <div class="_tpl">
        <p>这是一个默认打开的折叠框。</p>
    </div>  
</hao-folding>

代码块里面因为还嵌套了一个代码框所以向后缩进了一行实际应用时要将代码块前面的空格去掉

<hao-folding title="查看代码测试" color="green" > 
    <div class="_tpl">

     ```java
         # 代码示例
         public class HelloWorld {
             public static void main(String[] args) {
                 System.out.println("Hello World!");
             }
         }
     ```
        
</div>  
</hao-folding>

<hao-folding title="查看列表测试" color="yellow"> 
    <div class="_tpl">
        
* 无序列表内容3
    * 二级无序列表内容
        1. 三级有序列表内容

    </div>  
</hao-folding>

<hao-folding title="查看嵌套测试" color="red"> 
    <div class="_tpl">
        </hao-folding title="查看嵌套测试2" > 
            <div class="_tpl">
                 <hao-folding title="查看嵌套测试3" > 
                    <div class="_tpl">
                        测试
                    </div>  
                </hao-folding>
            </div>  
        </hao-folding> 
    </div>  
</hao-folding>

{/tabs-item}

灯箱

{tabs-item 标签语法}

gallerygroup 相册图库

<hao-gallery-group>
     <div class="_tpl" > 
       {名字, 描述, 链接, 图库封面}
       {名字, 描述, 链接, 图库封面}
     </div> 
</hao-gallery-group>

gallery 相册

<hao-gallery>
     <div class="_tpl" > 
{图片图片, 图片图片, 图片图片, 图片图片}
     </div>  
</hao-gallery>

{/tabs-item} {tabs-item 样式预览}

gallerygroup 相册图库

{收藏的壁纸, 喜欢的一些壁纸, /photos?photo_group_name=photo-group-FinUc, https://img.lucksss.com/random.php?1} {收藏的壁纸, 喜欢的一些壁纸, /photos?photo_group_name=photo-group-FinUc, https://img.lucksss.com/random.php}

gallery 相册

{ https://img.lucksss.com/random.php?2, https://img.lucksss.com/random.php?3 }

{/tabs-item} {tabs-item 示例代码}

gallerygroup 相册图库

<hao-gallery-group>
     <div class="_tpl" > 
       {收藏的壁纸, 喜欢的一些壁纸, /photos?photo_group_name=photo-group-FinUc, https://img.lucksss.com/random.php?1}
       {收藏的壁纸, 喜欢的一些壁纸, /photos?photo_group_name=photo-group-FinUc, https://img.lucksss.com/random.php}
     </div> 
</hao-gallery-group>

gallery 相册

<hao-gallery>
     <div class="_tpl" > 
         {
         https://img.lucksss.com/random.php?2,
         https://img.lucksss.com/random.php?3
         }
     </div>  
</hao-gallery>

{/tabs-item}

图片卡片式外链

{tabs-item 标签语法}

携带跳转链接的卡片

为了更好的展示效果建议都填写必填项: link，img，tip

<hao-introduction-card
    link="链接"   
    img="图片"  
    tip="标签"
    cardTitle= "卡片标题"
    logo ="logo"
    title="标题"   
    subTitle="副标题" >
</hao-introduction-card>

不携带跳转链接的卡片

除img为必填其他可以忽略

<hao-introduction-card
    link="链接"   
    img="图片"  
    tip="标签"
    cardTitle= "卡片标题">
</hao-introduction-card>

{/tabs-item} {tabs-item 参数配置}

参数	是否必填	含义
link	否	跳转链接
img	是	卡片图片
tip	否	标签
cardTitle	否	标题
logo	否	logo
title	否	标题
subTitle	否	副标题

{/tabs-item} {tabs-item 样式预览}

携带跳转链接的卡片

不携带跳转链接的卡片

{/tabs-item} {tabs-item 示例代码}

携带跳转链接的卡片

<hao-introduction-card
    link="https://blog.lucksss.com"   
    img="https://www.lucksss.com/assets/images/myblog.jpg"  
    tip="卡片"
    cardTitle= "链接卡片"
    logo ="/upload/headimg_dl.jpg"
    title="小林的小破站"   
    subTitle="小林" >
</hao-introduction-card>

* 不携带跳转链接的卡片
<hao-introduction-card
    img="https://www.lucksss.com/assets/images/myblog.jpg"  
    tip="卡片"
    cardTitle= "链接卡片">
</hao-introduction-card>

{/tabs-item}

链接卡片

{tabs-item 标签语法}

<hao-tag-link link="链接" logo="logo" title="标题" described="描述"></hao-tag-link>

{/tabs-item} {tabs-item 参数配置}

参数	含义
link	跳转链接
logo	logo
title	标题
described	描述

{/tabs-item} {tabs-item 样式预览}
{/tabs-item} {tabs-item 示例代码}

<hao-tag-link 
link="https://www.lucksss.com" logo="/upload/headimg_dl.jpg"
title="小林的小破站"  
described="小林">  
</hao-tag-link>

{/tabs-item}

友链标签

{tabs-item 标签语法}

默认

<hao-flink name='标题' desc='描述' style='default'> 
    <div class="_tpl" > 
        {网站名称,网站地址,Logo,描述}
        {网站名称,网站地址,Logo,描述}
    </div>  
</hao-flink>

美化

<hao-flink name='标题' desc='描述' style='beautify'> 
    <div class="_tpl" > 
        {网站名称,网站地址,Logo,描述,背景}
        {网站名称,网站地址,Logo,描述,背景}
    </div>    
</hao-flink>

{/tabs-item} {tabs-item 参数配置}

参数	含义
name	标题
desc	描述
style	样式：default beautify

{/tabs-item} {tabs-item 样式预览}

默认

{困困鱼,https://0206.ink/,https://0206.ink/upload/645fac04e203a.jpeg,喜欢捣鼓的博主} {小林的小破站,https://www.lucksss.com/,/upload/headimg_dl.jpg,我们总是在相同的路上却看到了不同的风景}

美化

{困困鱼,https://0206.ink/,https://0206.ink/upload/645fac04e203a.jpeg,喜欢捣鼓的博主,https://0206.ink/upload/645fac04e203a.jpeg} {困困鱼,https://www.lucksss.com/,/upload/headimg_dl.jpg,我们总是在相同的路上却看到了不同的风景,https://www.lucksss.com/assets/images/myblog.jpg}

{/tabs-item} {tabs-item 示例代码}

默认

<hao-flink name='小伙伴' desc='描述' style='default'> 
    <div class="_tpl" > 
        {困困鱼,https://0206.ink/,https://0206.ink/upload/645fac04e203a.jpeg,喜欢捣鼓的博主}
        {小林的小破站,https://www.lucksss.com/,/upload/headimg_dl.jpg,我们总是在相同的路上 却看到了不同的风景}
    </div>
</hao-flink>

美化

<hao-flink name='推荐博客' desc='描述' style='beautify'> 
   <div class="_tpl" > 
        {困困鱼,https://0206.ink/,https://0206.ink/upload/645fac04e203a.jpeg,喜欢捣鼓的博主,https://0206.ink/upload/645fac04e203a.jpeg}
        {困困鱼,https://www.lucksss.com/,/upload/headimg_dl.jpg,我们总是在相同的路上 却看到了不同的风景,https://www.lucksss.com/assets/images/myblog.jpg}
    </div>   
</hao-flink>

{/tabs-item}

Tip

{tabs-item 标签语法}

<hao-tip class="样式" color="自定义图标">内容</hao-tip>

{/tabs-item} {tabs-item 参数配置}

参数	含义
class	样式: success,error,warning,bolt,ban,home,sync,cogs,key,bell
noIcon	自定义图标

{/tabs-item} {tabs-item 样式预览}

default

info

success

error

warning

bolt

ban

home

sync

cogs

key

bell

自定义 font awesome 图标

{/tabs-item} {tabs-item 示例代码}

<hao-tip class=""><p>default</p></hao-tip>
<hao-tip class="info"><p>info</p></hao-tip>
<hao-tip class="success"><p>success</p></hao-tip>
<hao-tip class="error"><p>error</p></hao-tip>
<hao-tip class="warning"><p>warning</p></hao-tip>
<hao-tip class="bolt" content='bolt'><p>bolt</p></hao-tip>
<hao-tip class="ban" content='ban'><p>ban</p></hao-tip>
<hao-tip class="home" content='home'><p>home</p></hao-tip>
<hao-tip class="sync" content='sync'><p>sync</p></hao-tip>
<hao-tip class="cogs" content='cogs'><p>cogs</p></hao-tip>
<hao-tip class="key" content='key'><p>key</p></hao-tip>
<hao-tip class="bell" content='bell'><p>bell</p></hao-tip>
<hao-tip class="fa-atom font awesome" noIcon="haofont hao-icon-sanmingzhi"><p>自定义 font awesome 图标</p></hao-tip>

{/tabs-item}

Noto

{tabs-item 标签语法}

<hao-note  class="标识" noIcon="选择icon" style="配置style">内容</hao-note>

{/tabs-item} {tabs-item 参数配置}

参数	是否必填	含义
class	否	标识，不同的标识有不同的配色（ default / primary / success / info / warning / danger ）
style	否	可以覆盖配置中的 style （simple/modern/flat/disabled）
noIcon	否	可配置自定义 icon (支持内置的阿里图标,也可以配置 no-icon )

{/tabs-item} {tabs-item 样式预览}

默认提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

默认提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

默认提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

默认提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

默认提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

图标支持 自己引入图标 和 主题内置的阿里图标

你是刷 Visa 还是 UnionPay

2023 年了….

小心开车安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

讨厌前端

你是刷 Visa 还是 UnionPay

2023 年了….

小心开车安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

讨厌前端

你是刷 Visa 还是 UnionPay

2023 年了….

小心开车安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

讨厌前端

你是刷 Visa 还是 UnionPay

2023 年了….

小心开车安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

讨厌前端

{/tabs-item} {tabs-item 示例代码}

<hao-note  class="simple" >默认 提示块标签</hao-note>
<hao-note  class="simple" style="default">default 提示块标签</hao-note>
<hao-note  class="simple" style="primary">primary 提示块标签</hao-note>
<hao-note  class="simple" style="success">success 提示块标签</hao-note>
<hao-note  class="simple" style="info">info 提示块标签</hao-note>
<hao-note  class="simple" style="warning">warning 提示块标签</hao-note>
<hao-note  class="simple" style="danger">danger 提示块标签</hao-note>

<hao-note  class="modern" >默认 提示块标签</hao-note>
<hao-note  class="modern" style="default">default 提示块标签</hao-note>
<hao-note  class="modern" style="primary">primary 提示块标签</hao-note>
<hao-note  class="modern" style="success">success 提示块标签</hao-note>
<hao-note  class="modern" style="info">info 提示块标签</hao-note>
<hao-note  class="modern" style="warning">warning 提示块标签</hao-note>
<hao-note  class="modern" style="danger">danger 提示块标签</hao-note>

<hao-note  class="flat" >默认 提示块标签</hao-note>
<hao-note  class="flat" style="default">default 提示块标签</hao-note>
<hao-note  class="flat" style="primary">primary 提示块标签</hao-note>
<hao-note  class="flat" style="success">success 提示块标签</hao-note>
<hao-note  class="flat" style="info">info 提示块标签</hao-note>
<hao-note  class="flat" style="warning">warning 提示块标签</hao-note>
<hao-note  class="flat" style="danger">danger 提示块标签</hao-note>

<hao-note  class="disabled" >默认 提示块标签</hao-note>
<hao-note  class="disabled" style="default">default 提示块标签</hao-note>
<hao-note  class="disabled" style="primary">primary 提示块标签</hao-note>
<hao-note  class="disabled" style="success">success 提示块标签</hao-note>
<hao-note  class="disabled" style="info">info 提示块标签</hao-note>
<hao-note  class="disabled" style="warning">warning 提示块标签</hao-note>
<hao-note  class="disabled" style="danger">danger 提示块标签</hao-note>

<hao-note  class="flat" noIcon="no-icon">默认 提示块标签</hao-note>
<hao-note  class="flat" noIcon="no-icon" style="default">default 提示块标签</hao-note>
<hao-note  class="flat" noIcon="no-icon" style="primary">primary 提示块标签</hao-note>
<hao-note  class="flat" noIcon="no-icon" style="success">success 提示块标签</hao-note>
<hao-note  class="flat" noIcon="no-icon" style="info">info 提示块标签</hao-note>
<hao-note  class="flat" noIcon="no-icon" style="warning">warning 提示块标签</hao-note>
<hao-note  class="flat" noIcon="no-icon" style="danger">danger 提示块标签</hao-note>

图标支持 自己引入图标 和 主题内置的阿里图标

<hao-note  class="simple" noIcon="haofont hao-icon-rocket">你是刷 Visa 还是 UnionPay</hao-note>
<hao-note  class="simple" noIcon="haofont hao-icon-bullhorn" style="blue">2023 年了….</hao-note>
<hao-note  class="simple" noIcon="haofont hao-icon-instagram" style="pink">小心开车 安全至上</hao-note>
<hao-note  class="simple" noIcon="haofont hao-icon-fan" style="red">这是三片呢？还是四片？</hao-note>
<hao-note  class="simple" noIcon="haofont hao-icon-dengpao" style="orange">你是刷 Visa 还是 UnionPay</hao-note>
<hao-note  class="simple" noIcon="haofont hao-icon-sanmingzhi" style="purple">剪刀石头布</hao-note>
<hao-note  class="simple" noIcon="haofont hao-icon-train" style="green">讨厌前端</hao-note>

<hao-note  class="modern" noIcon="haofont hao-icon-rocket">你是刷 Visa 还是 UnionPay</hao-note>
<hao-note  class="modern" noIcon="haofont hao-icon-bullhorn" style="blue">2023 年了….</hao-note>
<hao-note  class="modern" noIcon="haofont hao-icon-instagram" style="pink">小心开车 安全至上</hao-note>
<hao-note  class="modern" noIcon="haofont hao-icon-fan" style="red">这是三片呢？还是四片？</hao-note>
<hao-note  class="modern" noIcon="haofont hao-icon-dengpao" style="orange">你是刷 Visa 还是 UnionPay</hao-note>
<hao-note  class="modern" noIcon="haofont hao-icon-sanmingzhi" style="purple">剪刀石头布</hao-note>
<hao-note  class="modern" noIcon="haofont hao-icon-train" style="green">讨厌前端</hao-note>

<hao-note  class="flat" noIcon="haofont hao-icon-rocket">你是刷 Visa 还是 UnionPay</hao-note>
<hao-note  class="flat" noIcon="haofont hao-icon-bullhorn" style="blue">2023 年了….</hao-note>
<hao-note  class="flat" noIcon="haofont hao-icon-instagram" style="pink">小心开车 安全至上</hao-note>
<hao-note  class="flat" noIcon="haofont hao-icon-fan" style="red">这是三片呢？还是四片？</hao-note>
<hao-note  class="flat" noIcon="haofont hao-icon-dengpao" style="orange">你是刷 Visa 还是 UnionPay</hao-note>
<hao-note  class="flat" noIcon="haofont hao-icon-sanmingzhi" style="purple">剪刀石头布</hao-note>
<hao-note  class="flat" noIcon="haofont hao-icon-train" style="green">讨厌前端</hao-note>

<hao-note  class="disabled" noIcon="haofont hao-icon-rocket">你是刷 Visa 还是 UnionPay</hao-note>
<hao-note  class="disabled" noIcon="haofont hao-icon-bullhorn" style="blue">2023 年了….</hao-note>
<hao-note  class="disabled" noIcon="haofont hao-icon-instagram" style="pink">小心开车 安全至上</hao-note>
<hao-note  class="disabled" noIcon="haofont hao-icon-fan" style="red">这是三片呢？还是四片？</hao-note>
<hao-note  class="disabled" noIcon="haofont hao-icon-dengpao" style="orange">你是刷 Visa 还是 UnionPay</hao-note>
<hao-note  class="disabled" noIcon="haofont hao-icon-sanmingzhi" style="purple">剪刀石头布</hao-note>
<hao-note  class="disabled" noIcon="haofont hao-icon-train" style="green">讨厌前端</hao-note>

{/tabs-item}

视频

{tabs-item 标签语法}

视频

<hao-dplayer src="视频地址"></hao-dplayer>

Bilibili 视频

<hao-bilibili bvid="视频地址"></hao-bilibili>

{/tabs-item} {tabs-item 参数配置}

视频

参数	含义
src	视频地址
width	width默认为100%
height	height默认为500

Bilibili 视频

参数	含义
bvid	视频ID 为必填
page	页数
width	width默认为100%
height	height默认为500

{/tabs-item} {tabs-item 样式预览}
{/tabs-item} {tabs-item 示例代码}

视频

<hao-dplayer src="/upload/coding-sequences-1080p.mp4"></hao-dplayer>

Bilibili 视频

<hao-bilibili bvid="BV1k94y1C7B2"></hao-bilibili>

{/tabs-item}

以上内容借鉴了主题与插件开发者的博客文章原文下方有直通车