首页 > 博客列表 > 第一篇：markdown和emmet语法详情

博主信息

博文 1

粉丝 0

访问量 723

专题推荐

更多>

markdown 语法详情

一. 标题

语法：

一个#为 H1 标题,两个#为 H2 标题,#多少代表不同标题大小
格式为:#后加入空格在编写标题,如 # 标题

示例:

# H1标签
## H2标签
### H3标签
#### H4标签
##### H5标签
###### H6标签

效果如下:

H1 标签

H2 标签

H3 标签

H4 标签

H5 标签

H6 标签

二. 字体

加粗

要加粗的文字左右分别使用两个*号包含

斜体

倾斜文字左右分别使用一个*号包含

斜体加粗

斜体加粗文字左右分别使用三个*号包含

删除线

删除线文字左右分别使用两个~~号包含

示例:

**加粗**
*斜体*
***斜体加粗***
~~删除线~~

效果如下:

加粗
斜体
斜体加粗
~~删除线~~

三. 引用

语法: 在引用的文字前加>即可.引用可以嵌套,使用多个引用也可。如: >>>内容

示例:

>内容
>>>内容
>>>>>内容

效果如下:

内容

内容

内容

四. 分割线

语法:三个或三个以上-或*都可以

示例:

---
****

效果如下:

五. 图片

语法:

![图片alit](url "图片title")

示例:

![万里长城](https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3740891955,4260360647&fm=26&gp=0.jpg "万里长城")

效果如下:

万里长城

上传本地图片直接点击导航栏的图片标志,选择图片即可.

六. 超链接

语法:

[标题](url "title")

示例:

[百度](http://www.baidu.com "百度一下")

效果如下:

百度

注:也可使用 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#test
div*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>

批改老师：

天蓬老师

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

第一篇：markdown和emmet语法详情

2021-03-19 02:33:42