首页 教程与实践

文字内容

对齐方式

《随感录四十一》

愿中国青年都摆脱冷气，只是向上走，不必听自暴自弃者的说话。能做事的做事，能发声的发声。有一分热，发一分光，就令萤火一般；也可以在黑暗里发一点光，不必等候炬火。

————鲁迅

一九一八年

文字对齐方式
1
2
3
4
<center>可以标题居中</center>
<br>
<p align="left">左对齐</p>
<p align="right">右对齐</p>

内容超链接

术以知奸，以刑止刑，以战止战，天地之法执行不怠，即便没有国家的依存。——源自

文字默认色加框
1
2
`突出文字内容`
[源自](https://link.com/)

分割线

  1. 带颜色的分割线
cl
1
<hr style="border: none; height: 2px; background: green;">
  1. 带三叶草的分割线
🍀
vl
1
2
3
4
5
<div style="display: flex; align-items: center; text-align: center; margin: 20px 0;">
    <div style="flex: 1; height: 2px; background: #58b716;"></div>
    <div style="font-size: 20px; margin: 0 10px;">&#127808;</div> <!-- 三叶草 -->
    <div style="flex: 1; height: 2px; background: #58b716;"></div>
</div>
  1. 带图形的渐变色分割线
❤
✿
★
♣ ♠
个别图形示例
1
2
3
4
5
6
7
8
9
<div style="display: flex; align-items: center; text-align: center; margin: 20px 0;">
    <div style="flex: 1; height: 2px; background: linear-gradient(to right, red, #58b716);"></div>
    <div style="margin: 0 10px;">&#10084;</div> <!-- 心形 -->
    <div style="margin: 0 10px; color: pink;">&#10047;</div> <!-- 花 -->
    <div style="margin: 0 10px; color: blue;">&#9733;</div> <!-- 五角星 -->
    <span style="margin: 0 10px; color: red;">&#9827;</span> <!-- 梅花 -->
    <span style="margin: 0 10px; color: green;">&#9824;</span> <!-- 黑桃 -->
    <div style="flex: 1; height: 2px; background: linear-gradient(to right, #58b716, red);"></div>
</div>
  1. 带熊头的分割线
🐻
🐻
🐻
🐻
cl
1
2
3
4
5
6
7
<div style="display: flex; align-items: center; text-align: center; margin: 20px 0;">
    <div style="flex: 1; height: 2px; background: #58b716;"></div>
    <div style="margin: 0 10px;">&#128059;</div> <!-- 熊头 -->
    <div style="flex: 1; height: 2px; background: #58b716;"></div>
    <div style="margin: 0 10px;">&#128059;</div> <!-- 熊头 -->
    <div style="flex: 1; height: 2px; background: #58b716;"></div>
</div>
  1. 由图形组成的分割线
🍀
🍀
🍀
🍀
🍀
🍀
🍀
🍀
cl
1
2
3
4
5
<div style="display: flex; flex-wrap: wrap; justify-content: space-between; margin: 20px 0; width: 100%;">
    <div style="margin: 0 10px;">&#127808;</div> <!-- 三叶草 -->
    <div style="margin: 0 10px;">&#127808;</div> <!-- 三叶草 -->
    <div style="margin: 0 10px;">&#127808;</div> <!-- 三叶草 -->
</div>

文字划线标点

“战争无非是政治通过另一种手段的继续”，++战争是完成政治目的的手段，政治的利益是战争所追求的目标，所以战争行为的决策标准是权衡利益。++

dl
1
++下划线++

“消灭敌人军队”是战争的最高军事目标、++战争中惟一有效的军事手段是“战斗”。++{.primary}

dl
1
++紫色下划线++{.primary}

++“在战争中当事者遵循这种理论上的真理时，只应是深刻地领会这些真理的精神，而不应把它们看做外在的、僵硬的法则”。++{.wavy}

dl
1
++波浪线++{.wavy}

++社会生产关系指人们在物质资料生产和再生产过程中结成的相互关系,即经济关系。++{.dot}

dl
1
++文字下标重点++{.dot}

不变资本: ++以生产资料的形式存在,这部分在生产过程中只是转移自己的价值,并不发生价值量的变化,所以叫做不变资本。++{.dot .warning}

cl
1
++文字下标黄色着重点++{.dot .warning}

完成第一篇文章的撰写

cl
1
~~删除线~~

匆匆走过的第一个十年{.danger}

cl
1
~~红色删除线~~{.danger}

文字颜色

  1. 例子：

“[暴力]{.rainbow}”[是战争的“手段”]{.aqua}；
“[把自己的意志强加于敌人]{.red}”[是战争的(政治)“目的”]{.blue}最终目标；
“[使敌人无力抵抗]{.orange}”或者“[打垮敌人]{.purple}”[是战争的最高(军事)“目标”]{.yellow}。

经济增长与经济发展的联系与区别：

(1)经济增长是指[一个国家或地区在一定时期内产出量的增加]{.pink}。经济发展[不仅包括产出量的增加，而且包括经济结构的变化]{.green}以及==一般经济条件、社会福利、教育卫生、生态环境等情况的改善或变化等的全面进步过程==。

(2)经济增长和经济发展既有联系，又有区别，体现在：[①经济发展包含着经济增长；②经济增长是经济发展的基础；③经济发展是经济增长的结果，同时又成为经济进一步增长的条件]{.grey}。

  1. 颜色

==荧光高亮== 、 [变色]{.rainbow} rainbow、 [红色]{.red} red、 [粉色]{.pink} pink、 [橙色]{.orange} orange、 [黄色]{.yellow} yellow、 [绿色]{.green} green、 [靛青]{.aqua} aqua、 [蓝色]{.blue} blue、 [紫色]{.purple} purple、 [灰色]{.grey} grey

海蓝 70DB93 蓝紫色 9F5F9F 士官服蓝 5F9F9F 冷铜 D98719 珊瑚红 FF7F00 深兰花 9932CD 深绿松石 7093DB 森林绿 238E23 金色 CD7F32 石灰绿 32CD32 桔黄色 E47833 中海蓝 32CD99 中蓝色 3232CD 中石板蓝 7F00FF 中紫红 DB7093 霓虹蓝 4D4DFF 霓虹粉红 FF6EC7 橙色 FF7F00 橙红色 FF2400 淡紫色 DB70DB 天蓝 3299CC 石板蓝 007FFF 艳粉红 FF1CAE 亮天蓝色 38B0DE 紫罗兰红色 CC3299

cl
1
2
==荧光高亮==
[变色]{.rainbow}
s
1
<font color=#70DB93>海蓝</font>

脚注

脚注类似于引用样式的链接。脚注用于完成两件事：标志的文本会变成上标符号；脚注定义将被放置在一个文档末尾的列表。一个脚注看起来是这样的：
这是包含脚注的文本。 ^1

文字特殊符号

复制快捷键 [Ctrl]{.kbd} + [C]{.kbd .red}

{可愛^ke・ai} 29^th^ 500^2^ 500M3 H2O ⅓ 18ºC

以下可直接复制支持
☀️☺️️✋✌️⚠️☢️☣️⬆️✡️☸️☯️#️⃣*️⃣0️⃣1️⃣2️⃣3️⃣4️⃣5️⃣6️⃣7️⃣8️⃣9️⃣

特殊字符
1
2
3
4
5
6
复制快捷键 [Ctrl]{.kbd} + [C]{.kbd .red}
{可愛^ke・ai}
29^th^
H<sub>2</sub>O
&frac13;
18&ordm;C

标签块

[文化]{.label} [教育]{.label .primary} [经济]{.label .info} [:heavy_check_mark:军事]{.label .success} [艺术]{.label .warning} [:broken_heart:工业]{.label .danger}

标签块
1
2
3
4
5
6
[文化]{.label} 
[教育]{.label .primary} 
[经济]{.label .info}
[艺术]{.label .warning} 
[:heavy_check_mark:军事]{.label .success} 
[:broken_heart:工业]{.label .danger}

标签卡

;;;id1 军事领域
军事领域主要涉及国家为维护主权、安全和发展利益所采取的军事行动和战略部署。军事科技是应用于军事领域的现代高新科学技术，具有对抗性强、创新性强、风险性高的特点‌1。军事科学则研究战争本质和规律，并用于指导战争的准备与实践。现代国防是国家综合国力的体现，涉及军事对抗、政治斗争等多个方面‌
[:heavy_check_mark:军事]{.label .success}
;;;

;;;id1 经济领域‌
经济领域主要关注国家的经济发展战略、产业结构、贸易政策和经济增长等方面。中国的经济发展取得了举世瞩目的成就，从第一个五年计划到成为世界第二大经济体，中国经济经历了快速增长的阶段，并且在全球化进程中发挥了重要作用‌4。经济领域的成就不仅提高了人民的生活水平，也增强了国家的综合国力
[经济]{.label .info}
;;;

标签卡
1
2
3
4
5
6
7
;;;id1 标签一
 内容
;;;

;;;id1 标签二
内容
;;;

列表待办事项

  • 这是错误的，失败的，未完成的
  • 这是正确的

{.danger}

  • 成功的

{.primary}

  • 已完成的
列表待办
1
2
3
4
5
- [x] 这是正确的
{.danger}
- [x] 成功的
{.primary}
- [x] 已完成的

默认表格

序号 姓名 年份
1 张三 1993
2 李斯 1997
3 赵洁 2003

带颜色的表格

姓名 年龄 城市
小明 25 北京
小红 30 上海
小刚 28 广州

其它

Md隐藏的内容注释

mardown内容注释
1
2
3
4
5
6
<!-- 注释 --> 
<!-- 
多行注释
一行
二行
 -->

隐藏文字内容效果

!!鼠标滑过!! : 鼠标滑过显示内容
!!模糊模糊!! {.bulr} : 选中文字显示内容

隐藏文字效果
1
2
!!鼠标滑过!! : 鼠标滑过显示内容
!!模糊模糊!! {.bulr} : 选中文字显示内容

折叠块

+++ 默认颜色
内容
+++
+++primary 紫色
:::info
参考信息
:::

  • 第一行
    +++
    +++info 蓝色
    ;;;id3 卡片 1
    这里是卡片 1 的内容
    ;;;
    ;;;id3 卡片 2
    这里是卡片 2 的内容
    ;;;
    +++
    +++success 绿色
    资料
    +++
    +++warning 黄色
    !!警告!!{.bulr}
    [label]{.label .success}
    +++
    +++danger 红色
    [danger]{.label .danger}
    +++
折叠块
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
+++ 默认颜色
内容
+++
+++primary 紫色
资料
+++
+++info  蓝色
内容
+++
+++success 绿色
资料
+++
+++warning 黄色
档案
+++
+++danger 红色
重点
+++

提醒及引用块

:::default
默认
:::
:::primary
基本
:::
:::info
提示
:::
:::success
成功
:::
:::warning
警告
:::
:::danger
危险
:::
:::danger no-icon
安全
:::

这是引用

提醒块
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
:::default
默认
:::
:::primary
基本
:::
:::info
提示
:::
:::success
成功
:::
:::warning
警告
:::
:::danger
危险
:::
:::danger no-icon
安全
:::
> 这是引用

代码框

安装命令参考链接
1
2
java 安装命令 https://google.com 参考链接
import java.util.scanner
安装命令
1
2
bash 安装命令
henigh unclock
代码区块：cd hugo

图片

图片名称
下面👇这张图片，width80%宽度

嵌入图片
1
2
![图片名称](https:/link.png)
<img style="width:80%;" src="https:/link.jpg">

视频

视频链接
1
2
<iframe id="video" src="//player.bilibili.com/player.html?isOutside=true&aid=332144071&bvid=BV1NA411N7d9&cid=310939188&p=1" width="100%" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
<script type="text/javascript">document.getElementById("video").style.height=document.getElementById("video").scrollWidth*0.8+"px"</script>
更新于 阅读次数 次