文章目录
HTML部分
1. 添加类,id,文本和属性
div.box#box ===>
h1{我是标题} ===>
我是标题
请注意在VsCode新版本中按Tab不再默认启用Emmet展开缩写!需要在首选项配置中将emmet.triggerExpansionOnTab设置为true值!
2. 嵌套和分组
符号 | 表示 |
---|---|
> | 子元素符号,表示嵌套的元素 |
+ | 同级标签符号 |
^ | 可以使该符号前的标签提升一行 |
() | 分组 |
h1+h2
p>span^p
(.foo>h1)+(.bar>h2)
3. 隐式标签
在过去版本中,可以省略掉div,即输入.item即可生成< div class=“item”>< /div>。现在如果只输入.item,则Emmet会根据父标签进行判定。比如在< ul>中输入.item,就会生成< li class=“item”>< /li>
父亲 | 自动补全 |
---|---|
ul、ol | li |
table, tbody, thead and tfoot | tr |
tr | td |
select and optgroup | option |
em | span |
4. 定义多个元素* 和 编号$
<!-- 自增符号:$,ul>li.item$*4,类名自增 -->
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
</ul>
<!-- h$[title=item$]{little boy$}*3 ,
标签名和属性值,标签内容一起自增-->
<h1 title="item1">little boy1</h1>
<h2 title="item2">little boy2</h2>
<h3 title="item3">little boy3</h3>
<!-- ul>li.item$$*3 ,自增从0开始,
再加一个$,$$*3-->
<ul>
<li class="item01"></li>
<li class="item02"></li>
<li class="item03"></li>
</ul>
<!-- ul>li.item$@-*3 ,自增顺序倒着来,
后面加@- ,$@-*3 -->
<ul>
<li class="item3"></li>
<li class="item2"></li>
<li class="item1"></li>
</ul>
<!-- ul>li.item$@3*6 ,自增顺序,按照指定阶段来显示,
后面加上@数字*数字,$@3*6,从3开始 共6个序号,包含起始数字本身,序号范围:就是3-(3+6-1)3~8 -->
<ul>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
<li class="item6"></li>
<li class="item7"></li>
<li class="item8"></li>
</ul>
5. 添加虚拟文字
默认的 lorem 每次都是30个单词,可以指定单词个数,后面写上数字,lorem10 将生成10个单词的虚拟文本
<!-- ul>.item*3>lorem5 -->
<ul>
<li class="item">Lorem ipsum dolor sit amet.</li>
<li class="item">A itaque architecto quas recusandae.</li>
<li class="item">Deleniti, necessitatibus porro perspiciatis ab! </li>
</ul>
6. 其它
CSS部分
1. 属性和属性值的缩写
- 连字符 - ,连接多个属性值
- 使用 加号 + ,连接多个属性
- 两个连字符 - -,一个是表示属性值连接的,一个是表示负值的
m10——》 margin: 10px;
/*m10-20,带两个属性值的*/
margin: 10px 20px;
/*m-10-20 带一个负值 一个正值的*/
margin: -10px 20px;
/*m-10--20 带两个负值的*/
margin: -10px -20px;
/*m-10--20--30 带三个负值的*/
margin: -10px -20px -30px;
/*★ 同时定义多个属性*/
/*m10+bd20,同时定义两个属性*/
margin: 10px;
border: 20px;
/*m10+bd20+bg#3,同时定义三个属性*/
margin: 10px;
border: 20px;
background: #333;
/*m10-20+bd20,同时定义两个属性,第一个属性两个属性值*/
margin: 10px 20px;
border: 20px;
2. 属性值的单位
/*★ 属性值的单位*/
/*m10 整数值,默认单位是px*/
margin: 10px;
/*m10.5 小数值,默认单位是em*/
margin: 10.5em;
/*属性值单位的简写 */
/*m10p*/
margin: 10%;
/*m10e*/
margin: 10em;
/*m10x*/
margin: 10ex
其它
/*p!+c#3! */
padding: !important;
color: #333 !important;
参考链接:
非常感谢!