7月1号——markdown语法与emmet语法的认识与使用

markdown语法的使用

一、标题

# #我是一级标题
## ##我是二级标题
### ###我是三级标题
#### ####我是四级标题
##### #####我是五级标题
###### ######我是六级标题

1、标题用#号进行区分，#号必须在开头，一般情况下，建议三级标题即可。

二、列表

1、无序列表

示例：

• 班级
  • 初一（2）班
  • 初一（3）班
  • 初一（4）班
• 姓名
  • 小明
  • 小红
  • 李华
• 学号
  • 2468
  • 1357
  • 6666

总结：无序列表，（-）+（空格）+（文字) 下级列表：（空格）（空格）+（-）+（空格）+（文字）

2、有序列表

示例：

一. 班级

1. 初一（2）班
2. 初一（3）班
3. 初一（4）班

二. 姓名

1. 小明
2. 小红
3. 李华

三. 学号

1. 2468
2. 1357
3. 6666

   总结：有序列表.(1)+(空格)+（文字）
下级有序列表.（空格）（空格）+（1）+（.）+(空格)+（文字）

---

三、单行和多行代码

1.单行：示例：<h1>hello <strong>大家好</strong></h1>

（单行用一个反引号，反引号键在esc键下面，跟~是一个键）

2.多行：
示例：

<h1
style="color:rgb">hello<strong>大家好</strong></h1>
<h1 >PHP中文网真滴好</h1>

（多行，代码块，用三个反引号，```）

---

四、编辑表格

序号	姓名	地址	电话
1	小明	湖北	12345
2	小红	江苏	24680
3	李华	重庆	23456

---

五、图片

语法： ![文字描述]（复制图像链接在此）

---

二、emmet语法

1.创建html文档结构

html:5或者 ! 皆可创建html文档结构

2.div语法

<div id="李华">李华</div>

div是默认标签，可以不写;id用#表示;内容用{文字，内容}包裹

#box{李华}

3.层级，兄弟，父子

父子关系 用 > 
>ul>li>a{内容}
如：<li><a href="">北大清华</a></li>

---

兄弟关系用  +
 .title{内容}+.url{内容}
 如： <div class="title">北大清华</div>
        <div class="url">清华北大</div>

---

重复生成用* 
ul>li*3>a{hello}
<ul>
  <li><a href="">hello</a></li>
  <li><a href="">hello</a></li>
  <li><a href="">hello</a></li>
</ul>

---

重复生成* 顺序用$ 顺序起始数 用@

ul>li*5>a{哇塞哇塞、$@4}   （从第4开始依次往下排序，升序，4，5，6，7....）
<ul>
            <li><a href="">哇塞哇塞、4</a></li>
            <li><a href="">哇塞哇塞、5</a></li>
            <li><a href="">哇塞哇塞、6</a></li>
            <li><a href="">哇塞哇塞、7</a></li>
            <li><a href="">哇塞哇塞、8</a></li>
        </ul>

---

小作业：

创建一个五行八列表格:

<style>
    table {
        border-collapse:collapse;
    }
     thead {
        background-color:aqua
    }
    table th,table td {
    border: 1px solid;
    padding: 8px;;
    }
</style>
    <table>
        <caption> 经管学院学生课程表 </caption>
        <thead>
            <tr>
                <th> 节\周 </th>
                <th>周一</th>
                <th>周二</th>
                <th>周三</th>
                <th>周四</th>
                <th>周五</th>
                <th>周六</th>
                <th>周日</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td style="color:blue;">第一节</td>
                <td>经济学</td>
                <td>经济学</td>
                <td>营销学</td>
                <td>会计学</td>
                <td>统计学</td>
                <td>经济学</td>
                <td>贸易学</td>
            </tr>
            <tr>
                <td style="color:blueviolet;">第二节</td>
                <td>统计学</td>
                <td>营销学</td>
                <td>经济学</td>
                <td>会计学</td>
                <td>贸易学</td>
                <td>经济学</td>
                <td>会计学</td>
            </tr>
            <tr>
                <td>午休啦</td>
                <td>午休</td>
                <td>午休</td>
                <td>午休</td>
                <td>午休</td>
                <td>午休</td>
                <td>午休</td>
                <td>午休</td>
            </tr>
            <tr>
                <td style="color:aqua;">第四节</td>
                <td>会计学</td>
                <td>经济学</td>
                <td>会计学</td>
                <td>经济学</td>
                <td>会计学</td>
                <td>经济学</td>
                <td>统计学</td>
            </tr>
            <tr>
                <td style="color:brown;">第五节</td>
                <td>统计学</td>
                <td>统计学</td>
                <td>会计学</td>
                <td>贸易学</td>
                <td>贸易学</td>
                <td>会计学</td>
                <td>贸易学</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

表格生成代码：table>captipn{学生信息表}+(thead>tr>th{title}*8)+(tbody>tr*5>td{item}*8