Community Learn Tools Library Leisure
search
English
Home > List of blog posts > Markdown 简介及其对应 Html 常用标签语法初识
Blogger Information
Blog 2
fans 0
comment 0
visits 2130
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
Markdown 简介及其对应 Html 常用标签语法初识
恶作剧之吻
Original
1265 people have browsed it

Markdown 简介及对应 Html 常用标签语法

1.Markdown是什么？

  • Markdown 是一种可以使用简单标记书写具有HTML格式的书写工具
  • 是书写HTML文档的工具
  • 目标是生产HTML文档（并不能替代html）
  • 最大特点是简单易学（相对html而言）

2.学习Markdown 需要什么知识背景？

仅仅需要了解一些最基本的HTML标签常识，例如段落，标题，链接，列表，图片，表格是如何表示的

  1. <p>段落</p>
  2. <!-- 段落标签 -->
  3. <h1>这是h1标题</h1>
  4. <h6>这是h6标题</h6>
  5. <!-- h1~h6标题 -->
  6. <a href=""></a>
  7. <!-- a链接 -->
  8. <ul>
  9.     <li></li>
  10.     <li></li>
  11. </ul>
  12. <!-- 无序列表 -->
  13. <ol>
  14.     <li></li>
  15.     <li></li>
  16. </ol>
  17. <!-- 有序列表 -->
  18. <dl>
  19.     <dt></dt>
  20.         <dd></dd>
  21. </dl>
  22. <!-- 自定义列表 -->
  23. <img src="">
  24. <!-- 图片 -->
  25. <table>
  26.     <caption></caption>
  27.     <thead></thead>
  28.     <tbody>
  29.         <tr>
  30.             <td></td>
  31.             <td></td>
  32.         </tr>
  33.     </tbody>
  34. <!-- 表格 -->

3.编写 Markdown 需要什么工具

vscode

4.Markdown 与 html 之间的关系？

  • Markdown 使得html编写门槛更低，几乎人人可以编写
  • Markdown 仅仅是简化了html文档的编写，不能替代html文档，表现力不足
  • Markdown 的表现力远不及真实html，所以在编写时可以直接使用html标签编写

5.Markdown 写作的优势是？

  • 更方便：内容为王，好学，快速入门，降低网络写作门槛
  • 更专注：专注内容，只需简单标记，写出美观文章
  • 更通用：众多平台，写作软件都支持Markdown语法
  • 专注于内容本身，写作的时候手可以不离开键盘。

第一节 标题

标题使用的标记是：“#”号

实战演示

# 一级标题 #

一级标题

  1. 一级标题(文字下方输入=号，为一级标题简写)
  2. ========

使用简写=号：效果

## 二级标题 ##

二级标题

  1. 二级标题（文字下方输入-号，为二级标题简写）
  2. ---

使用简写-号：效果

### 三级标题

三级标题

#### 四级标题

四级标题

##### 五级标题

五级标题

###### 六级标题

六级标题
  1. <!-- # 相当于html里的h1~h6 -->
  2. <h1>一级标题</h1>
  3. <h2>二级标题</h2>
  4. <h3>三级标题</h3>
  5. <h4>四级标题</h4>
  6. <h5>五级标题</h5>
  7. <h6>六级标题</h6>

第二节 段落与换行

1.知识点与语法：

  • 如何定义段落？直接写文本就可以,会生产<p>标签
  • 如何在段落中换行？直接回车不行的，应该怎么做？
    • 在Markdown中换行直接回车只会产生一个空格，并不会换行，需要使用两个空格再接一个回车才会在html中生成<br>换行

第三节 引用

  • 为了尊重知识产权,引用资源和文字,添加大于号:>表示引用
  • 一个大于号一级引用 两个大于号可以嵌套引用

引用一级引用 引用可以嵌套

嵌套引用

这是h2大标题

总结

  • 引用对应的标签：>
  • 支持多级引用：添加多个大于号：>即可
  • 引用的内容可以嵌套使用其他Markdown语法(标签),例如h2标题语法##

第四节 分割线

  • 使用三个或以上的星号*和减号- 对应的就是<hr>标签
  • 星号和减号在Markdown语法中有特殊含义，在普通文本中引用需要反斜线转义一下
  • 星号*和减号- 超过三个就可以,多少个无所谓,可以不连续

三颗连续的***

三颗有空格的* * *

三个连续的---

三个有空格的- - -

第五节 代码区块

1.语法

  • 1)在代码前缩进4个空格,或者1个制表符即可
  • 2)使用三个反引号```
  • 3)使用三个波浪线~~~
  • 4)段落中的单行代码使用一个反引号或者波浪线
  • 5)可以指定编程语言名称,以实现代码高亮

2.实战

  1. <html>
  2. <p>缩进4个空格或1个制表符</p>
  3. </html>
  1. <p>使用三个反引号</p>
  1. <p>使用三个波浪号</p>

这是一句css选择器:h1 {coloer:red}使用了一个反引号显示段落中的代码

代码块或内联的代码文本 推荐使用反引号
代码是否正确,不会语法检查,需要自行确保代码符合规范

第六节 链接

html中a链接:<a href="">php中文网</a>在Markdown中的语法为:链接文本

[链接文本](href属性的url地址 "title的提示信息")

地址和title之间有一个空格,不然title提示信息无法解析

html的a标签可以直接在Markdown中使用,例如在新标签页打开网址,要用heml的a标签target="_blank"属性,使用Markdown就无法实现,也正好证明了Markdown是无法完全替代html的

第七节 强调

  • 斜体表示:使用1个*或_包围的内容 相当于html里的<em>标签
  • 粗体表示:使用2个*或_包围的内容,相当于html里的<strong>标签

实战:Markdown是一种可以使用简单的标记语法书写具有HTML的格式的书写工具

使用_下划线语法,必须把下滑线与文本连在一起写,且两边得有空格,不然不解析

例1正确空格,成功解析

这样使用 下划线 才能正确 解析 所以更推荐使用星号来强调

这样使用 _下划线_ 才能正确 __解析__ 所以更推荐使用**星号**来*强调*

例2未空格,（有些编辑器可能不解析）

没有空格下划线就不能正确解析所以更推荐使用星号来强调

没有空格_下划线_就不能正确__解析__所以更推荐使用**星号**来*强调*

第八节 列表

  • 无序列表:用1个星号*或加号+或|-,并以空格与列表项隔开,转化为html里的<ul>标签
  • 有序列表:被1个数字开始,并以空格与列表项隔开,转化为html里的<ol>标签

实战无序列表示例

  • 无序列表1
  • 无序列表2
    • 列表2-1
    • 列表2-2
      • 列表2-2-1
      • 列表2-2-2

敲上几个空格可以嵌套下级列表

实战有序列表示例

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

有序列表的序号可以用编辑器自动排序,输入0.就可以编号,实际工作中,有序列表用的不多,尽量使用无序列表。

第九节 表格

  • 硬生生用竖线和减号画出来的
  • 对齐方式使用冒号(:)控制

实战示例

id name sex
1 刘备 女
2 张飞 男

表头下方的竖线和横线及冒号|--|:--:| -:|两端的竖线可以不要,不影响,中间的横线多少都可以。

冒号在横线两边表示居中,在横线右侧表示靠右对齐。

第十节 图片

  • 图片的语法与链接非常相似,只需在前面添加一个!叹号即可
  • ![提示文本](图片地址/url 'title提示')

实战示例

可爱的狗狗

![可爱的狗狗](狗狗图片地址.jpg "品种优良，肉质可口")

Markdown不支持图片大小设定,且地址与title文字提示要有一个空格,否则“品种优良，肉质可口”提示不解析(鼠标放图片上会显示title提示)。

对应html的写法：

  1. <img src="狗狗图片地址.jpg" alt="可爱的狗狗" title="品种优良，肉质可口">

可爱的狗狗

当图片无法获取时,显示Markdown方括号内提示文本-“可爱的狗狗”,既对应html里的alt值。

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post