Community Learn Tools Library Leisure
search
English
Home > List of blog posts > emmet语法
Blogger Information
Blog 4
fans 0
comment 1
visits 1503
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
emmet语法
表哥
Original
522 people have browsed it

emmet语法

1. 简介

  1.  1.1 标签/元素(h1 div等)
  2.  1.2 属性（id, class等）

2.语法快捷开发

  1. 1. #表示属性(id)
  2.    .表示属性(class)
  3.    内容用{}包裹
  4.     例如    #{box} 则显示 <div id="">box</div>
  5.     例如    .{box} 则显示 <div class="">box</div>
  6.     例如    #id.123{123}  则显示 <div id="id" class="123">123</div>
  8. 2.  层级: 父子, 兄弟
  9.   2.1 父子关系用>写法
  10.      例如ul>li>a{123}
  11.         则显示 
  12.           <ul>
  13.                <li></li>
  14.            </ul>a{123}
  15.   2.2 兄弟关系用+写法
  16.       例如.title{站点名称:}+.url{php.cn}
  17.          则显示
  18.            <div class="title">站点名称:</div>
  19.             <div class="url">php.cn</div>
  20. 3. 重复生成
  21.    ul>li*3{首页}>a
  22.    则显示
  23.        <ul>
  24.         <li>首页<a href=""></a></li>
  25.         <li>首页<a href=""></a></li>
  26.         <li>首页<a href=""></a></li>
  27.     </ul>
  28. 4. 序号：@ $
  29.    4.1 $ --- 升序从1开始
  30.        如    ul.menu>li.item*4>a{item$}
  31.       显示
  32.           <ul class="menu">
  33.         <li class="item"><a href="">item1</a></li>
  34.         <li class="item"><a href="">item2</a></li>
  35.         <li class="item"><a href="">item3</a></li>
  36.         <li class="item"><a href="">item4</a></li>
  37.     </ul>
  38.     4.2 @是指定起始
  39.         ul.menu>li.item*4>a{item$@5}
  40.         显示
  41.             <ul class="menu">
  42.         <li class="item"><a href="">item5</a></li>
  43.         <li class="item"><a href="">item6</a></li>
  44.         <li class="item"><a href="">item7</a></li>
  45.         <li class="item"><a href="">item8</a></li>
  46.     </ul>
  47.     4.3 倒序则在@与数字中加上-
  48.     ul.menu>li.item*4>a{item$@-5}
  49.     显示
  50.         <ul class="menu">
  51.         <li class="item"><a href="">item8</a></li>
  52.         <li class="item"><a href="">item7</a></li>
  53.         <li class="item"><a href="">item6</a></li>
  54.         <li class="item"><a href="">item5</a></li>
  55.     </ul>

3. 表格标签

  1.    表格标签用table来写
  2.    thead 表头
  3.    tbody 表体
  4.    table>caption{学生信息表}+(thead>tr>th{表头}*8)+(tbody>tr*5>td{表体}*8)
  5.    tr（行） th和td都是列 可以认为th是加粗字体 td没有加粗
  1.    <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10. <style>
  11.     table{
  12. border-collapse:collapse ;
  13. }
  14. thead
  15. {
  16.     background-color: lightblue;
  17. }
  18. tbody
  19. {
  20.     background-color:antiquewhite;
  21. }
  22. table th,table td {
  23.     border: 1px solid;
  24.     padding: 5px;
  25. }
  26. </style>
  27.     <table>
  28.         <caption>学生信息表</caption>
  29.         <thead>
  30.             <tr>
  31.                 <th>表头</th>
  32.                 <th>表头</th>
  33.                 <th>表头</th>
  34.                 <th>表头</th>
  35.                 <th>表头</th>
  36.                 <th>表头</th>
  37.                 <th>表头</th>
  38.                 <th>表头</th>
  39.             </tr>
  40.         </thead>
  41.         <tbody>
  42.             <tr>
  43.                 <td>表体</td>
  44.                 <td>表体</td>
  45.                 <td>表体</td>
  46.                 <td>表体</td>
  47.                 <td>表体</td>
  48.                 <td>表体</td>
  49.                 <td>表体</td>
  50.                 <td>表体</td>
  51.             </tr>
  52.             <tr>
  53.                 <td>表体</td>
  54.                 <td>表体</td>
  55.                 <td>表体</td>
  56.                 <td>表体</td>
  57.                 <td>表体</td>
  58.                 <td>表体</td>
  59.                 <td>表体</td>
  60.                 <td>表体</td>
  61.             </tr>
  62.             <tr>
  63.                 <td>表体</td>
  64.                 <td>表体</td>
  65.                 <td>表体</td>
  66.                 <td>表体</td>
  67.                 <td>表体</td>
  68.                 <td>表体</td>
  69.                 <td>表体</td>
  70.                 <td>表体</td>
  71.             </tr>
  72.             <tr>
  73.                 <td>表体</td>
  74.                 <td>表体</td>
  75.                 <td>表体</td>
  76.                 <td>表体</td>
  77.                 <td>表体</td>
  78.                 <td>表体</td>
  79.                 <td>表体</td>
  80.                 <td>表体</td>
  81.             </tr>
  82.             <tr>
  83.                 <td>表体</td>
  84.                 <td>表体</td>
  85.                 <td>表体</td>
  86.                 <td>表体</td>
  87.                 <td>表体</td>
  88.                 <td>表体</td>
  89.                 <td>表体</td>
  90.                 <td>表体</td>
  91.             </tr>
  92.         </tbody>
  93.     </table>
  94. </body>
  95. </html>
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post