PHP学习笔记之emment语法(一)

发布于：2022-07-04 12:44:19  栏目：技术文档

emment语法（一）

1.简介

Emmet语法的前身是Zen coding,它使用缩写,来提高HTML/CSS的编写速度,VScode内部已经集成该语法。

官方手册：https://docs.emmet.io/cheat-sheet/

快速生成HTML结构语法
生成CSS样式语法

2.快速生成HTML

1.生成默认页面结构

! + 回车/Tab
html:5 + 回车/Tab

2.生成div

div + Tab
div*3 + Tab
.class
#id
<div id="lp"></div>

3.后代节点 >

ul>li
ul>li*3
div>(header>ul>li*2>a)+footer>p

4.兄弟级 +div+p

输出结果：<div></div><p></p>

5.类名带序号

div.title$*3
ul>li.list$*5

同时带class和ID或者多个class
form#search.wide
p.class1.class2.class3

ul>li.item$$$*5输出

<ul>
    <li class="item001"></li>
    <li class="item002"></li>
    <li class="item003"></li>
    <li class="item004"></li>
    <li class="item005"></li>
</ul>

6.生成指定序号（升序）

@
ul.menu>li.list*4>a{导航$}
ul.menu>li.list*4>a{导航$@3} //指定开始序号
ul.menu>li.list$@4*5>a{} //升级版

class序号
ul.menu>li.list$*4>a{导航$}

7.生成指定序号（倒序）

@-
ul.menu>li.list*4>a{导航$@-}
ul.menu>li.list$@-*4>a{}
ul>li*5>a.nm${}
ul>li*5>a.nm${item$@-5}
ul>li*5>a.nm$@-9{item$@-5}

3.自定义属性

缩写：p[title="hello"]

输出：
<p title="hello"></p>

缩写：td[rowspan=2 colspan=3 title]

输出：
<td rowspan="2" colspan="3" title=""></td>
rowspan 行
colspan 列

4.表格

table>caption{xuesheng}+(thead>tr>th{title}8)+(tbody>tr5>td{item}*8)

相关推荐