markdown 语法详情
一. 标题
语法：
一个#为 H1 标题,两个#为 H2 标题,#多少代表不同标题大小
格式为:#后加入空格在编写标题,如 # 标题
示例:
# H1标签## H2标签### H3标签#### H4标签##### H5标签###### H6标签
效果如下:
H1 标签
H2 标签
H3 标签
H4 标签
H5 标签
H6 标签
二. 字体
- 加粗
要加粗的文字左右分别使用两个*号包含
- 斜体
倾斜文字左右分别使用一个*号包含
- 斜体加粗
斜体加粗文字左右分别使用三个*号包含
- 删除线
删除线文字左右分别使用两个~~号包含
示例:
**加粗***斜体****斜体加粗***~~删除线~~
效果如下:
加粗
斜体
斜体加粗删除线
三. 引用
语法: 在引用的文字前加>即可.引用可以嵌套,使用多个引用也可。如: >>>内容
示例:
>内容>>>内容>>>>>内容
效果如下:
内容
内容
内容
四. 分割线
语法:三个或三个以上-或*都可以
示例:
---****
效果如下:
五. 图片
语法:
示例:
效果如下:
上传本地图片直接点击导航栏的图片标志,选择图片即可.
六. 超链接
语法:
[标题](url "title")
示例:
[百度](http://www.baidu.com "百度一下")
效果如下:
注:也可使用 a 标签来代替
示例:
<a href="http://www.baidu.com" title="百度一下" target="_blank">百度</a>
效果如下:
<a href="http://www.baidu.com" title="百度一下" target="_blank">百度</a>
七. 列表
无序列表
语法:
无序列表使用- + * 任何一种都可以,- + * 和内容之间要有空格
示例:
- 列表内容* 列表内容+ 列表内容
效果如下:
- 列表内容
- 列表内容
- 列表内容
有序列表
语法:
数字加点,数字和和内容之间要有空格
示例:
1. 列表内容2. 列表内容3. 列表内容
效果如下:
- 列表内容
- 列表内容
- 列表内容
列表嵌套
语法:
上一级和下一级中隔三个空格
示例:
- 一级列表- 二级列表- 二级列表1. 一级列表- 二级列表
效果如下:
- 一级列表
- 二级列表
- 二级列表
- 一级列表
- 二级列表
八. 表格
语法:
|表头|表头|表头||---|---|---||内容|内容|内容||内容|内容|内容|文字默认居左-两边加: 文字居中-右边加: 文字居右
示例:
|姓名|年龄|性别||---|:--:|---:||jack|18|男||mary|20|女|
示例如下:
| 姓名 | 年龄 | 性别 |
|---|---|---|
| jack | 18 | 男 |
| mary | 20 | 女 |
九. 代码
语法:
单行代码: 代码之间使用反引号包含
多行代码: 代码之间使用三个反引号包含
示例:
单行代码:`let a = 1;`多行代码:(```)let a = 1;let b = 2;let c = a + b;(```)注：为防止转义,前后三个反引号都是用括号包含
效果如下:let a = 1;
let a = 1;let b = 2;let c = a + b;
emmet 语法详情
一. html 初始结构
格式化 html: !+Tab 一键生成
生成数据:
<!DOCTYPE html><html lang="en"><head><!-- 给浏览器识别的信息 --><!-- 默认字符集 utf8包含字符最多,全球通用 --><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body></body></html>
二. id(#),class(.)
语法:
id 指令:#title ; class 指令：.titile
示例:
div#testdiv*test
效果如下:
<div id="test"></div><div class="test"></div>
三. 子节点(>),兄弟节点(+),上级节点(^)
语法：
子节点指令:> ; 兄弟节点指令: + ; 上级节点指令: ^
示例:
div>div+ul>li^div
效果如下:
<div><div></div><ul><li></li></ul><div></div></div>
四. 重复 (*)
语法:
重复指令: *
示例:
div.class*3
效果如下:
<div class="class"></div><div class="class"></div><div class="class"></div>
五. 分组 (())
语法:
分组指令: ()
示例:
div>(ul>li*3>a)+div>p
括号里的内容为一个层级
示例如下:
<div><ul><li><a href=""></a></li><li><a href=""></a></li><li><a href=""></a></li></ul><div><p></p></div></div>
六. 属性([xxxx])
语法:
属性指令:[]
示例:
div>a[href="#" name="test"]
效果如下:
<div><a href="#" name="test"></a></div>
七. 编号($)
语法:
编号指令: \$ ($代表一位数,后面更上数字就代表从 1 递增到填写的数字)
示例:
ul>li.test$*3
效果如下:
<ul><li class="test1"></li><li class="test2"></li><li class="test3"></li></ul>
注意:
- 一个\$代表一个数字,两个\$\$代表两个数字,若使用\$\$就是从 01 开始,以此类推.
示例:
div.test$$$*2
效果如下:
<div class="test001"></div><div class="test002"></div>
- 如果想自定义从几开始: $@+数字*数字
示例:
ul>li.test$$@5*2
效果如下:
<ul><li class="test05"></li><li class="test06"></li></ul>
八. 文本({})
语法:
文本指令: {}, {}里面填入内容
示例:
ul>li.test$*3{测试$}>a{百度$}
效果如下:
<ul><li class="test1">测试1<a href="">百度1</a></li><li class="test2">测试2<a href="">百度2</a></li><li class="test3">测试3<a href="">百度3</a></li></ul>
九. 隐式标签
部分标签可以不输入标签，直接输入指令，自动识别父类标签
例如:
- div : .test =>
<div class="test"></div>
- li : 用于 ul 和 ol 中,如: ul>.test*3 =>
<ul><li class="test"></li><li class="test"></li><li class="test"></li></ul>
- tr : 用于 table、tbody、thead 和 tfoot 中,如: table#tab>tr.test*2 =>
<table id="tab"><tr class="test"></tr><tr class="test"></tr></table>
- option : 用于 select 和 optgroup 中, 如: select>.test*2 =>
<select name="" id=""><option class="test"></option><option class="test"></option></select>