插件安装

Markdown语法学习

1、使用 # 标记1-6级标题 = - 可以表示一级和二级标题

一个# 是一级标题

一级标题

我展示一级标题

我展示二级标题

2、Markdown段落

Markdown段落：换行是使用两个以上空格加上回车
baidu.com
google.com

字体

*斜体文本*
_斜体文本_
**粗体文本**
__粗体文本__
***粗斜体文本***
___粗斜体文本___

展示效果：
斜体文本
斜体文本
粗体文本
粗体文本
粗斜体文本
粗斜体文本

分割线

***
* * *
*****
- - -
--------

展示效果：

- - -

删除线~ 在要删除的文字两端加两个~~

~~baidu.com~~

下划线

通过HTML的<u>标签来实现：
<u>带下划线文本</u>

Markdown列表

无序列表使用型号（*）、加号（+）、减号（-）作为列表标记标记后面要加个空格

* 第一项
* 第二项
* 第三项
+ 第一项
+ 第二项
+ 第三项
- 第一项
- 第二项
- 第三项

第一项
第二项
第三项

第一项
第二项
第三项

第一项
第二项
第三项

有序列表使用数字并加上 . 号来表示，如：

第一项
第二项
第三项

列表嵌套

列表嵌套只需在子列表中的选项前面添加四个空格

1.第一项：
    - 第一项嵌套的第一个元素
    - 第一项嵌套的第二个元素
2.第二项：
    - 第二项嵌套的第一个元素
    - 第二项嵌套的第二个元素

反引号`包裹代码
`````` 三个反引号包裹代码块

<!DOCTYPE html>
<html lang="en">
  <head>
    <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>

链接使用：

链接名称
<链接地址>

表格

|  表头   | 表头  |
|  ----  | ----  |
| 单元格  | 单元格 |
| 单元格  | 单元格 |

表头	表头
单元格	单元格
单元格	单元格

设置对齐方式：

-: 设置内容和标题栏居右对齐。
:- 设置内容和标题栏居左对齐。
:-: 设置内容和标题栏居中对齐。

实现：
| 左对齐 | 右对齐 | 居中对齐 |
| :——-| ——: | :——: |
| 单元格 | 单元格 | 单元格 |
| 单元格 | 单元格 | 单元格 |

Emmet学习

Emmet是一款插件，只要能安装他的编辑器都能使用，大部分编辑器都可以使用该语法规则,我们平时开发的Sublime Text、Eclipse、Notepad++、VS code、Atom、Dreamweaver等等编辑器都可以使用。

1、html初始结构

!+tab键

<!DOCTYPE html>
<html lang="en">
  <head>
    <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>

html:5

<!DOCTYPE html>
<html lang="en">
  <head>
    <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>

2、id(#),class(.)

id指令:# ; class指令:.

div#test
<div id="test"></div>
div.test
<div class="test"></div>

3、子节点（>）,兄弟节点（+），上级节点（^）

div>ul>li>p

<div>
      <ul>
          <li>
              <p></p>
          </li>
      </ul>
  </div>

div+ul+p
```
<div></div>
<ul></ul>
<p></p>
```

div>ul>li^div

<div>
      <ul>
          <li></li>
      </ul>
      <div></div>
  </div>

重复（*）

div5(号后面添加数字表示重复的元素个数)

  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>

分组(())

div>(ul>li>a)+div>p

<div>
      <ul>
          <li><a href=""></a></li>
      </ul>
      <div>
          <p></p>
      </div>
  </div>

属性（[attr]） —-id class的属性

a[href=’###’ name=’xiaoA’]
<a href="###" name="xiaoA"></a>
编号（$）
ul>li.test$3 ($代表一位数，后面跟上数字就代表从1递增到填写的数字)
```
<ul>
      <li class="test1"></li>
      <li class="test2"></li>
      <li class="test3"></li>
  </ul>
```
隐式标签
例如.test
<div class="test"></div>

ul>.test$*3

<ul>
      <li class="test1"></li>
      <li class="test2"></li>
      <li class="test3"></li>
  </ul>

隐私标签有如下几个：

li：用于 ul 和 ol 中
tr：用于 table、tbody、thead 和 tfoot 中
td：用于 tr 中
option：用于 select 和 optgroup 中

第一节课作业