Lian
文章目录 站点概览

Lian

make thing better and simpler.

95 文章
64 标签

Markdown进阶

发布于 2023-06-05 | 标签: markdown | 18分钟 | 4120字数

一. 前言

John Gruber在2004年创造了Markdown语言 在语法上有很大一部分是跟[亚伦- 斯沃茨](https://baike.baidu.com/item/亚伦- 斯沃茨/4027108?fromModule=lemma_inlink)( Aaron Swartz) 共同合作的. 这个语言的目的是希望大家使用" 易于阅读 易于撰写的纯文字格式 并选择性的转换成有效的XHTML( 或是HTML) " . 其中最重要的设计是可读性 也就是说这个语言应该要能直接在字面上的被阅读 而不用被一些格式化指令标记( 像是RTF与HTML) . 因此 它是现行电子邮件标记格式的惯例 虽然它也借鉴了很多早期的标记语言 如: Setext Texile reStructuredText.

从word繁琐的排版中解放出来.

对于标题, 常规列表, latex等内容就不在赘述了, 这些内容已经是非常常见易用的了.

二. 视频

下面以插入B站的视频为例.

<iframe src="//player.bilibili.com/player.html?aid=327623069&bvid=BV1JA411h7Gw&cid=171385214&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" height=480 width="100%"> </iframe>

使用的是iframe标签, 如果不了解iframe, 见底部的HTML标签介绍.

同样可以嵌入其他的页面内容.

<iframe src="https://image.baidu.com/" height=600 width="100%"></iframe>

可以在页面中嵌入其他的页面, 如baidu.com.

三. PDF

<embed>这个标签相对少见, 但是非常实用, 对于需要大量引用外部文档时(或者是引用本地的文档).

<embed> 标签定义了一个容器 用来嵌入外部应用或者互动程序( 插件) .

<embed id="pdfPlayer" src="https://knzhou.github.io/notes/ml.pdf" type="application/pdf" width="100%" height="600" >

四. 锚点链接

在提及锚点连接时, 需要提一下 [TOC], toc可以自动生成目录, 但使用的局限性非常大, 需要页面的支持, 如github就不支持生成目录.

* [写在前面](#1)
* [常用高阶语法](#2)
	* [表格的使用](#3)
	* [页内链接跳转](#4)
	* [本地文件链接](#5)
* [高效率软件推荐](#6)
* [参考资料](#7)

<p id="1">跳转-写在前面</p>
<p id="2">跳转-常用高阶语法</p>
<p id="3">跳转-表格的使用</p>
<p id="4">跳转-页内链接跳转</p>
<p id="5">跳转-本地文件链接</p>
<p id="6">跳转-软件推荐</p>
<p id="7">跳转-参考资料</p>

跳转-写在前面

跳转-常用高阶语法

跳转-表格的使用

跳转-页内链接跳转

跳转-本地文件链接

跳转-软件推荐

跳转-参考资料

五. 字体

这是高亮文本

<mark>高亮文本</mark>
# 默认为橙黄色, 修改为红色
<mark style="background-color:red">高亮文本</mark>

这是高亮文本

<span style="background-color: blue">实现背景填充为橙色</span>

实现背景填充为橙色

<font face="黑体" size="4px">我是黑体字</font>
<font face="微软雅黑" size="2px">我是微软雅黑</font>
<font face="STCAIYUN" size="3px">我是华文彩云</font>

我是黑体字
我是微软雅黑
我是华文彩云

六. 图片

6.1 格式调整

调整图片的大小, 位置.

<div align="center">
<img src="https://s1.ax1x.com/2023/05/03/p9JLZ8S.png" height="200" width="400"></img>
</div>

6.2 图片内链接

点击图片打开指定的链接, 如点击下面的图片打开baidu.com.

[![p9JLZ8S.png](https://s1.ax1x.com/2023/05/03/p9JLZ8S.png)](https://www.baidu.com/)
p9JLZ8S.png

6.3 直接生成图片

并不是所有的平台都支持, 在typora上可以正常显示图.

\`\`\`mermaid
graph LR
A[方形] -->B(圆角)
    B --> C{条件a}
    C -->|a=1| D[结果1]
    C -->|a=2| E[结果2]
    F[横向流程图]
\`\`\`

虽然很方便, 但是语法稍微不易记忆.

graph LR
A[方形] -->B(圆角)
    B --> C{条件a}
    C -->|a=1| D[结果1]
    C -->|a=2| E[结果2]
    F[横向流程图]

\`\`\`mermaid
%% 语法示例
        gantt
        dateFormat  YYYY-MM-DD
        title 软件开发甘特图
        section 设计
        需求                      :done,    des1, 2014-01-06,2014-01-08
        原型                      :active,  des2, 2014-01-09, 3d
        UI设计                     :         des3, after des2, 5d
    未来任务                     :         des4, after des3, 5d
        section 开发
        学习准备理解需求                      :crit, done, 2014-01-06,24h
        设计框架                             :crit, done, after des2, 2d
        开发                                 :crit, active, 3d
        未来任务                              :crit, 5d
        耍                                   :2d
        section 测试
        功能测试                              :active, a1, after des3, 3d
        压力测试                               :after a1  , 20h
        测试报告                               : 48h
\`\`\`

%% 语法示例
gantt
dateFormat YYYY-MM-DD
title 软件开发甘特图
section 设计
需求 :done, des1, 2014-01-06,2014-01-08
原型 :active, des2, 2014-01-09, 3d
UI设计 : des3, after des2, 5d
未来任务 : des4, after des3, 5d
section 开发
学习准备理解需求 :crit, done, 2014-01-06,24h
设计框架 :crit, done, after des2, 2d
开发 :crit, active, 3d
未来任务 :crit, 5d
耍 :2d
section 测试
功能测试 :active, a1, after des3, 3d
压力测试 :after a1 , 20h
测试报告 : 48h

七. html

适量使用, 避免本末倒置.

7.1 常用标签

需要使用好markdown, 对于html标签的理解必不可少, 以下是较为常用的标签.

标签作用示例
<u></u>下划线hello world
<b></b>黑体字hello world
<i></i>斜体字hello world
<tt></tt>打字机hello world
<em></em>强调hello world
<strong></strong>加重hello world
<font size="" color=""></font>字体hello world
<strike></strike>删除线 hello world
<sup></sup>上标helloworld
<sub></sub>下标helloworld
<h1></h1>标题

hello world

<p align=""></p>段落

hello world

<div></div>区块
hello world
<img></img>图片<src="" title="" alt="" align="" width="">
<table></table>表格
<br/>换行hello
world
<hr>水平线-----------
&ensp;空格hello world
&emsp;空格hello world
<p id="name"></p>被链接

hello world

<a href="#name"></a>超链接hello world

7.2 更多标签

标签 描述
基础  
<!DOCTYPE>  定义文档类型.
<html> 定义一个 HTML 文档
<title> 为文档定义一个标题
<body> 定义文档的主体
<h1> to <h6> 定义 HTML 标题
<p> 定义一个段落
<br> 定义简单的折行.
<hr> 定义水平线.
<!--...--> 定义一个注释
格式  
<acronym> HTML5不再支持. 定义只取首字母的缩写.
<abbr> 定义一个缩写.
<address> 定义文档作者或拥有者的联系信息.
<b> 定义粗体文本.
<bdi>New 允许您设置一段文本 使其脱离其父元素的文本方向设置.
<bdo> 定义文本的方向.
<big> HTML5不再支持. 定义大号文本.
<blockquote> 定义块引用.
<center> HTML5不再支持. HTML 4.01 已废弃. 定义居中文本.
<cite> 定义引用(citation).
<code> 定义计算机代码文本.
<del> 定义被删除文本.
<dfn> 定义定义项目.
<em> 定义强调文本.  
<font> HTML5不再支持. HTML 4.01 已废弃. 定义文本的字体 尺寸和颜色
<i> 定义斜体文本.
<ins> 定义被插入文本.
<kbd> 定义键盘文本.
<mark>New 定义带有记号的文本.
<meter>New 定义度量衡. 仅用于已知最大和最小值的度量.
<pre> 定义预格式文本
<progress>New 定义运行中的任务进度( 进程) .
<q> 定义短的引用.
<rp>New 定义不支持 ruby 元素的浏览器所显示的内容.
<rt>New 定义字符( 中文注音或字符) 的解释或发音.
<ruby>New 定义 ruby 注释( 中文注音或字符) .
<s> 定义加删除线的文本.
<samp> 定义计算机代码样本.
<small> 定义小号文本.
<strike> HTML5不再支持. HTML 4.01 已废弃. 定义加删除线的文本.
<strong> 定义语气更为强烈的强调文本.
<sub> 定义下标文本.
<sup> 定义上标文本.
<time>New 定义一个日期/时间
<tt> HTML5不再支持. 定义打字机文本.
<u> 定义下划线文本.
<var> 定义文本的变量部分.
<wbr>New 规定在文本中的何处适合添加换行符.
表单  
<form> 定义一个 HTML 表单 用于用户输入.
<input> 定义一个输入控件
<textarea> 定义多行的文本输入控件.
<button> 定义按钮.
<select> 定义选择列表( 下拉列表) .
<optgroup> 定义选择列表中相关选项的组合.
<option> 定义选择列表中的选项.
<label> 定义 input 元素的标注.
<fieldset> 定义围绕表单中元素的边框.
<legend> 定义 fieldset 元素的标题.
<datalist>New 规定了 input 元素可能的选项列表.
<keygen>New 规定用于表单的密钥对生成器字段.
<output>New 定义一个计算的结果
框架  
<frame> HTML5不再支持. 定义框架集的窗口或框架.
<frameset> HTML5不再支持. 定义框架集.
<noframes> HTML5不再支持. 定义针对不支持框架的用户的替代内容.
<iframe> 定义内联框架.
图像  
<img> 定义图像.
<map> 定义图像映射.
<area> 定义图像地图内部的区域.
<canvas>New 通过脚本( 通常是 JavaScript) 来绘制图形( 比如图表和其他图像) .
<figcaption>New 定义一个 caption for a <figure> element
<figure>New figure 标签用于对元素进行组合.
Audio/Video  
<audio>New 定义声音 比如音乐或其他音频流.
<source>New 定义media元素 (<video> 和 <audio>)的媒体资源. media
<track>New 为媒体(<video> 和 <audio>)元素定义外部文本轨道.
<video>New 定义一个音频或者视频
链接  
<a> 定义一个链接
<link> 定义文档与外部资源的关系.
<main> 定义文档的主体部分.
<nav>New 定义导航链接
列表  
<ul> 定义一个无序列表
<ol> 定义一个有序列表
<li> 定义一个列表项
<dir> HTML5不再支持. HTML 4.01 已废弃. 定义目录列表.
<dl> 定义一个定义列表
<dt> 定义一个定义定义列表中的项目.
<dd> 定义定义列表中项目的描述.
<menu> 定义菜单列表.
<command>New 定义用户可能调用的命令( 比如单选按钮 复选框或按钮) .
表格  
<table> 定义一个表格
<caption> 定义表格标题.
<th> 定义表格中的表头单元格.
<tr> 定义表格中的行.
<td> 定义表格中的单元.
<thead> 定义表格中的表头内容.
<tbody> 定义表格中的主体内容.
<tfoot> 定义表格中的表注内容( 脚注) .
<col> 定义表格中一个或多个列的属性值.
<colgroup> 定义表格中供格式化的列组.
样式/节  
<style> 定义文档的样式信息.
<div> 定义文档中的节.
<span> 定义文档中的节.
<header>New 定义一个文档头部部分
<footer>New 定义一个文档底部
<section>New 定义了文档的某个区域
<article>New 定义一个文章内容
<aside>New 定义其所处内容之外的内容.
<details>New 定义了用户可见的或者隐藏的需求的补充细节.
<dialog>New 定义一个对话框或者窗口
<summary>New 定义一个可见的标题. 当用户点击标题时会显示出详细信息.
元信息  
<head> 定义关于文档的信息
<meta> 定义关于 HTML 文档的元信息.
<base> 定义页面中所有链接的默认地址或默认目标.
<basefont> HTML5不再支持. HTML 4.01 已废弃. 定义页面中文本的默认字体 颜色或尺寸.
程序  
<script> 定义客户端脚本.
<noscript> 定义针对不支持客户端脚本的用户的替代内容.
<applet> HTML5不再支持. HTML 4.01 已废弃. 定义嵌入的 applet.
<embed>New 定义了一个容器 用来嵌入外部应用或者互动程序( 插件) .
<object> 定义嵌入的对象.
<param> 定义对象的参数.

7.3 特殊符号

符号

说明

编码

 

符号

说明

编码

 

符号

说明

编码

"

双引号

&quot;

×

乘号

&times;

←

向左箭头

&larr;

&

AND符号

&amp;

÷

除号

&divide;

↑

向上箭头

&uarr;

< 

小于符号

&lt;

±

正负符号

&plusmn;

→

向右箭头

&rarr;

> 

大于符号

&gt;

ƒ

function符号

&fnof;

↓

向下箭头

&darr;

 

空格

&nbsp;

√

根号

&radic;

↑

双向箭头

&harr;

?

倒问号

&iquest;

∞

无限大符号

&infin;

⇐

双线向左箭头

&lArr;

?

双左箭头

&laquo;

∠

角度符号

&ang;

⇑

双线向上箭头

&uArr;

?

双右箭头

&raquo;

∫

微积分符号

&int;

⇒

双线向右箭头

&rArr;

‘

左单引号

&lsquo;

°

度数符号

&deg;

⇓

双线向下箭头

&dArr;

’

右单引号

&rsquo;

≠

不等于符号

&ne;

⇔

双线双向箭头

&hArr;

"

左双引号

&ldquo;

≡

相等符号

&equiv;

♠

黑桃符号

&spades;

"

右双引号

&rdquo;

≤

小于等于符号

&le;

♣

梅花符号

&clubs;

段落符号

&para;

≥

大于等于符号

&ge;

♥

红心符号

&hearts;

§

章节符号

&sect;

⊥

垂直符号

&perp;

♦

方块符号

&diams;

©

版权所有符号

&copy;

 ½

二分之一符号

&frac12;

α

Alpha符号

&alpha;

®

注册商标符号

&reg;

¼

四分之一符号

&frac14;

β

Bata符号

&beta;

™

商标符号

&trade;

¾

四分之三符号

&frac34;

γ

Gamma符号

&gamma;

€

欧元符号

&euro;

‰

百分符号

&permil;

Δ

Delta符号

&Delta;

￠

美分符号

&cent;

∴

所以符号

&there4;

θ

Theta符号

&theta;

￡

英镑符号

&pound;

π

圆周率符号

&pi;

λ

Lambda符号

&lambda;

￥

日圆符号

&yen;

1

批注1符号

&sup1;

Σ

Sigma符号

&Sigma;

…

...

&hellip;

2

批注2符号 平方

&sup2;

τ

Tau符号

&tau;

⊕

 

&oplus;


八. 杂项

8.1 待办事项

- [x] abc
- [ ] abcd
- [ ] abcde

8.2 折叠

<details> <summary>Title</summary>
contents ...
</details>
Title contents ...

8.3 分割线

---

8.4 注脚

使用 Markdown[^1] 可以效率的书写文档 直接转换成 HTML[^2], 你可以使用 Typora[^T] 软件.

[^1]:Markdown 是一种纯文本标记语言.
[^2]:HyperText Markup Language 超文本标记语言.
[^T]:Typora 官网 <https://typora.io/>

使用 Markdown[1] 可以效率的书写文档 直接转换成 HTML[2], 你可以使用 Typora[3] 软件.

8.5 线

<span style="border-bottom: 1px solid red;">单下划线</span>

<span style="border-bottom: thick double #32a1ce;">双下划线</span>

<span style="border-bottom: 2px dotted red;">下划虚线</span>

~~世界是平坦的。~~ 我们现在知道世界是圆的。

单下划线

双下划线

下划虚线

世界是平坦的。 我们现在知道世界是圆的。

九. 参考

  1. Markdown 是一种纯文本标记语言. ↩︎

  2. HyperText Markup Language 超文本标记语言. ↩︎

  3. Typora 官网 https://typora.io/ ↩︎

# markdown
Markdown文档嵌入base64图片 上一篇
VBA-字符串处理-语言层级bug 下一篇
已运行:
浏览数: 次 | 访客数: 人
Powered by Kyouichirou