前端Emmet的使用

最新推荐文章于 2024-05-24 23:45:01 发布

以南_ttrg

最新推荐文章于 2024-05-24 23:45:01 发布

阅读量194

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/qq_41965731/article/details/108629427

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

Emmet快速语法

一、Emmet的作用

emmet可以快速的生成我们需要的一些代码，使得我们编写代码更加轻便。

二、Emmet的使用

emmet语法不是说可以直接在前端软件中运用，Emmet是一种插件，大部分编辑器都支持。

注释：在输入代码后按 tab 键运行。且代码间不可以加入空格。

emmet语法名称	操作符
Child（子标签）	>
Sibling (兄弟标签)	+
Climb-up（上级元素）	^
Grouping（分组）	( )
Multiplication（重复多份）	*
Item numbering(编号)	$
ID	#
Class（类）	.
custom attributes(自定义属性)	[ ]
Text(文本)	{ }
html页面模板	!
隐式标签

子标签： div>p>span

    <div>
        <p><span></span></p>
    </div>

兄弟标签：div+p+span

    <div></div>
    <p></p><span></span>

上级标签：div+div>p>span+em^bq

    <div></div>
    <div>
        <p>
            <span></span>
            <em></em>
        </p>
        <blockquote></blockquote>
    </div>

分组标签：div>(p+span)

    <div>
        <p></p>
        <span></span>
    </div>

重复多份：ul>li*5

    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

编号：ul>li.temp$*5

    <ul>
        <li class="temp1"></li>
        <li class="temp2"></li>
        <li class="temp3"></li>
        <li class="temp4"></li>
        <li class="temp5"></li>
    </ul>

ID:div#one>ul#two>li*3

    <div id="one">
        <ul id="two">
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

类Class ：div.one>ul.two>li*3

    <div class="one">
        <ul class="two">
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

自定义属性: div[title="标题"]{内容}

    <div title="标题">内容</div>

文本：div{文本一}>ul>li{重复文本}*3

    <div>文本一
        <ul>
            <li>重复文本</li>
            <li>重复文本</li>
            <li>重复文本</li>
        </ul>
    </div>

HTML的页面模板 : ！

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>

隐藏便签：

.class

    <div class="class"></div>

em>.class

<em><span class="class"></span></em>

div>.one>.two>.three

<div>
    <div class="one">
        <div class="two">
            <div class="three"></div>
        </div>
    </div>
</div>

p>.one>.two

<p>
    <span class="one">
        <span class="two">
        </span>
    </span>
</p>

span>.one>.two

<span>
    <span class="one">
        <span class="two">
        </span>
    </span>
</span>

ul>.one

<ul>
    <li class="one"></li>
</ul>

table>.row>.col

<table>
    <tr class="row">
        <td class="col"></td>
    </tr>
</table>

以南_ttrg

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端Emmet的使用

一、Emmet的作用emmet可以快速的生成我们需要的一些代码，使得我们编写代码更加轻便。二、Emmet的使用emmet语法不是说可以直接在前端软件中运用，Emmet是一种插件，大部分编辑器都支持。注释：在输入代码后按 tab 键运行。且代码间不可以加入空格。emmet语法名称操作符 Child（子标签） > Sibling (兄弟标签) + Climb-up（上级元素） ^ Grouping（分组） () Mu...
复制链接

扫一扫