search

博客列表 >Emmet语法

Emmet语法

云中
云中原创
2021年12月27日 00:13:08388浏览
  2. <!DOCTYPE html>
  3. <html lang="en">
  4.   <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>Document</title>
  9.   </head>
  10.   <body>
  11.     <!-- #id  自动生成 id -->
  12.     <div id="id"></div>
  13.     <!-- p#pid{pID}  {}:内容 -->
  14.     <p id="pid">pID</p>
  16.       <!-- .class 自动生成 class-->
  17.     <div class="class"></div>
  18.     <!-- p.pclass{p类名} -->
  19.     <p class="pclass">p类名</p>
  21.     <!-- div>(table>tr*5>td*3>a{导航$})+p{emmet自动生成}  -->
  22.     <!-- *:重复生成元素 , >：下一层 ，+： 同层 ，  $ : 自动编号， （）：分组 ， -->
  23.     <div>
  24.       <table>
  25.         <tr>
  26.           <td><a href="">导航1</a></td>
  27.           <td><a href="">导航2</a></td>
  28.           <td><a href="">导航3</a></td>
  29.         </tr>
  30.         <tr>
  31.           <td><a href="">导航1</a></td>
  32.           <td><a href="">导航2</a></td>
  33.           <td><a href="">导航3</a></td>
  34.         </tr>
  35.         <tr>
  36.           <td><a href="">导航1</a></td>
  37.           <td><a href="">导航2</a></td>
  38.           <td><a href="">导航3</a></td>
  39.         </tr>
  40.         <tr>
  41.           <td><a href="">导航1</a></td>
  42.           <td><a href="">导航2</a></td>
  43.           <td><a href="">导航3</a></td>
  44.         </tr>
  45.         <tr>
  46.           <td><a href="">导航1</a></td>
  47.           <td><a href="">导航2</a></td>
  48.           <td><a href="">导航3</a></td>
  49.         </tr>
  50.       </table>
  51.       <p>emmet自动生成</p>
  52.     </div>
  54.     <!-- .div+p -->
  55.     <div class="div"></div>
  56.     <p></p>
  58.     <!-- .div>p{上一层}>a{子元素}^p{父元素层}  ^：上层位置 -->
  59.     <div class="div">
  60.       <p>上一层<a href="">子元素</a></p>
  61.       <p>父元素层</p>
  62.     </div>
  64.     <!-- .div>table>tr.item$*2>td*3{序号$@5}  @： 指定从特殊号码开始编号-->
  65.     <div class="div">
  66.       <table>
  67.         <tr class="item1">
  68.           <td>序号5</td>
  69.           <td>序号6</td>
  70.           <td>序号7</td>
  71.         </tr>
  72.         <tr class="item2">
  73.           <td>序号5</td>
  74.           <td>序号6</td>
  75.           <td>序号7</td>
  76.         </tr>
  77.       </table>
  78.     </div>
  79.     <style>
  80.       .item1 {
  81.         background-color: red;
  82.       }
  83.     </style>
  85.     <!-- div[style]  []:属性-->
  86.     <div style=""></div>
  88.     <!-- .userdata[data-use]  data- :自定义属性以 data- 开头 -->
  89.     <div class="userdata" data-use="自定义属性">自定义属性</div>
  90.   </body>
  91. </html>
上一条：css样式 来源 规则 选择器权重下一条：css伪类选择器，字体图标，盒模型及自适应布局
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议