Emmet 语法

最新推荐文章于 2021-09-03 21:48:33 发布

少年张狂

最新推荐文章于 2021-09-03 21:48:33 发布

阅读量103

点赞数

本文链接：https://blog.csdn.net/weixin_41909678/article/details/118054765

版权

目标

Emmet 语法

Emmet 语法快速生成 HTML 结构语法

Emmet 语法快速生成 CSS 样式语法

快速格式化代码

目标

1. 能使用 Emmet 语法

更快速高效地写 HTML 标签

2. 能够使用 CSS 复合选择器

选择标签时更加的自由

3. 能够写出伪类选择器的使用规范

4. 能够说出元素有几种显示模式

5. 能够写出元素显示模式的相互转换代码

了解为什么不同的标签可以有不同的显示形式

6. 能够写出背景图片的设置方式

背景颜色和背景图片的设置

7. 能够计算 CSS 的权重

8. CSS的三大特性：继承性、层叠性、优先级

9. CSS 的注释

Emmet 语法

前身是 Zen coding，它使用缩写，来提高 html / css 的编写速度

1. 快速生成 HTML 结构语法

2. 快速生成 CSS 样式语法

Emmet 语法快速生成 HTML 结构语法

1. 生成标签：直接输入标签名，按 tab 键即可

2. 如果要生成多个相同的标签，加上 " * " 就可以了。比如 div*3 可以快速生成三个 div 标签

3. 如果有父子级关系的标签，可以用 > 。比如 ul > li 就可以了

4. 如果有兄弟关系的标签，用 " + " 就可以了。比如 div + p

5. 如果生成带有类名或者 id 名的，直接写 .demo 或者 #two tab 键就可以了

6. 如果生成的 div 类名是有顺序的，可以用自增符号 $

7. 如果想要在生成的标签内部写内容可以用 { } 表示

（上述命令写的时候中间不能有空格）

<!-- 生成多个相同的标签 -->
<!-- p*3 -->
<p></p>
<p></p>
<p></p>

<!--生成父子级关系的标签-->
<!-- ul>li -->
<ul>
    <li></li>
</ul>
<!-- div>span -->
<div>
    <span></span>
</div>

<!-- 生成兄弟关系的标签 -->
<!-- div+p -->
<div></div>
<p></p>

<!-- 生成带有类名或 id 名的样式 -->
<!-- 默认给 div 生成带有类名或 id名 的样式 -->
<!-- .nav -->
<div class="nav"></div>
<!-- #banner -->
<div id="banner"></div>

<!-- 给指定的标签生成带有类名或 id 名的样式 -->
<!-- p.omg -->
<p class="omg"></p>
<!-- p#omg -->
<p id="omg"></p>

<!-- 生成带有顺序的类名 -->
<!-- .demo$*3 -->
<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>

<!-- 生成的标签默认里面带有几个文字 -->
<!-- div{海上生明月,天涯共此时.} -->
<div>海上生明月,天涯共此时</div>

<!-- div{海上生明月,天涯共此时}*3 -->
<div>海上生明月,天涯共此时</div>
<div>海上生明月,天涯共此时</div>
<div>海上生明月,天涯共此时</div>

<!-- div{$}*3 -->
<div>1</div>
<div>2</div>
<div>3</div>

<!--多个语法同时使用-->
<!-- ul>li#edg -->
<ul>
    <li class="edg"></li>
</ul>

<!-- div+p*3 -->
<div></div>
<p></p>
<p></p>
<p></p>

<!-- h$*3 -->
<h1></h1>
<h2></h2>
<h3></h3>