标签:本地图片 表格 依赖 表头 html back 排列 base http
许多开发人员喜欢使用Markdown来记录学习心得和写博客,虽然它是一门轻量级标记语言,但是它的使用非常简单,本篇博客主要介绍Markdown的基础教程。
目录:
markdown标题的两种格式
使用 = 和 - 标记一级和二级标题
格式样式:
一级标题
=======
展示效果:
格式样式:
二级标题
-----------
展示效果:
使用#标记
使用 # 号可表示 1-6 级标题,一级标题对应一个 # 号,二级标题对应两个 # 号,以此类推,依次对应着html中的h1、h2、h3、h4、h5、h6
格式样式:
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题
展示效果:
字体
字体颜色可以通过内嵌HTML的方式来实现
字体:
<font face="楷体">这是楷体字</font>
<font face="STCAIYUN">这是华文彩云</font>
展示效果:
这是楷体字
这是是华文彩云
字号
字号大小:
<font size="3">3号字体</font>
<font size="6">6号字体</font>
展示效果:
3号字体
6号字体
字体颜色
字体颜色:
<font size=5 color="pink">粉色</font>
<font color=#7CFC00 size=7 face="STCAIYUN"></font>
//加不加引号"都可以
展示效果:
粉色
LawnGreen
字体格式
*斜体文本*
_斜体文本_
**粗体文本**
__粗体文本__
***粗斜体文本***
___粗斜体文本___
展示效果:
斜体文本
斜体文本
粗体文本
粗体文本
粗体+斜体
粗体+斜体
文本对齐方式
markdown文本的方式通过内嵌html代码来实现
文本左对齐:
<p align="left">左对齐</p>
文本右对齐:
<p align="right">右对齐</p>
文本居中对齐:
<center>居中对齐</center> or
<p align="center">右对齐</p>
文本左对齐:
文本左对齐 |
文本右对齐:
文本右对齐 |
文本居中对齐:
文本居中对齐 |
背景颜色
由于 style 标签和标签的 style 属性不被支持,所以这里只能是借助 table, tr, td 等表格标签的 bgcolor 属性来实现背景色。故这里对于文字背景色的设置,只是将那一整行看作一个表格,更改了那个格子的背景色(bgcolor)
背景颜色:
<table><tr><td bgcolor=gray>背景色:gray</td></tr></table>
<table><tr><td bgcolor=#D1EEEE>背景色:#D1EEEE</td></tr></table>
展示效果:
背景色:gray |
背景色的设置是按照十六进制颜色值 |
分割线
你可以在一行中用三个以上的星号、减号、底线或者内嵌html来建立一个分隔线,行内不能有其他东西。下面每种写法都可以建立分隔线:
***
*****
---
-----
___
_____
<hr/>
展示效果:
删除线
如果段落上的文字要添加删除线,只需要在文字的两端加上两个波浪线 ~~ 即可
~~带删除线文本~~
展示效果:带删除线文本
下划线
下划线可以通过 HTML 的 **** 标签来实现
<u>带下划线文本</u>
展示效果:带下划线文本
脚注
脚注是对文本的补充说明,格式如下:
格式:
[^要注明的文本]
[^要注明的文本]:补充说明
例子:
Markdown [^markdown]
[^markdown]: 轻量级标记语言
注意第一个[前面有一个空格
展示效果:
Markdown 1
Markdown列表
Markdown支持有序列表和无序列表。无序列表使用星号(*****)、加号(+)或是减号(-)作为列表标记
无序序列:
* 第一列
* 第二列
+ 第一列
+ 第二列
- 第一列
- 第二列
展示效果:
第一列
第二列
有序列表使用数字并加上 . 号来表示,注意 . 后面有一个空格
有序序列:
1. 第一列
2. 第二列
3. 第三列
展示效果:
Markdown列表嵌套
列表嵌套只需在子列表中的选项添加四个空格或一个tab键即可
1. 第一级
* 第二级
* 第三级
展示效果:
Markdown区块
Markdown 区块引用是在段落开头使用 > 符号 ,然后后面紧跟一个空格符号;同时区块是可以嵌套的,一个> 符号是最外层,两个> 符号是第一层的嵌套,以此类推
> 同一个世界,同一个梦想!
> 第一次层
>> 第二层
>>> 第三层
展示效果:
同一个世界,同一个梦想!
第一层
第二层
第三层
区块中使用列表
> 区块
> 1. 有序列表
> * 无序列表
> * 无序列表
展示效果:
区块
- 有序列表
- 无序列表
- 无序列表
列表中使用区块
列表项目内放进区块,那么就需要在 > 前添加四个空格的缩进或者一个tab
* 地球
> 美国
> 中国
>> 河南
* 水星
展示效果:
地球
美国
中国河南
水星
Markdown链接
链接使用方法:
[链接名称](链接地址)
[博客主页](https://www.cnblogs.com/asio)
<链接地址>
博主博客:<https://www.cnblogs.com/asio>
<a target="_blank" href="链接地址">链接名称</a>
<a target="_blank" href="https://www.cnblogs.com/asio" title="https://www.cnblogs.com/asio">博主博客</a>
tip:加target="_blank"为新窗口打开,不加为当前页面打开;title为悬停提示
展示效果:
博主博客:https://www.cnblogs.com/asio
使用标量带替链接,适合大量重复添加某一链接时使用
https://www.cnblogs.com/asio使用变量代替链接
博主博客链接用 asio 作为网址变量 [君纤][asio]
然后在文档的结尾为变量赋值(网址)
[asio]: https://www.cnblogs.com/asio "title属性,链接描述"
展示效果:
博主博客链接用 asio 作为网址变量 君纤
Markdown链接锚点定位
添加链接: 通过添加标签 < a>标题一< /a>
添加锚点: 在需要跳转到的标题位置添加链接
< a name="锚点名称">标题一< /a>
修改1中的标签< a href="#要跳转到的锚点名称">标题一< /a>
索引:
<a href="#a">第一段</a>
<a href="#b">第二段</a>
<a href="#c">第三段</a>
<hr/>
正文内容:
<a name="a" id="a">第一段</a>
<div style="background:#ACD6FF;padding-left:20px;">
这<br/>里<br/>是<br/>第<br/>一<br/>段<br/>的<br/>内<br/>容<br/>
</div>
<a name="b" id="b">第二段</a>
<div style="background:#FFF4C1;padding-left:20px;">
这<br/>里<br/>是<br/>第<br/>二<br/>段<br/>的<br/>内<br/>容<br/>
</div>
<a name="c" id="c">第三段</a>
<div style="background:#EBD3E8;padding-left:20px;">
这<br/>里<br/>是<br/>第<br/>三<br/>段<br/>的<br/>内<br/>容<br/>
</div>
展示效果:
索引:
正文内容:
Markdown代码
如果是段落上的一个函数或片段的代码可以用反引号把它包起来 `
`print("Hello world!");`
如果是一段代码用```//todo....```包裹,并指定语言(也可以不指定)
?```
int temp;
if(a>b){
temp = a;
a = b;
b = temp;
}
print(a);
?```
展示效果:
print("Hello world!");
int temp;
if(a>b){
temp = a;
a = b;
b = temp;
}
print(a);
Markdown插入图片
Markdown插入图片的方式有三种
插入本地图片
只需要在基础语法的括号中填入图片的位置路径即可,支持绝对路径和相对路径
缺点:本地图片不能够更改或删除,否则markown无法调用本地图片资源,灵活性太差,不建议使用
插入网络图片
只需要在基础语法的括号中填入图片的网络链接即可
缺点:依赖网络,若网络不好或者网络图片链接失效会对markdown加载图片造成影响,建议将图片资源保存在稳定的网络服务器中;优点是十分灵活
把图片存入markdown文件
用base64转码工具把图片转成一段字符串,然后把字符串填到基础格式中链接的那个位置
基础用法:

高级用法
![avatar][base64str]
[base64str]:data:image/png;base64,iVBORw0......
base64转码工具:http://tool.chinaz.com/tools/imgtobase/
缺点:将图片转为base64链接太长,十分影响编写体验;优点是上传的图片十分安全,不用担心丢失
Markdown 图片语法格式如下:


或者使用<img>标签
<img src="图片地址" alt="属性文本"/>
展示效果:
如果图片地址太长可以像网址那样对图片网址使用变量
![alt 属性文本][变量1]
然后在文档的结尾为变量赋值(网址)
[变量1]: 图片地址
例如:
![百度][a]
[a]:http://img0.bdstatic.com/static/searchresult/img/logo-2X_32a8193.png "百度"
展示效果:
Markdown设置图片样式
Markdown 还没有办法指定图片的样式,如果你需要的话,你可以使用普通的 标签来实现
<img src="图片地址" alt="属性文本" align="" width="" height=""/>
align属性值根据周围文本来排列图像:left(左),right(右),middle(中:默认)
width和height为图片长和宽,值可以为百分比50%,或者具体值120px
例子:
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1579444411026&di=8e1d5f231b13c1f9a336cf875202b965&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201410%2F20%2F20141020192354_8YXYE.thumb.700_0.gif" width="50%"/>
展示效果:
Markdown 制作表格使用 | 来分隔不同的单元格,使用 - 来分隔表头和其他行。
语法格式如下:
| 表头1 | 表头2 |
| ---- | ---- |
| 单元格a | 单元格b |
| 单元格c | 单元格d |
展示效果:
表头1 | 表头2 |
---|---|
单元格a | 单元格b |
单元格c | 单元格d |
我们可以设置表格的对齐方式:
| 左对齐 | 右对齐 | 居中对齐 |
| :-----| ----: | :----: |
| 单元格 | 单元格 | 单元格 |
| 单元格 | 单元格 | 单元格 |
展示效果:
左对齐 | 右对齐 | 居中对齐 |
---|---|---|
单元格 | 单元格 | 单元格 |
单元格 | 单元格 | 单元格 |
轻量级标记语言?
标签:本地图片 表格 依赖 表头 html back 排列 base http
原文地址:https://www.cnblogs.com/asio/p/12215445.html