emmet语法
1. 简介
1.1 标签/元素(h1 div等) 1.2 属性（id, class等）
2.语法快捷开发
1. #表示属性(id) .表示属性(class) 内容用{}包裹 例如 #{box} 则显示 <div id="">box</div> 例如 .{box} 则显示 <div class="">box</div> 例如 #id.123{123} 则显示 <div id="id" class="123">123</div>2. 层级: 父子, 兄弟 2.1 父子关系用>写法 例如ul>li>a{123} 则显示 <ul> <li></li> </ul>a{123} 2.2 兄弟关系用+写法 例如.title{站点名称:}+.url{php.cn} 则显示 <div class="title">站点名称:</div> <div class="url">php.cn</div>3. 重复生成 ul>li*3{首页}>a 则显示 <ul> <li>首页<a href=""></a></li> <li>首页<a href=""></a></li> <li>首页<a href=""></a></li> </ul>4. 序号：@ $ 4.1 $ --- 升序从1开始 如 ul.menu>li.item*4>a{item$} 显示 <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> 4.2 @是指定起始 ul.menu>li.item*4>a{item$@5} 显示 <ul class="menu"> <li class="item"><a href="">item5</a></li> <li class="item"><a href="">item6</a></li> <li class="item"><a href="">item7</a></li> <li class="item"><a href="">item8</a></li> </ul> 4.3 倒序则在@与数字中加上- ul.menu>li.item*4>a{item$@-5} 显示 <ul class="menu"> <li class="item"><a href="">item8</a></li> <li class="item"><a href="">item7</a></li> <li class="item"><a href="">item6</a></li> <li class="item"><a href="">item5</a></li> </ul>
3. 表格标签
表格标签用table来写 thead 表头 tbody 表体 table>caption{学生信息表}+(thead>tr>th{表头}*8)+(tbody>tr*5>td{表体}*8) tr（行） th和td都是列 可以认为th是加粗字体 td没有加粗
<!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><style> table{border-collapse:collapse ;}thead{ background-color: lightblue;}tbody{ background-color:antiquewhite;}table th,table td { border: 1px solid; padding: 5px;}</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>表体</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> </table></body></html>
