HTML超链接文字加粗,Markdown语法之--标题/注释/超链接/下划线/图片/代码/贯穿线/斜体加粗/列表,使你的文本更丰富...

为什么要使用Markdown语法编译我们的文本?

很不喜欢有的人写文章,从前到后全都是小四号,密密麻麻的,看到这我想你也会和我一样丧失掉继续看下去的兴趣了吧;

如果你的文章标题是标题,段落时段落,链接是链接,会有更多人愿意花更多的时间仔细研读一下你的文章,不管你的文采怎么样,首先你已将抓住了我的眼球,吸引了我的注意力不是么?

所以做事情,要么不做,要做就做好,我觉得写博客是一件很消耗一个人精力和时间的事情,如果你写了,没人去看,那不是更加的没意义么?

我是一名前端攻城狮,从去年就开始在Hexo上写博客,我觉得Markdown语法和HTML、CSS语法很相似,说白了它就类似于HTML使用正确的标签,CSS添加样式,使文本更加的语义化,让人一目了然,在越来越注重用户体验的当下,是时候花点时间看一下Markdown语法了,相信会对你有所帮助。

怎么使你的文本变得更加的丰富多彩呢,下面就写一下我经常用到的样式对应的语法。

好吧,我的职业病又要犯了,那就联系到我的职业开始说一说这个语法;

一篇文章,就像我即将要做的一个页面,只不过是它是由简单的HTML标签+CSS样式+JS操作来完成的,那么文章肯定有标题、列表、图片、段落等等,不同的标签有不同的表现形式,首先我们应该使用正确的标签做正确的事;

1. 关于标题

使用===或者---或者#

1). 写法一:

主标题

=======================

副标题

-----------------------

表现形式:

主标题

副标题

2). 写法二:

分为六级标题,类似于家族中的

~

标签

# h1,一级标题

## h2,二级标题

### h3,三级标题

#### h4,四级标题

##### h5,五级标题

###### h6,六级标题

表现形式:

h1,一级标题

h2,二级标题

h3,三级标题

h4,四级标题

h5,五级标题

h6,六级标题

2. 关于注释

这里注释使用右尖括号--------->

不是代码中的注释、 //、 /* */

代码中的注释具体写法请参照我之前的总结,下面是跳转链接

写法:

> 这是一段注释

效果:

这是一段注释

当然注释可以实现嵌套,具体的样子你可以试试,比如:

我是前端工程师

喜欢写博客

喜欢看书,喜欢生活

我是前端工程师

哈哈,撸代码

顺便看书,喝咖灰

我是前端工程师

吃饭,睡觉

打豆豆

》 其实我感觉都差不多,只不过>的数量不一样

3. 关于列表

3.1 无序列表

无序列表就是前面加个小圆点,看起来更清晰点

对应于html中:

  • 无序列表1
  • 无序列表2
  • 无序列表3

三种写法,使用 * 或 + 或 - :

使用 * :

* 无序列表1

* 无序列表2

* 无序列表3

使用 + :

+ 无序列表4

+ 无序列表5

+ 无序列表6

使用 - :

- 无序列表7

- 无序列表8

- 无序列表9

三者效果相同:

*使用 **:

无序列表1

无序列表2

无序列表3

使用 + :

无序列表4

无序列表5

无序列表6

使用 - :

无序列表7

无序列表8

无序列表9

3.1.2 无序列表的的嵌套

写法:

* 呆萌小二郎

* 23岁

* 前端工程师

喜欢看书,撸代码,写博客...

* 呆萌小二郎2

* 嘻嘻哈哈

* 开心

* 呆萌小二郎3

展示效果:

呆萌小二郎

23岁

前端工程师

喜欢看书,撸代码,写博客...

呆萌小二郎2

嘻嘻哈哈

开心

呆萌小二郎3

3.2 有序列表

有序列表就是前面加个序列号

对应于html中:

  1. 有序列表1
  2. 有序列表2
  3. 有序列表3

写法:

1. 有序列表1

2. 有序列表2

3. 有序列表3

效果:

有序列表1

有序列表2

有序列表3

注意:

---------->即使前面的标号写错了,它会默认按顺序升序排列

1. 有序列表1

3. 有序列表3

2. 有序列表2

效果:

有序列表1

有序列表3

有序列表2

4. 制作超链接

类似于标签的跳转,需要一个跳转地址

写法:

[链接文字描述](链接地址)

举个栗子:

[呆萌小二郎博客跳转链接](http://blog.zhouminghang.xyz)

度娘一下,你就知道:

效果如下:

》 如果你写的链接地址是无效地址,相当于空链接,无法跳转

5. 图片链接

![](图片的外链地址)

建议制作自己的图片外链,不建议放本地的图片,加载不到;

可以参照我之前的做法,使用千牛云制作网络图片外链;

如果你的图片外链地址失效或者是无效地址,将加载不到图片,图片是裂图,如下:

%E5%9B%BE%E7%89%87%E7%9A%84%E5%A4%96%E9%93%BE%E5%9C%B0%E5%9D%80

举个栗子(有效图片地址):

![daiMengXiaoerLang](http://upload-images.jianshu.io/upload_images/5726812-cbd59af7ef536d44.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

0d5b9c5d5741?utm_campaign=maleskine&utm_content=note&utm_medium=reader_share&utm_source=weibo

daiMengXiaoerLang

6. 设置斜体

*斜体写法1* 和 _斜体写法2_

效果如下:-----》 斜体写法1 和 斜体写法2

7. 设置加粗

写法:

**熊仔仔的呆萌小媳妇** 是 __Cc__

展示效果:-----> 熊仔仔的呆萌小媳妇 是 Cc

8. 设置分隔符,也就是下划线效果

写法:

* * *

*****************

- - -

-----------------

展示效果:

9. 关于贯穿文字的效果

写法: 中文双波浪符包裹

一般用于~~错误信息的~~

效果如下:----> 一般用于错误信息的

10. 关于代码的写法和效果如下

写法:

比较短的或单行代码使用英文反撇号包裹,

多行或者代码块使用3个反撇号包裹

`单行代码`

`三个英文反撇号`

多行代码(

\这里用来转义符号,

类似于html中单双引号多层嵌套要转义

)

`三个英文反撇号`

效果如下:

单行代码

多行代码(

\这里用来转义符号,

类似于html中单双引号多层嵌套要转义

)

举个栗子:

var person = {};

person.name = 'daimengxiaoerlang';

person.age = 23,

person.job = 'webEngineer',

person.hobby = function() {

console.log(this.name + ', is a ' + this.job + ',' + "He loves the front work and is good at reading and writing code.");

};

console.log(person.hobby()); // daimengxiaoerlang, is a webEngineer,He loves the front work and is good at reading and writing code.

0d5b9c5d5741?utm_campaign=maleskine&utm_content=note&utm_medium=reader_share&utm_source=weibo

我的博客 http://blog.zhouminghang.xyz

11. 突然发现个好玩的,代码块之隔行变色,就是要搞事情,你知道怎么玩么?

如果世界漆黑,

其实你很美

在。。。。。。

很失败啊

这个效果,怎么对齐嘞

装逼失败啊,哈哈

+ 以上差不多够用了吧,后续想到什么在添加吧 +

提示:

本文涉及到的! [] () 均为英文符号

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

--daiMengXiaoerLang

--为信仰而生

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值