emmet的语法和使用方法

1.html快速生成和属性的简写

快速生成html可以在 vscode编辑器使用！或者输入html5 即可快速生成
id和class是属性用于表述，id可以用#号来简写 class即使用.号代替 ,内容引用{}
  #box{box} 
 <div id="box">box</div>   #box{box} 
 class的使用方法是.
 .container{content}
  <div class="container">content</div>

---

2.层级的父子，兄弟关系使用符号的方法

1.父子的层级关系使用符号写法

ur和li是 属于父子关系使用的>号 使用方法 ur>li>a{首页}
其中ur和li是属于父子关系

 <ul>
            <li><a href="">拼音</a></li>
            <li><a href="">五笔</a></li>
            <li><a href="">英语</a></li>
        </ul>

2.兄弟关系使用的符号写法

兄弟关系使用的写法符号是+号下面引用案例
 <div class="title">站点名称</div>
 <div class="url">php中文网</div>
 快速生成 .title{站点名称}+.url{php中文网}

---

3.重复生成使用的是*

案例
<ul>
             <li><a href="">中文</a></li>
             <li><a href="">中文</a></li>
             <li><a href="">中文</a></li>
         </ul>
         生成的方法使用*ur>li*3>a{内容}

---

4.序号使用的符号是@和$

1.$的符号是默认从1递增，$符号使用在{$}里面
    写法，ul.menu>li.item*4>a{itme$} 
     <ul class="menu">
         <li class="item"><a href="">item1</a></li>
         <li class="item"><a href="">item2</a></li>
         <li class="item"><a href="">item3</a></li>
         <li class="item"><a href="">item4</a></li>
     </ul>
2.如需要使用指定递增方式需要在$后面引入@使用方法如下
            ul.menu>li.item*4>a{itme$@5}
                 <ul class="menu">
         <li class="item"><a href="">itme5</a></li>
         <li class="item"><a href="">itme6</a></li>
         <li class="item"><a href="">itme7</a></li>
         <li class="item"><a href="">itme8</a></li>
     </ul>
3.反序列符号使用的方法在@里面增加-号
    ul.menu>li.item*4>a{itme$@-5}
            <ul class="menu">
            <li class="item"><a href="">itme8</a></li>
            <li class="item"><a href="">itme7</a></li>
            <li class="item"><a href="">itme6</a></li>
            <li class="item"><a href="">itme5</a></li>
        </ul>

---

5.表格的使用方法

        <table>   表格标签
            <thead>    表头
                <tbody></tbody>    表体
            </thead>
        </table>
        如何快速的生成一个多行多列的表格，代码如下
table>caption>{会员信息}+(thead>tr>th{时间}*8)+(tbody>tr*5>td{时间}*8)

效果如下
        <table>
            <caption>
                会员信息
                <thead>
                    <tr>
                        <th>时间</th>
                        <th>时间</th>
                        <th>时间</th>
                        <th>时间</th>
                        <th>时间</th>
                        <th>时间</th>
                        <th>时间</th>
                        <th>时间</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>时间</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>时间</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>时间</td>
                        <td>时间</td>
                        <td>时间</td>
                        <td>时间</td>
                        <td>时间</td>
                        <td>时间</td>
                        <td>时间</td>
                        <td>时间</td>
                    </tr>
                </tbody>
            </caption>
        </table>