本文最后更新于 2024-06-22,文章可能存在过时内容,如有过时内容欢迎留言或者联系我进行反馈。

Hao主题中大部分标签移植于安知鱼安知鱼主题标签 Tag Plugins

标签需要Hao主题>=1.3.5安装插件标签 plugin-haotag

段落文本

<p class="p 样式参数(参数以空格划分)">文本内容</p>
HTML
  1. 字体: logo, code
  2. 颜色: red,yellow,green,cyan,blue,gray
  3. 大小: small, h4, h3, h2, h1, large, huge, ultra
  4. 对齐方向: left, center, right
  • 彩色文字

    在一段话中方便插入各种颜色的标签,包括:

    红色

    黄色

    绿色

    青色

    蓝色

    灰色

  • 超大号文字

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

    A Wonderful Theme for hao

- 彩色文字
		  在一段话中方便插入各种颜色的标签,包括:<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">Volantis</p><p class="p center small">A Wonderful Theme for hao</p>
HTML

行内文本 span

<span class="p 样式参数(参数以空格划分)">文本内容</span>
HTML
  1. 字体: logo, code
  2. 颜色: red,yellow,green,cyan,blue,gray
  3. 大小: small, h4, h3, h2, h1, large, huge, ultra
  4. 对齐方向: left, center, right
  • 彩色文字

    在一段话中方便插入各种颜色的标签,包括:红色黄色绿色青色蓝色灰色

  • 超大号文字

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

    A Wonderful Theme for hao

- 彩色文字
		  在一段话中方便插入各种颜色的标签,包括:<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>。
		- 超大号文字
		  文档「开始」页面中的标题部分就是超大号文字。
		  <span class="p center logo large">Volantis</span><span class="p center small">A Wonderful Theme for hao</span>
HTML

行内文本样式 text

<u>文本内容</u><emp>文本内容</emp><wavy>文本内容</wavy><del>文本内容</del><kbd>文本内容</kbd><psw>文本内容</psw>
HTML
  1. 下划线 的文本
  2. 着重号的文本
  3. 波浪线的文本
  4. 删除线 的文本
  5. 键盘样式的文本 command + D
  6. 密码样式的文本:这里没有验证码
1. 带 <u>下划线</u> 的文本
		2. 带 <emp>着重号</emp>的文本
		3. 带 <wavy>波浪线</wavy>的文本
		4. 带 <del>删除线</del> 的文本
		5. 键盘样式的文本 <kbd>command</kbd> + <kbd>D</kbd>
		6. 密码样式的文本:<psw>这里没有验证码</psw>
HTML

分栏 tab

<hao-tabs id="选项卡块标签的唯一名称" index="选择第几个标签">
		    <div class="_tpl" >
		        {tabs-item 标题}内容{/tabs-item}
		        {tabs-item 标题}内容{/tabs-item}
		    </div></hao-tabs>
HTML
  1. Unique name :
    • 选项卡块标签的唯一名称,不带逗号。
    • 将在#id 中用作每个标签及其索引号的前缀。
    • 不要设置空格
    • 仅当前帖子/页面的 URL 必须是唯一的!
  2. [index]:
    • 活动选项卡的索引号。
    • 如果未指定,将选择第一个标签(1)。
    • 如果 index 为-1,则不会选择任何选项卡。

Demo1 - 预设选择第一个【默认】

This is Tab 1.

This is Tab 2.

This is Tab 3.

Demo2 - 预设选择 tabs

This is Tab 1.

This is Tab 2.

This is Tab 3.

Demo3 - 没有预设值

This is Tab 1.

This is Tab 2.

This is Tab 3.

Demo1 - 预设选择第一个【默认】

<hao-tabs id="Demo1">
		    <div class="_tpl" >
		        {tabs-item test1 1}<p><strong>This is Tab 1.</strong></p>{/tabs-item}
		        {tabs-item test1 2}<p><strong>This is Tab 2.</strong></p>{/tabs-item}
		        {tabs-item test1 3}<p><strong>This is Tab 3.</strong></p>{/tabs-item}
		    </div></hao-tabs>
HTML

Demo2 - 预设选择 tabs

<hao-tabs id="Demo2" index="2">
		    <div class="_tpl" >
		        {tabs-item test2 1}<p><strong>This is Tab 1.</strong></p>{/tabs-item}
		        {tabs-item test2 2}<p><strong>This is Tab 2.</strong></p>{/tabs-item}
		        {tabs-item test2 3}<p><strong>This is Tab 3.</strong></p>{/tabs-item}
		    </div></hao-tabs>
HTML

Demo3 - 没有预设值

<hao-tabs id="Demo3" index="-1">
		    <div class="_tpl" >
		        {tabs-item test3 1}<p><strong>This is Tab 1.</strong></p>{/tabs-item}
		        {tabs-item test3 2}<p><strong>This is Tab 2.</strong></p>{/tabs-item}
		        {tabs-item test3 3}<p><strong>This is Tab 3.</strong></p>{/tabs-item}
		    </div></hao-tabs>
HTML

按钮 btns

<hao-btns class="样式" style="布局" grid="列数" >
		     <div class="_tpl" >
		       {标题, 链接, 图片或者图标}
		       {标题, 链接, 图片或者图标}
		     </div></hao-btns>
		
		<hao-btns class="样式" style="布局" grid="列数">
		     <div class="_tpl" >
		       {标题, 描述, 链接, 图片, 图标}
		       {标题, 描述, 链接, 图片, 图标}
		     </div></hao-btns>
HTML
  1. 圆角样式class:rounded, circle
  2. 布局方式style:wide, fill, center,around 默认为自动宽度,适合视野内只有一两个的情况。
  3. 列数grid: grid2, grid3, grid4, grid5
参数含义
wide宽一点的按钮
fill填充布局,自动铺满至少一行,多了会换行
center居中,按钮之间是固定间距
around居中分散
grid2等宽最多 2 列,屏幕变窄会适当减少列数
grid3等宽最多 4 列,屏幕变窄会适当减少列数
grid4等宽最多 4 列,屏幕变窄会适当减少列数
grid5等宽最多 5 列,屏幕变窄会适当减少列数

  • 如果需要显示类似「团队成员」之类的一组含有头像的链接:
  • 或者含有图标的按钮:
  • 圆形图标 + 标题 + 描述 + 图片 + 网格 5 列 + 居中
  • 如果需要显示类似「团队成员」之类的一组含有头像的链接:
<hao-btns class="circle" grid="grid5">
		     <div class="_tpl" >
		       {小小笔记大大用处, https://blog.uptoz.cn/, https://api.minio.uptoz.cn/blog/images/ED2MIz31Ry.webp}
		       {小小笔记大大用处, https://blog.uptoz.cn/, https://api.minio.uptoz.cn/blog/images/ED2MIz31Ry.webp}
		     </div></hao-btns>
HTML
  • 或者含有图标的按钮:
<hao-btns class="rounded" grid="grid2">
		     <div class="_tpl" >
		       {查看文档, /, haofont hao-icon-book}
		       {查看文档, /, haofont hao-icon-book}
		     </div></hao-btns>
HTML
  • 圆形图标 + 标题 + 描述 + 图片 + 网格 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>
HTML

timeline

<hao-timeline title="标题/时间线" color="颜色">
		     <div class="_tpl">
		       {timeline-item 时间}内容{/timeline-item}
		       {timeline-item 时间}内容{/timeline-item}
		     </div></hao-timeline>
HTML
参数含义
title标题/时间线
colortimeline 颜色,default(留空) / blue / pink / red / purple / orange / green
  • 默认颜色

2022

01-02

这是测试页面

01-03

这是测试页面
  • blue

2022

01-02

这是测试页面

01-03

这是测试页面
  • pink

2022

01-02

这是测试页面

01-03

这是测试页面
  • red

2022

01-02

这是测试页面

01-03

这是测试页面
  • purple

2022

01-02

这是测试页面

01-03

这是测试页面
  • orange

2022

01-02

这是测试页面

01-03

这是测试页面
  • green

2022

01-02

这是测试页面

01-03

这是测试页面
  • 默认颜色
<hao-timeline title="2022">
		     <div class="_tpl" >
		       {timeline-item 01-02}这是测试页面{/timeline-item}
		       {timeline-item 01-03}这是测试页面{/timeline-item}
		     </div></hao-timeline>
HTML
  • blue
<hao-timeline title="2022" color="blue">
		     <div class="_tpl" >
		       {timeline-item 01-02}这是测试页面{/timeline-item}
		       {timeline-item 01-03}这是测试页面{/timeline-item}
		     </div></hao-timeline>
HTML
  • pink
<hao-timeline title="2022" color="pink">
		     <div class="_tpl" >
		       {timeline-item 01-02}这是测试页面{/timeline-item}
		       {timeline-item 01-03}这是测试页面{/timeline-item}
		     </div></hao-timeline>
HTML
  • red
<hao-timeline title="2022" color="red">
		     <div class="_tpl" >
		       {timeline-item 01-02}这是测试页面{/timeline-item}
		       {timeline-item 01-03}这是测试页面{/timeline-item}
		     </div></hao-timeline>
HTML
  • purple
<hao-timeline title="2022" color="purple">
		     <div class="_tpl" >
		       {timeline-item 01-02}这是测试页面{/timeline-item}
		       {timeline-item 01-03}这是测试页面{/timeline-item}
		     </div></hao-timeline>
HTML
  • orange
<hao-timeline title="2022" color="orange">
		     <div class="_tpl" >
		       {timeline-item 01-02}这是测试页面{/timeline-item}
		       {timeline-item 01-03}这是测试页面{/timeline-item}
		     </div></hao-timeline>
HTML
  • green
<hao-timeline title="2022" color="green">
		     <div class="_tpl" >
		       {timeline-item 01-02}这是测试页面{/timeline-item}
		       {timeline-item 01-03}这是测试页面{/timeline-item}
		     </div></hao-timeline>
HTML

可在页面加入类似友情链接列表效果,可以当做导航栏用

复选列表 checkbox

<hao-checkbox class ='样式' colour='颜色' status='选中状态'>内容</hao-checkbox>
HTML
  1. 样式(class): plus, minus, times
  2. 颜色(colour): red, yellow, green, cyan, blue, gray
  3. 选中状态(status): checked

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色 + 默认选中

黄色 + 默认选中

青色 + 默认选中

蓝色 + 默认选中

增加

减少

<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>
HTML

折叠框 folding

<hao-folding title="标题" color="颜色" type="状态">
		    <div class="_tpl">
		        内容
		    </div></hao-folding>
HTML
参数含义
title标题
color颜色:blue, cyan, green, yellow, red
type状态填写 open 代表默认打开。
查看图片测试

Halo-Theme-TimePlus

查看默认打开的折叠框

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

查看代码测试
![4cacd3fee178fc75b9d5bf0915d1609.webp](/upload/4cacd3fee178fc75b9d5bf0915d1609.webp)
		
HTML
查看列表测试
内容
查看嵌套测试
查看嵌套测试2
查看嵌套测试3
哈哈哈
<hao-folding title="查看图片测试">
		    <div class="_tpl">
		![Halo-Theme-Hao](https://api.minio.uptoz.cn/blog/images/NsUInjCbZN.webp)
		    </div></hao-folding>
HTML
<hao-folding title="查看默认打开的折叠框" color="blue" type="open">
		    <div class="_tpl">
		        <p>这是一个默认打开的折叠框。</p>
		    </div></hao-folding>
HTML
<hao-folding title="查看代码测试" color="green" >
		    <div class="_tpl">
		
		    ```html
		![Halo-Theme-Hao](https://api.minio.uptoz.cn/blog/images/NsUInjCbZN.webp)
		    ```
		    </div></hao-folding>
HTML
<hao-folding title="查看列表测试" color="yellow">
		    <div class="_tpl">
		        内容
		    </div></hao-folding>
HTML
<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>
HTML

tag-hide

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

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

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

门里站着一个人?

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

卡片式外链标签引入

  • 携带跳转链接的卡片

必填项linkimgtip

<hao-introduction-card
		    link="链接"
		    img="图片"
		    tip="标签"
		    cardTitle= "卡片标题"
		    logo ="logo"
		    title="标题"
		    subTitle="副标题" ></hao-introduction-card>
HTML
  • 不携带跳转链接的卡片

不填写logo title subTitle

<hao-introduction-card
		    link="链接"
		    img="图片"
		    tip="标签"
		    cardTitle= "卡片标题"></hao-introduction-card>
HTML
参数含义
link链接
img图片
tip标签
cardTitle卡片标题
logologo
title标题
subTitle副标题

  • 携带跳转链接的卡片
新品主题
Hao主题
introduction
introduction
Halo-Theme-Hao
小小笔记大大用处
  • 不携带跳转链接的卡片

新品主题
Hao主题
introduction

  • 携带跳转链接的卡片
<hao-introduction-card
		    link="https://blog.uptoz.cn"
		    img="https://api.minio.uptoz.cn/blog/images/NsUInjCbZN.webp"
		    tip="新品主题"
		    cardTitle= "Hao主题"
		    logo ="https://api.minio.uptoz.cn/blog/images/NsUInjCbZN.webp"
		    title="Halo-Theme-hao"
		    subTitle="小小笔记大大用处" ></hao-introduction-card>
HTML
  • 不携带跳转链接的卡片
<hao-introduction-card
		    link="https://blog.uptoz.cn"
		    img="https://api.minio.uptoz.cn/blog/images/NsUInjCbZN.webp"
		    tip="新品主题"
		    cardTitle= "Hao主题"></hao-introduction-card>
HTML

上标标签 tip

<hao-tip class="样式" color="自定义图标">内容</hao-tip>
HTML
参数含义
class样式: success,error,warning,bolt,ban,home,sync,cogs,key,bell
noIcon自定义图标

default

info

success

error

warning

bolt

ban

home

sync

cogs

key

bell

自定义 font awesome 图标

<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>
HTML

Note (Bootstrap Callout)

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

方法一

参数含义
class【可选】标识,不同的标识有不同的配色 ( default / primary / success / info / warning / danger )
noIcon【可选】不显示 icon
style【可选】可以覆盖配置中的 style (simple/modern/flat/disabled)

方法二

参数含义
class【可选】标识,不同的标识有不同的配色 ( default / blue / pink / red / purple / orange / green )
noIcon【可选】可配置自定义 icon (支持内置的阿里图标,也可以配置 no-icon )
style【可选】可以覆盖配置中的 style (simple/modern/flat/disabled)

方法一

  • simple样式
默认 提示块标签
default 提示块标签
primary 提示块标签
success 提示块标签
info 提示块标签
warning 提示块标签
danger 提示块标签
  • modern样式
默认 提示块标签
default 提示块标签
primary 提示块标签
success 提示块标签
info 提示块标签
warning 提示块标签
danger 提示块标签
  • flat样式
默认 提示块标签
default 提示块标签
primary 提示块标签
success 提示块标签
info 提示块标签
warning 提示块标签
danger 提示块标签
  • disabled样式
默认 提示块标签
default 提示块标签
primary 提示块标签
success 提示块标签
info 提示块标签
warning 提示块标签
danger 提示块标签
  • no-icon样式
默认 提示块标签
default 提示块标签
primary 提示块标签
success 提示块标签
info 提示块标签
warning 提示块标签
danger 提示块标签

方法二

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

  • simple 样式
你是刷 Visa 还是 UnionPay
2023 年了….
小心开车 安全至上
这是三片呢?还是四片?
你是刷 Visa 还是 UnionPay
剪刀石头布
讨厌前端
  • modern 样式
你是刷 Visa 还是 UnionPay
2023 年了….
小心开车 安全至上
这是三片呢?还是四片?
你是刷 Visa 还是 UnionPay
剪刀石头布
讨厌前端
  • flat 样式
你是刷 Visa 还是 UnionPay
2023 年了….
小心开车 安全至上
这是三片呢?还是四片?
你是刷 Visa 还是 UnionPay
剪刀石头布
讨厌前端
  • disabled 样式
你是刷 Visa 还是 UnionPay
2023 年了….
小心开车 安全至上
这是三片呢?还是四片?
你是刷 Visa 还是 UnionPay
剪刀石头布
讨厌前端

方法一

  • simple样式
<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>
HTML
  • modern样式
<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>
HTML
  • flat样式
<hao-note  class="flat" content="">默认 提示块标签</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>
HTML
  • disabled样式
<hao-note  class="disabled" content="">默认 提示块标签</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>
HTML
  • no-icon样式
<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>
HTML

方法二

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

  • simple 样式
<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>
HTML
  • modern 样式
<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>
HTML
  • flat 样式
<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>
HTML
  • disabled 样式
<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>
HTML

视频播放

  • 视频
<hao-dplayer src="视频地址"></hao-dplayer>
HTML
  • Bilibili 视频
<hao-bilibili bvid="视频地址"></hao-bilibili>
HTML
  • 视频
参数含义
src视频地址
widthwidth默认为100%
heightheight默认为500
  • Bilibili 视频
参数含义
bvid其中bvid为必填
page页数
widthwidth默认为100%
heightheight默认为500

  • 视频
<hao-dplayer src="https://res.u-tools.cn/website/v4/utools-4-video.mp4"></hao-dplayer>
HTML
  • Bilibili 视频
<hao-bilibili bvid="BV1k94y1C7B2"></hao-bilibili>
HTML