Emmet和markdown语法

一、Emmet语法

Emmet语法地址

1.添加id

<!-- 添加id div#box -->
<div id="box"></div>

2.添加class

<!-- 添加class div.box -->
<div class="box"></div>

3.添加内容

<!-- 添加内容 div{这是一个div标签} -->
<div>这是一个div标签</div>

4.添加属性

<!-- 添加属性 a[href="http://www.baidu.com"]{百度} -->
<a href="http://www.baidu.com">百度</a>

5.添加列表

<!-- 添加列表 ul.list>li.item{$.xxxx}*5 -->
<ul class="list">
    <li class="item">1.xxxx</li>
    <li class="item">2.xxxx</li>
    <li class="item">3.xxxx</li>
    <li class="item">4.xxxx</li>
    <li class="item">5.xxxx</li>
</ul>

二、typora和markdown语法

1. 标题

快捷键 ctrl+1~ctrl+6

2.列表

  1. 有序列表 数字. xxx

  2. 无序列表 * xxx

  3. 列表等级操作快捷键

    - 按tab键可以是列表项变为子列表
    - 按shift+tab键可以时子列表项变成统计列表项
    

3.加粗

选择内容后, ctrl+b

4.代码快

  1. 快捷键 ```+回车

  2. 选择代码的语言可以让代码快高亮

    <!DOCTYPE html>
    <html lang="en"> 
    <head>  
    </head> 
    <body> 
        <div class="box">
            <p class="back w50">
                <img src="./img/jiantou.png" alt="">
                <span>返回</span>
            </p>
            <p class="title">登录</p>
            <span class="w50">按钮</span>
        </div>
    </body> 
    </html>
    

5.添加链接和图片

  1. 添加链接 [链接名称](链接地址)

    打卡链接

  2. 添加图片 ![图片名称]()

6.文件列表和大纲列表

  1. 大纲列表ctrl+shift+1
  2. 文件树列表 ctrl+shift+3

7.查看typora中的markdwon语法

快捷键 ctrl+/

8.导出文件

文件 -> 导出 -> 选择导出的文件类型