Blogger Information
Blog 3
fans 0
comment 0
visits 723
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
20220418 emmet语法 笔记
while
Original
401 people have browsed it

<!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>

Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post