Markdown&emmet的基础语法

markdown 语法

1. 标题

通常情况下最多用三个“#”
# title1 
## title2
### title3
#### title4
##### title5
###### title6

2. 列表

无序列表用“- + *”通常使用"-"
有序列表使用数字加“.”号

2.1 无序

• 一班
• 二班
  • 张三
  • 李四
  • 王五
• 三班

  2.2 有序

1. 一班
2. 二班
   2.1张三
   2.2李四
   2.3王五
3. 三班

3. 代码

代码用“```名称”

<?php
  echo "hello world";
?>

4. 表格

名次	高一	高二	高三
第一名	name1	name4	name7
第二名	name2	name5	name8
第三名	name3	name6	name9

5. 图片

格式：![说明](路径)

emmet语法

1.快速生成html结构

输入“html:5”或“！”按“Tab键”

2.元素快速添加属性

“id”和“class”是两个常用属性

"id"属性   div#name{张三} 按回车
"class"属性   div.name{李四} 按回车
说明：当元素标签为<div>时，可以省去前面的div
例子：#name{张三} 按回车

    <div id="name">张三</div>
    <div class="name">李四</div>

3层级关系

父子关系   用">"号
ul>li{item}  按回车

    <ul>
        <li>item</li>
    </ul>

兄弟关系   用"+"号
div.num1{张三}+div.num2{李四} 按回车
因<div>是默认标签所以此处可以省去
.num1{张三}+.num2{李四}   按回车

    <div class="num1">张三</div>
    <div class="num2">李四</div>

重复关系   用"*"号
li*3{item}    按回车

    <li>item</li>
    <li>item</li>
    <li>item</li>

因此
 #box>.num1{这里是标题}+.num2>ul>li*3>a{text}    按回车

    <div id="box">
        <div class="num1">这里是标题</div>
        <div class="num2">
            <ul>
                <li><a href="">text</a></li>
                <li><a href="">text</a></li>
                <li><a href="">text</a></li>
            </ul>
        </div>
    </div>

序号    用“$”和“@”
“$”表示递增默认从1开始，
“@”后面连接数字起到定位和正反序的作用，
当后面的数字为“0”或者正数时候，表示从几开始
当后面的数字为负数时，表示倒序排列，和结束的位置

.box>ul>li.num*3>a{text$}     从1开始   正序

    <div class="box">
        <ul>
            <li class="num"><a href="">text1</a></li>
            <li class="num"><a href="">text2</a></li>
            <li class="num"><a href="">text3</a></li>
        </ul>
    </div>

.box>ul>li.num*3>a{text$@0}     从0开始   正序

    <div class="box">
        <ul>
            <li class="num"><a href="">text0</a></li>
            <li class="num"><a href="">text1</a></li>
            <li class="num"><a href="">text2</a></li>
        </ul>
    </div>

.box>ul>li.num*3>a{text$@5}     从5开始   正序

    <div class="box">
        <ul>
            <li class="num"><a href="">text5</a></li>
            <li class="num"><a href="">text6</a></li>
            <li class="num"><a href="">text7</a></li>
        </ul>
    </div>

.box>ul>li.num*3>a{text$@-0}     到0结束     倒序

    <div class="box">
        <ul>
            <li class="num"><a href="">text2</a></li>
            <li class="num"><a href="">text1</a></li>
            <li class="num"><a href="">text0</a></li>
        </ul>
    </div>

.box>ul>li.num*3>a{text$@-3}      到3结束     倒序

    <div class="box">
        <ul>
            <li class="num"><a href="">text5</a></li>
            <li class="num"><a href="">text4</a></li>
            <li class="num"><a href="">text3</a></li>
        </ul>
    </div>

创建5行8列表格

表格式样

<table>                      <!-- 表格标签 -->
    <caption></caption>      <!-- 标题 -->
    <thead></thead>          <!-- 表头 -->
    <tbody>                  <!-- 表体 -->
        <tr>                 <!-- 行 -->
            <td></td>        <!-- 列 -->
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

table>caption{学生信息表}+(thead>tr>th{title}*8)+(tbody>tr*5>td{item}*8)

    <style>
        table{
            border-collapse: collapse;
        }
        table thead{
            background-color: yellowgreen;
        }
        table th,table td{
            border: 1px solid #000000;
            padding: 5px;
        }
    </style>
    <table>
        <caption>学生信息表</caption>
        <thead>
            <tr>
                <th>title</th>
                <th>title</th>
                <th>title</th>
                <th>title</th>
                <th>title</th>
                <th>title</th>
                <th>title</th>
                <th>title</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>item</td>
                <td>item</td>
                <td>item</td>
                <td>item</td>
                <td>item</td>
                <td>item</td>
                <td>item</td>
                <td>item</td>
            </tr>
            <tr>
                <td>item</td>
                <td>item</td>
                <td>item</td>
                <td>item</td>
                <td>item</td>
                <td>item</td>
                <td>item</td>
                <td>item</td>
            </tr>
            <tr>
                <td>item</td>
                <td>item</td>
                <td>item</td>
                <td>item</td>
                <td>item</td>
                <td>item</td>
                <td>item</td>
                <td>item</td>
            </tr>
            <tr>
                <td>item</td>
                <td>item</td>
                <td>item</td>
                <td>item</td>
                <td>item</td>
                <td>item</td>
                <td>item</td>
                <td>item</td>
            </tr>
            <tr>
                <td>item</td>
                <td>item</td>
                <td>item</td>
                <td>item</td>
                <td>item</td>
                <td>item</td>
                <td>item</td>
                <td>item</td>
            </tr>
        </tbody>
    </table>