Loading... # 常用速览 1. 标题: ``` # ## ### #### ##### ###### (依次为一至六级标题) ``` 2. 格式: ``` *斜体* **加粗** ***加粗加斜*** ``` 3. 分隔线: ``` --- ``` 4. 删除线: ``` ~~删除线~~ ``` 5. 关键字: ``` `文字` ``` * 如:`被强调的文字` 6. 列表: * 无序列表:- + 或 \*(`符号后面要添加一个空格`) * 有序列表使用数字并加上 . 号(点号)来表示 7. 区块引用 * 区块引用是在段落开头使用 > 符号 ,然后后面紧跟一个空格符号。 8. 代码 * 代码片段:如果是段落上的一个函数或片段的代码可以用反引号把它包起来(\`); * 代码区块:代码区块使用 4 个空格或者一个制表符(Tab 键)。也可以用 ``` 包裹一段代码。 9. 链接 * 链接使用方法:[链接名称](链接地址) 或者 <链接地址> 10. 转义 * 使用反斜杠转义特殊字符,支持的符号 \\ \` \* \_ { } [ ] ( ) # + - . ! 11. 各种标签 * 进度条,低百分比进度条,根据情境变化效果,条纹效果,堆叠效果,可用的变体以及警告框 12. 外链卡片调用 * 例如在文章中调用其他文章 13. 时间线 * 例如在文章中插入一条时间线 14. 计划表 * 可自由定制属于自己的计划表 --- # 标题 使用 = 和 - 标记一级和二级标题 = 和 - 标记语法格式如下: ```txt 一级标题 ================= 二级标题 ----------------- ``` Txt * 复制* 使用 # 号标记 使用 # 号可表示 1-6 级标题,一级标题对应一个 # 号,二级标题对应两个 # 号,以此类推。 ```txt # 一级标题 ## 二级标题 ### 三级标题 #### 四级标题 ##### 五级标题 ###### 六级标题 ``` Txt * 复制* # 段落与格式 ### 段落: Markdown 段落没有特殊的格式,直接编写文字就好,段落的换行是使用两个以上空格加上回车。 ### 字体: ```txt *斜体文本* _斜体文本_ **粗体文本** __粗体文本__ ***粗斜体文本*** ___粗斜体文本___ ``` Txt * 复制* 显示效果: *斜体文本* *斜体文本* **粗体文本** **粗体文本** ***粗斜体文本*** ***粗斜体文本*** ### 分隔线: 你可以在一行中用三个以上的星号、减号、底线来建立一个分隔线,行内不能有其他东西。你也可以在星号或是减号中间插入空格。下面每种写法都可以建立分隔线: ```txt *** * * * ***** - - - ---------- ``` Txt * 复制* 显示效果: --- ### 删除线: 如果段落上的文字要添加删除线,只需要在文字的两端加上两个波浪线 \~\~ 即可,实例如下: ```txt ~~文字上有删除线~~ ``` Txt * 复制* 显示效果: ~文字上有删除线~ ### 关键字: 关键字的使用:在文本的两端分别加上英文的 (\`) 这个符号。即键盘上Tab键的上面那一个键。注意是英文的情况下。例: ```txt `xxx`、`yyy` ``` Txt * 复制* 显示效果: `xxx`、`yyy` # 列表 Markdown 支持有序列表和无序列表。 ### 无序列表 无序列表使用星号(\*)、加号(+)或是减号(-)作为列表标记,这些标记后面`要添加一个空格`,然后再填写内容: ```txt * 第一项 * 第二项 + 第一项 + 第二项 - 第一项 - 第二项 ``` Txt * 复制* 显示效果: * 第一项 * 第二项 ### 有序列表 有序列表使用数字并加上 . 号(点号)来表示,如: ```txt 1. 第一项 2. 第二项 3. 第三项 ``` Txt * 复制* 显示效果: 1. 第一项 2. 第二项 3. 第三项 ### 列表嵌套 列表嵌套只需在子列表中的选项前面添加`四个空格`即可: ```txt 1. 第一项: - 第一项嵌套的第一个元素 - 第一项嵌套的第二个元素 2. 第二项: - 第二项嵌套的第一个元素 - 第二项嵌套的第二个元素 ``` Txt * 复制* 显示效果: 1. 第一项: * 第一项嵌套的第一个元素 * 第一项嵌套的第二个元素 2. 第二项: * 第二项嵌套的第一个元素 * 第二项嵌套的第二个元素 # 区块引用 Markdown 区块引用是在段落开头使用 > 符号 ,然后后面紧跟一个空格符号: ```txt > 区块引用 > 内容文字 > Markdown的区块引用 ``` Txt * 复制* 显示效果: > 区块引用 > 内容文字 > Markdown的区块引用 另外区块是可以嵌套的,一个 > 符号是最外层,两个 > 符号是第一层嵌套,以此类推: ```txt > 最外层 > > 第一层嵌套 > > > 第二层嵌套 ``` Txt * 复制* 显示效果: > 最外层 > > > 第一层嵌套 > > > > > 第二层嵌套 # 代码 代码片段:如果是段落上的一个函数或片段的代码可以用反引号把它包起来(\`),例如: ```txt `printf()` 函数 ``` Txt * 复制* 显示效果: `printf()` 函数 代码区块:代码区块使用 4 个空格或者一个制表符(Tab 键)。也可以用 ``` 包裹一段代码,并指定一种语言(也可以不指定),如: ```txt *```javascript //此处显示需要,使用请删除前面的*号 $(document).ready(function () { alert('5k5b.com'); }); *``` //此处显示需要,使用请删除前面的*号 ``` Txt * 复制* 显示效果: ```txt $(document).ready(function () { alert('5k5b.com'); }); ``` Txt * 复制* # 链接 链接使用方法如下: ```txt [链接名称](链接地址) 或者 <链接地址> 比如: 这是我的博客地址:[丛林小二](https://www.5k5b.com) 或者 <https://www.5k5b.com> ``` Txt * 复制* 显示效果: 这是我的博客地址:[TuJun’blog](https://www.5k5b.com/) 或者 [https://www.5k5b.com](https://www.5k5b.com/) # 图片 Markdown 图片语法格式如下: ```txt ![alt 属性文本](图片地址) ![alt 属性文本](图片地址 "可选title标题") 比如: ![表情图片](https://img01.sogoucdn.com/app/a/200692/72_72_feedback_737d7a723ad349219d3ad188175ba19a.png) ``` Txt * 复制* 显示效果:[![表情图片](https://img01.sogoucdn.com/app/a/200692/72_72_feedback_737d7a723ad349219d3ad188175ba19a.png "表情图片")](https://img01.sogoucdn.com/app/a/200692/72_72_feedback_737d7a723ad349219d3ad188175ba19a.png) 表情图片 # 表格 Markdown 制作表格使用 | 来分隔不同的单元格,使用 - 来分隔表头和其他行。 语法格式如下: ```txt | 表头 | 表头 | | ---- | ---- | | 单元格 | 单元格 | | 单元格 | 单元格 | ``` Txt * 复制* 显示效果: | 表头 | 表头 | | -------- | -------- | | 单元格 | 单元格 | | 单元格 | 单元格 | 我们可以设置表格的对齐方式: -: 设置内容和标题栏居右对齐。 :- 设置内容和标题栏居左对齐。 :-: 设置内容和标题栏居中对齐。 比如: ```txt | 占位-左对齐-占位 | 占位-居中对齐-占位 | 占位-右对齐-占位 | | :-----| :----: | ----: | | 单元格 | 单元格 | 单元格 | | 单元格 | 单元格 | 单元格 | ``` Txt * 复制* 显示效果: | 占位-左对齐-占位 | 占位-居中对齐-占位 | 占位-右对齐-占位 | | :----------------- | :------------------: | -----------------: | | 单元格 | 单元格 | 单元格 | | 单元格 | 单元格 | 单元格 | # 支持的 HTML 元素 不在 Markdown 涵盖范围之内的标签,都可以直接在文档里面用 HTML 撰写。 目前支持的 HTML 元素有:`<kbd> <b> <i> <em> <sup> <sub> <br>`等,如: ```txt 键盘使用 <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd> 重启电脑 ``` Txt * 复制* 显示效果: 键盘使用 Ctrl+Alt+Del 重启电脑 # 转义 Markdown 使用了很多特殊符号来表示特定的意义,如果需要显示特定的符号则需要使用转义字符,Markdown 使用反斜杠转义特殊字符: ```txt **文本加粗** \*\* 正常显示星号 \*\* ``` Txt * 复制* 显示效果: **文本加粗** \*\* 正常显示星号 \*\* Markdown 支持以下这些符号前面加上反斜杠来帮助插入普通的符号: ```txt \ 反斜线 ` 反引号 * 星号 _ 下划线 {} 花括号 [] 方括号 () 小括号 # 井字号 + 加号 - 减号 . 英文句点 ! 感叹号 ``` Txt * 复制* # 各种标签 ### 标签tag **默认白色文字** 紫色文字 蓝色文字 黄色文字 红色文字 绿色文字 黑色文字 代码: ```html [ tag]默认白色文字[/tag] [ tag type="primary"]紫色文字[/tag] [ tag type="info"]蓝色文字[/tag] [ tag type="warning"]黄色文字[/tag] [ tag type="danger"]红色文字[/tag] [ tag type="success"]绿色文字[/tag] [ tag type="dark"]黑色文字[/tag] ``` HTML * 复制* ### 进度条 带有提示标签的进度条 将设置了 `.sr-only` 类的 标签从进度条组件中移除 类,从而让当前进度显示出来 60% 代码: ```html <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> 60% </div> </div> ``` HTML * 复制* ### 低百分比进度条 在展示很低的百分比时,如果需要让文本提示能够清晰可见,可以为进度条设置 `min-width` 属性 0% 2% 代码: ```html <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;"> 0% </div> </div> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;"> 2% </div> </div> ``` HTML * 复制* ### 根据情境变化效果 进度条组件使用与按钮和警告框相同的类,根据不同情境展现相应的效果。 **40% Complete (success)** **20% Complete** **60% Complete (warning)** **80% Complete (danger)** 代码: ```html <div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"> <span class="sr-only">40% Complete (success)</span> </div> </div> <div class="progress"> <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"> <span class="sr-only">20% Complete</span> </div> </div> <div class="progress"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"> <span class="sr-only">60% Complete (warning)</span> </div> </div> <div class="progress"> <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"> <span class="sr-only">80% Complete (danger)</span> </div> </div> ``` HTML * 复制* ### 条纹效果 通过渐变可以为进度条创建条纹效果,`IE9` 及更低版本不支持。 **40% Complete (success)** **20% Complete** **60% Complete (warning)** **80% Complete (danger)** 代码: ```html <div class="progress"> <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"> <span class="sr-only">40% Complete (success)</span> </div> </div> <div class="progress"> <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"> <span class="sr-only">20% Complete</span> </div> </div> <div class="progress"> <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"> <span class="sr-only">60% Complete (warning)</span> </div> </div> <div class="progress"> <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"> <span class="sr-only">80% Complete (danger)</span> </div> </div> ``` HTML * 复制* ### 堆叠效果 把多个进度条放入同一个`.progress` 中,使它们呈现堆叠的效果。 **35% Complete (success)** **20% Complete (warning)** **10% Complete (danger)** 代码: ```html <div class="progress"> <div class="progress-bar progress-bar-success" style="width: 35%"> <span class="sr-only">35% Complete (success)</span> </div> <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%"> <span class="sr-only">20% Complete (warning)</span> </div> <div class="progress-bar progress-bar-danger" style="width: 10%"> <span class="sr-only">10% Complete (danger)</span> </div> </div> ``` HTML * 复制* ### 可用的变体 用下面的任何一个类即可改变标签的外观 **Default** Primary Success Info Warning Danger 代码: ```html <span class="label label-default">Default</span> <span class="label label-primary">Primary</span> <span class="label label-success">Success</span> <span class="label label-info">Info</span> <span class="label label-warning">Warning</span> <span class="label label-danger">Danger</span> ``` HTML * 复制* ### 警告框 警告框组件通过提供一些灵活的预定义消息,为常见的用户动作提供反馈消息。 ... ... ... ... 代码: ```html <div class="alert alert-success" role="alert">...</div> <div class="alert alert-info" role="alert">...</div> <div class="alert alert-warning" role="alert">...</div> <div class="alert alert-danger" role="alert">...</div> ``` HTML * 复制* # 外链卡片调用 * title:必填,外链的名称/标题 * url:必填,外链的地址(请填写绝对地址,就是浏览器地址栏什么样的就填什么样的) * intro:(可选)外链网站的简介/介绍 * cover:(选填)外链网站的介绍图片地址 [本博客之Typecho Handsome主题美化记录说明该站的所有修改项均在本文列出,实际效果看本站即可。若您也想拥有类似的效果,欢迎借鉴\~\~注意:以下代码...](https://www.5k5b.com/archives/5.html) 代码: ```html [ post url="https:\/\/www.ihewro.com" title="友人C" intro="一个个人博客" cover="https://**.png" / ] ``` HTML * 复制* # 时间线 2020大事记 2020-1-20 武汉封城,疫情让一起变得慌乱起来 2020-3-20 开始远程办公,慢慢有序起来 生活变得好起来了 2020-10-1 国庆节去哈尔滨旅行,和老同学见面 代码: ```html <div class="panel panel-default box-shadow-wrap-lg goal-panel"> <div class="panel-heading"> 2020大事记 </div> <div class="padder-md wrapper"> <div class="streamline b-l m-b"><div class="sl-item b- b-l"> <div class="m-l"> <div class="text-muted">2020-1-20</div> <p>武汉封城,疫情让一起变得慌乱起来</p> </div> </div><div class="sl-item b-info b-l"> <div class="m-l"> <div class="text-muted">2020-3-20</div> <p>开始远程办公,慢慢有序起来</p> </div> </div><div class="bg-light wrapper-sm m-l-n m-r-n m-b r r-2x">生活变得好起来了</div><div class="sl-item b-success b-l"> <div class="m-l"> <div class="text-muted">2020-10-1</div> <p>国庆节去哈尔滨旅行,和老同学见面</p> </div> </div></div></div></div> ``` HTML * 复制* # 计划表 计划表中包含了三种类型的任务: * check类型,该类型任务只有两种状态,完成和未完成 * progress,该类型任务可以显示任务执行的进度,需要手动填写进度 * start、end,该类型任务设置一个起始时间和终止时间,进度会根据当前时间自动更新进度 * 时间格式:必须是正确的时间格式,比如2021-01-02 12:00 ,也可以只写日期2021-01-02 2021的小目标 [X] 每天早睡 [ ] 每天早起 阅读10本书 : 50% 每天锻炼30分钟 : 443% 代码: ```html <div class="panel panel-default box-shadow-wrap-lg goal-panel"> <div class="panel-heading"> 2021的小目标 </div> <div class="list-group"> <div class="list-group-item"><div class="checkbox"> <label class="i-checks"> <input type="checkbox" checked="" disabled="" value=""> <i></i> 每天早睡 </label> </div><div class="checkbox"> <label class="i-checks"> <input type="checkbox" disabled="" value=""> <i></i> 每天早起 </label> </div> <p class="goal_name"> 阅读10本书 :</p> <div class="progress-striped active m-b-sm progress" value="dynamic" type="danger"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="97" aria-valuemin="0" aria-valuemax="100" style="width: 50%;"><span> 50% </span></div> </div> <p class="goal_name"> 每天锻炼30分钟 :</p> <div class="progress-striped active m-b-sm progress" value="dynamic" type="danger"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="97" aria-valuemin="0" aria-valuemax="100" style="width: 506%;"><span> 506% </span></div> </div></div></div></div> ``` HTML * 复制* 最后修改:2022 年 09 月 07 日 [提交百度](https://ziyuan.baidu.com/linksubmit/url?sitename=https://www.5k5b.com/archives/10.html "点击提交百度收录!") 最后修改:2024 年 04 月 19 日 © 允许规范转载 打赏 赞赏作者 支付宝微信 赞 如果觉得我的文章对你有用,请随意赞赏
5 条评论
想想你的文章写的特别好www.jiwenlaw.com
不错不错,我喜欢看 https://www.237fa.com/
怎么收藏这篇文章?
叼茂SEO.bfbikes.com
不错不错,我喜欢看