[Day20] Emmet 学习笔记 - 层级篇

预处理器可以透过加快撰写程序的速度，但是自己的打字速度提升有限（换了Mac之後还变慢不少），Emmet这个快速产出格式的工具就大有帮助，虽然他已经存在许久，但一直以来都只使用已知的一点功能，今天就来好好学习他到底有哪些方便的写法。

参考文件
Emmet Cheat Sheet

HTML基本功能

  1. 产出基本 HTML结构：!
!  
// 按Tab产出
<!DOCTYPE html>
<html>
.....
// 一些基本设定
....
  1. 子标签：>
ul>li  
//按Tab产出
<ul>
  <li></li>
</ul>
  1. 同级标签：+
p+div  
// 按Tab产出
<p></p>
<div></div>
  1. 上层标签：^ (加几个就往上几层)
ul>li^div  
// 按Tab产出
<ul>
  <li></li>
</ul>
<div></div>
// 多个^
ul>li>span^^div  
// 按Tab产出
<ul>
  <li><span></span></li>
</ul>
<div></div>
  1. 群组：()
div>(ul>li>span)+div>p
// 按Tab产出
<div>
  <ul>
    <li><span></span></li>
  </ul>
  <div>
    <p></p>
  </div>
</div>
  1. 复数生成：*
div*3
// 按Tab产出
<div></div>
<div></div>
<div></div>
  1. 标签带ID或class(可以混用)：# 和 .
div#a.b.c
// 按Tab产出
<div id="a" class="b c"></div>
  1. 标签带属性：[]（中括号）
p[hello="world"]
// 按Tab产出
<p hello="world"></p>
  1. 标签带文字（textContent）：{}（大括号）
p{hello, world}
// 按Tab产出
<p>hello, world</p>
  1. 自动判断子层标签格式(某些固定元素搭配可以不打标签名称，只打className或ID)
// 预设都是 div
#id+.class
// 按Tab产出
<div id="id"></div>
<div class="class"></div>

// em内层为 span
em>.a
// 按Tab产出
<em><span class="a"></span></em>

// ul内层为 li
ul>.b
// 按Tab产出
<ul>
    <li class="b"></li>
</ul>

// table内层是 tr > td
table>.row>.col
<table>
    <tr class="row">
        <td class="col"></td>
    </tr>
</table>
  1. 带入变数流水号：$ (用法较多元)
// 1.基本款
div.no$*3
// 按Tab产出
<div class="no1"></div>
<div class="no2"></div>
<div class="no3"></div>

// 2.带多个变数
div.no$[title=attr$]{Content$}*3
// 按Tab产出
<div class="no1" title="attr1">Content1</div>
<div class="no2" title="attr2">Content2</div>
<div class="no3" title="attr3">Content3</div>

// 3.自定流水号长度
div.no$$$$$*3
// 按Tab产出
<div class="no00001"></div>
<div class="no00002"></div>
<div class="no00003"></div>

// 4.递减流水号（多一个＠参数）
div.no$@-*3
// 按Tab产出
<div class="no1"></div>
<div class="no2"></div>
<div class="no3"></div>

// 5.指定区间流水号(第一个数字是起始值，第二个数字是产出数量)
div.no$@2*4
// 按Tab产出
<div class="no2"></div>
<div class="no3"></div>
<div class="no4"></div>

div.no$@-2*4
// 按Tab产出
<div class="mo5"></div>
<div class="mo4"></div>
<div class="mo3"></div>
<div class="mo2"></div>

在练习的时候脑子得非常清晰，不然层级多的时候实在很容易卡住！


<<:  [Day14] 轻松掌握订单&付款状态(说明)

>>:  [Day13] 第十三章-完成登入API (产生jwt token给前端使用)

musl libc 简介与其 porting（一）

musl libc的起源为当时glibc於设计上有诸多不足之处，例如全静态连结因NSS机制而有状况、...

C# 如果class本身当参数传递是 call by reference , 那前面加上ref有何用呢?

作为IT邦的第一篇文章 就来开这个主题好了 public class ValueModel { pu...

js 学习：动态画线条

使用的是three.js组件画线条； 每秒画一次，一直画下去； 要先装好three.js <!...

day1:参加的动机及大纲

这次的参赛是为了写让自己更多学习 react 更多更好的写法，会从 Javascript 和 Rea...

[DAY28] 战略设计的别扭事件

上一篇提到，要深入了解需求，需要大量的沟通，对应到 DDD 中非常重要的一环——与领域专家一同开会。...