Markdown 简介及对应 Html 常用标签语法
1.Markdown是什么？
- Markdown 是一种可以使用简单标记书写具有HTML格式的书写工具
- 是书写HTML文档的工具
- 目标是生产HTML文档（并不能替代html）
- 最大特点是简单易学（相对html而言）
2.学习Markdown 需要什么知识背景？
仅仅需要了解一些最基本的HTML标签常识，例如段落，标题，链接，列表，图片，表格是如何表示的
<p>段落</p><!-- 段落标签 --><h1>这是h1标题</h1><h6>这是h6标题</h6><!-- h1~h6标题 --><a href=""></a><!-- a链接 --><ul><li></li><li></li></ul><!-- 无序列表 --><ol><li></li><li></li></ol><!-- 有序列表 --><dl><dt></dt><dd></dd></dl><!-- 自定义列表 --><img src=""><!-- 图片 --><table><caption></caption><thead></thead><tbody><tr><td></td><td></td></tr></tbody><!-- 表格 -->
3.编写 Markdown 需要什么工具
vscode
4.Markdown 与 html 之间的关系？
- Markdown 使得html编写门槛更低，几乎人人可以编写
- Markdown 仅仅是简化了html文档的编写，不能替代html文档，表现力不足
- Markdown 的表现力远不及真实html，所以在编写时可以直接使用html标签编写
5.Markdown 写作的优势是？
- 更方便：内容为王，好学，快速入门，降低网络写作门槛
- 更专注：专注内容，只需简单标记，写出美观文章
- 更通用：众多平台，写作软件都支持Markdown语法
- 专注于内容本身，写作的时候手可以不离开键盘。
第一节 标题
标题使用的标记是：“#”号
实战演示
# 一级标题 #
一级标题
一级标题(文字下方输入=号，为一级标题简写)========
使用简写=号：效果
## 二级标题 ##
二级标题
二级标题（文字下方输入-号，为二级标题简写）---
使用简写-号：效果
### 三级标题
三级标题
#### 四级标题
四级标题
##### 五级标题
五级标题
###### 六级标题
六级标题
<!-- # 相当于html里的h1~h6 --><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>
第二节 段落与换行
1.知识点与语法：
- 如何定义段落？直接写文本就可以,会生产<p>标签
- 如何在段落中换行？直接回车不行的，应该怎么做？
- 在Markdown中换行直接回车只会产生一个空格，并不会换行，需要使用两个空格再接一个回车才会在html中生成<br>换行
第三节 引用
- 为了尊重知识产权,引用资源和文字,添加大于号:>表示引用
- 一个大于号一级引用 两个大于号可以嵌套引用
引用一级引用 引用可以嵌套
嵌套引用
这是h2大标题
总结
- 引用对应的标签：>
- 支持多级引用：添加多个大于号：>即可
- 引用的内容可以嵌套使用其他Markdown语法(标签),例如h2标题语法##
第四节 分割线
- 使用三个或以上的星号*和减号- 对应的就是<hr>标签
- 星号和减号在Markdown语法中有特殊含义，在普通文本中引用需要反斜线转义一下
- 星号*和减号- 超过三个就可以,多少个无所谓,可以不连续
三颗连续的***
三颗有空格的* * *
三个连续的---
三个有空格的- - -
第五节 代码区块
1.语法
- 1)在代码前缩进4个空格,或者1个制表符即可
- 2)使用三个反引号```
- 3)使用三个波浪线~~~
- 4)段落中的单行代码使用一个反引号或者波浪线
- 5)可以指定编程语言名称,以实现代码高亮
2.实战
<html><p>缩进4个空格或1个制表符</p></html>
<p>使用三个反引号</p>
<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
- 有序列表2
- 列表2-1
- 列表2-2
- 列表2-3
有序列表的序号可以用编辑器自动排序,输入0.就可以编号,实际工作中,有序列表用的不多,尽量使用无序列表。
第九节 表格
- 硬生生用竖线和减号画出来的
- 对齐方式使用冒号(:)控制
实战示例
| id | name | sex |
|---|---|---|
| 1 | 刘备 | 女 |
| 2 | 张飞 | 男 |
表头下方的竖线和横线及冒号|--|:--:| -:|两端的竖线可以不要,不影响,中间的横线多少都可以。
冒号在横线两边表示居中,在横线右侧表示靠右对齐。
第十节 图片
- 图片的语法与链接非常相似,只需在前面添加一个!叹号即可
实战示例
Markdown不支持图片大小设定,且地址与title文字提示要有一个空格,否则“品种优良，肉质可口”提示不解析(鼠标放图片上会显示title提示)。
对应html的写法：
<img src="狗狗图片地址.jpg" alt="可爱的狗狗" title="品种优良，肉质可口">
当图片无法获取时,显示Markdown方括号内提示文本-“可爱的狗狗”,既对应html里的alt值。