<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
width: 200px;
width: 200px;
/ w200 /
background-color: red;
background-color: red;
/ bgc /
}
</style>
</head>
<body>
<!-- id,class -->
<!-- 一键注释:先选中代码按ctal+k,再ctal+c -->
<!-- 一件取消注释:先选中代码按ctrl+k,再ctrl+u,也可以再按一次ctrl+k+u/ctrl+k+c -->
<!-- id,class也可以再按一次ctrl+k+u/ctrl+k+c -->
<!-- -------------- -->
<div id="box"></div>
<!-- 上一行是手打的,一下都是使用emmet语法写的 -->
<div id="box"></div>
<!-- #box -->
<div class="box"></div>
<!-- div.box -->
<div class="actie"></div>
<!-- .actie -->
<!-- -------------- -->
<p>hello world</p>
<!-- 上一行是手打的,一下都是使用emmet语法写的 -->
<p>hello world</p>
<!-- p{hello woeld} -->
<!-- -------------- -->
<!-- 下面是层级快速生成 -->
<div>
<p>
<a href=""></a>
</p>
</div>
<!-- 以上是手打的,一下都是使用emmet语法写的 -->
<div>
<p><a href=""></a></p>
</div>
<!-- div>p>a 上下级-->
<div></div>
<p></p>
<a href=""></a>
<!-- div+p+a 兄弟平级 -->
<div>
<p></p>
</div>
<a href=""></a>
<!-- div>p^a 在上下级里面 写出上级的兄弟级 -->
<!-- 下面是重复标签快速生成 -->
<!-- 重复*n -->
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<!-- a*5 -->
<a href="">link</a>
<a href="">link</a>
<a href="">link</a>
<a href="">link</a>
<a href="">link</a>
<!-- a{link}*5 -->
<ul>
<li>
<a href="">link</a>
<a href="">link</a>
<a href="">link</a>
<a href="">link</a>
<a href="">link</a>
</li>
</ul>
<!-- ui>li>a{link}*5 -->
<!-- -------------- -->
<!-- 下面是属性快速写入 -->
<a href="https//www.baidu.com">baidu</a>
<!-- a[href="https//www.baidu.com"]{baidu} 属性内容用中括号-->
<div id="header"></div>
<!-- div#header -->
<div id="header"></div>
<!-- #header -->
<div id="header"></div>
<!-- div[id="header"] -->
<!-- 下面是序号$快速写入 -->
<ui>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
</ui>
<!-- ui>li{item$}*5 此为正序-->
<ui>
<li><a href="">link1</a></li>
<li><a href="">link2</a></li>
<li><a href="">link3</a></li>
<li><a href="">link4</a></li>
<li><a href="">link5</a></li>
</ui>
<!-- ui>li*5>a{link$} -->
<ui>
<li><a href="">link01</a></li>
<li><a href="">link02</a></li>
<li><a href="">link03</a></li>
<li><a href="">link04</a></li>
<li><a href="">link05</a></li>
</ui>
<!-- ui>li*5>a{link$$} 前导0-->
<ui>
<li><a href="">link5</a></li>
<li><a href="">link6</a></li>
<li><a href="">link7</a></li>
<li><a href="">link8</a></li>
<li><a href="">link9</a></li>
</ui>
<!-- ui>li*5>a[link$@5] 从某个数字开始-->
<ui>
<li><a href="">link9</a></li>
<li><a href="">link8</a></li>
<li><a href="">link7</a></li>
<li><a href="">link6</a></li>
<li><a href="">link5</a></li>
</ui>
<!-- ui>li*5>a{link$@-5} 倒序-->
</body>
</html>
