<!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>Emmet语法使用</title>
<style>
/* 1、比如w200按tab可以生成width: 200px; */
.one {
/* 输tac按tab键 */
text-align: center;
/* 输ti2em按tab键 */
text-indent: 2em;
/* 输w100px按tab键 */
width: 100px;
/* 输h200px按tab键 */
height: 200px;
/* 输lh26px按tab键 */
line-height: 26px;
/* 输tdu按tab键 */
text-decoration: underline;
}
/* 2、比如lh26按tab可以生成line-height: 26px; */
</style>
</head>
<body>
<!--
Emmet语法快速生成HTML标签和CSS样式
A.快速生成HTML结构语法
1、生成标签直接输入标签按tab键即可比如div然后tab键，就可以生成<div></div>。
2、如果想要生成多个相同标签加上*就可以了，比如div*3就可以快速生成3个div。
3、如果有父子级关系的标签可以用>，比如ul>li就可以了。
4、如果有兄弟关系的标签用+就可以了，比如div+p。
5、如果生成带有类名或者id名称的，直接写.demo或者#two按tab键就可以了。
6、如果生成的div类名是有顺序的，可以用自增符号$。
7、如果想要在生成的标签内部写内容可以用{}表示。
B.快速生成CSS样式语法
CSS基本采取简写形式即可。
1、比如w200按tab可以生成width: 200px;
2、比如lh26按tab可以生成line-height: 26px;
-->
<!-- 1、生成标签直接输入标签按tab键即可比如div然后tab键，就可以生成<div></div>。 -->
<!-- 输div按tab键 -->
<div></div>
<!-- 2、如果想要生成多个相同标签加上*就可以了，比如div*3就可以快速生成3个div。 -->
<!-- 输div*3按tab键 -->
<div></div>
<div></div>
<div></div>
<!-- 3、如果有父子级关系的标签可以用>，比如ul>li就可以了。 -->
<!-- 输ul>lil按tab键 -->
<ul>
<li></li>
</ul>
<!-- 4、如果有兄弟关系的标签用+就可以了，比如div+p。 -->
<!-- 输div+p按tab键 -->
<div></div>
<p></p>
<!-- 5、如果生成带有类名或者id名称的，直接写.demo或者#two按tab键就可以了。 -->
<!-- 输.demo按tab键 -->
<div class="demo"></div>
<!-- 输#two按tab键 -->
<div id="two"></div>
<!-- 输ul>li.one按tab键 -->
<ul>
<li class="one">输ul>li.one按tab键</li>
</ul>
<!-- 输span.gray按tab键 -->
<span class="gray"></span>
<!-- 6、如果生成的div类名是有顺序的，可以用自增符号$。 -->
<!-- 输入.demo$*5按tab键 -->
<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>
<div class="demo4"></div>
<div class="demo5"></div>
<!-- 输入#demo$*5按tab键 -->
<div id="demo1"></div>
<div id="demo2"></div>
<div id="demo3"></div>
<div id="demo4"></div>
<div id="demo5"></div>
<!-- 7、如果想要在生成的标签内部写内容可以用{}表示。 -->
<!-- 输div{我喜欢小动物}按tab键 -->
<div>我喜欢小动物</div>
<!-- 输div{我喜欢数$}*6按tab键 -->
<div>我喜欢数1</div>
<div>我喜欢数2</div>
<div>我喜欢数3</div>
<div>我喜欢数4</div>
<div>我喜欢数5</div>
<div>我喜欢数6</div>
</body>
</html>
220
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
