HTML开发神器-Emmet学习

最新推荐文章于 2022-09-28 16:46:58 发布

Programmer.杨

最新推荐文章于 2022-09-28 16:46:58 发布

阅读量400

点赞数 1

分类专栏：前端技术-HTML 文章标签： emmet html 介绍详解学习

本文链接：https://blog.csdn.net/ywb88888888/article/details/102845059

版权

前端技术-HTML 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

Emmet简介：

通常大多数的文本编辑器都会允许我们存储和重用一些代码块，我们称之为 “片段或代码模板”。虽然片段能很好地推动我们的生产力，但大多数的实现都有这样一个缺点：我们必须先定义代码片段，并且不能再运行时进行拓展。而Emmet把片段这个概念提高到了一个新的层次：我们可以设置CSS形式的能够动态被解析的表达式，然后根据输入的缩写来得到相应的内容。Emmet很成熟的并且非常适用于编写HTML/XML和CSS代码的前端开发人员，但也可以用于编程语言。它支持大多数流行文本编辑器，极大的改善了开发html/css的效率

句法：

类似于css选择器的语法，用来控制元素在文档树中的位置及其属性
eg: nav>div#nav+ul>li*5>a+span

<nav>
	<div id="nav"></div>
	<ul>
		<li><a href=""></a><span></span></li>
		<li><a href=""></a><span></span></li>
		<li><a href=""></a><span></span></li>
		<li><a href=""></a><span></span></li>
		<li><a href=""></a><span></span></li>
	</ul>
</nav>

HTML 5 基本文档结构生成：

eg1: html:5
eg2: !

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

</body>
</html>

关系符：

关系符 >：用于定位嵌套关系的元素，">" 左右两端分别是父元素、子元素
eg: nav>div>ul>li

<nav>
	<div>
		<ul>
			<li></li>
		</ul>
	</div>
</nav>

关系符 +：用于定位同级关系的元素，"+"左右两端分别是上下两个元素
eg: nav>div>ul>li>p+span+strong

<nav>
    <div>
        <ul>
            <li>
                <p></p>
                <span></span>
                <strong></strong>
            </li>
        </ul>
    </div>
</nav>

关系符 ^：用于在HTML片段中爬到上一层并更改应该出现以下元素的上下文
eg: nav>div>q>strong+em^blockquote

<nav>
    <div>
        <q>
            <strong></strong><em></em>
        </q>
        <blockquote></blockquote>
    </div>
</nav>

^也可以连续多个使用
eg: nav>div>div>div^^^strong

<nav>
    <div>
        <div>
            <div></div>
        </div>
    </div>
</nav>
<strong></strong>

关系符 * ：用于定义输出元素的次数
eg: div>ul>li*5>a+span

<div>
    <ul>
        <li><a href=""></a><span></span></li>
        <li><a href=""></a><span></span></li>
        <li><a href=""></a><span></span></li>
        <li><a href=""></a><span></span></li>
        <li><a href=""></a><span></span></li>
    </ul>
</div>

关系符 ()：用于将定义代码片段的缩写分组为复杂的结构
eg: article>(header>div+div>img+h1+p)+(footer>div>ul>li*5>h4+q)

<article>
    <header>
        <div></div>
        <div>
            <img src="" alt="">
            <h1></h1>
            <p></p>
        </div>
    </header>
    <footer>
        <div>
            <ul>
                <li>
                    <h4></h4>
                    <q></q>
                </li>
                <li>
                    <h4></h4>
                    <q></q>
                </li>
                <li>
                    <h4></h4>
                    <q></q>
                </li>
                <li>
                    <h4></h4>
                    <q></q>
                </li>
                <li>
                    <h4></h4>
                    <q></q>
                </li>
            </ul>
        </div>
    </footer>
</article>

以上分组也可以用^代替，如下：
eg: article>header>div+div>img+h1+p^^footer>div>ul>li*5>h4+q

<article>
    <header>
        <div></div>
        <div>
            <img src="" alt="">
            <h1></h1>
            <p></p>
        </div>
    </header>
    <footer>
        <div>
            <ul>
                <li>
                    <h4></h4>
                    <q></q>
                </li>
                <li>
                    <h4></h4>
                    <q></q>
                </li>
                <li>
                    <h4></h4>
                    <q></q>
                </li>
                <li>
                    <h4></h4>
                    <q></q>
                </li>
                <li>
                    <h4></h4>
                    <q></q>
                </li>
            </ul>
        </div>
    </footer>
</article>

属性运算符：

属性运算符 #：将id属性指向指定的元素
eg: div#header1

<div id="header1"></div>

属性运算符 .：将class属性指向指定的元素
eg：div#header2.clearfix

<div id="header2" class="clearfix"></div>

属性运算符 [ ]：自定义属性与相应的值
eg: input#in1.form-control[name=“queryBtn” value=“提交” type=“button” disabled=“disabled”]

<input type="button" id="in1" class="form-control" name="queryBtn" value="提交" disabled="disabled">

属性运算符 $ ：在元素的名称、属性的名称或属性值中输出当前重复元素的数量
eg: div>ul>li#li$*5

<div>
    <ul>
        <li id="li1"></li>
        <li id="li2"></li>
        <li id="li3"></li>
        <li id="li4"></li>
        <li id="li5"></li>
    </ul>
</div>

属性运算符 @-：用在 $ 之后，用来更改 $ 的递增方向
eg: div>ul>li#lili@-*5

 <div>
    <ul>
        <li id="lili5"></li>
        <li id="lili4"></li>
        <li id="lili3"></li>
        <li id="lili2"></li>
        <li id="lili1"></li>
    </ul>
</div>

属性运算符 @N：用在 $ 之后，用来更改 $ 的递增基数
eg: div>ul>li#demo$@3*5

<div>
    <ul>
        <li id="demo3"></li>
        <li id="demo4"></li>
        <li id="demo5"></li>
        <li id="demo6"></li>
        <li id="demo7"></li>
    </ul>
</div>

综合示例：倒序、基数不为1
eg:div>ul>li#link$@-5*5

<div>
    <ul>
        <li id="link9"></li>
        <li id="link8"></li>
        <li id="link7"></li>
        <li id="link6"></li>
        <li id="link5"></li>
    </ul>
</div>

案文 {}：使用大括号向元素添加文本

用法一：
eg: div{他山之石，可以攻玉}+q{时间就像海绵里的水，想挤总能挤出来的}+cite{鲁迅}

<div>他山之石，可以攻玉</div>
<q>时间就像海绵里的水，想挤总能挤出来</q>

用法二：
当元素直接加{}时，元素与{}为一个整体，它们与后面追加元素是同级关系，当元素与 {} 用 > 连接时，它与后面追加元素 （包括{}） 是父子关系
eg: div>{他山之石，可以攻玉}+q{时间就像海绵里的水，想挤总能挤出来的}+cite{鲁迅}

<div>他山之石，可以攻玉<q>时间就像海绵里的水，想挤总能挤出来的</q><cite>鲁迅</cite></div>

lorem：自动填充文本
eg: div.showdiv>ul>li#link$@-20*5>lorem20

<div class="showdiv">
    <ul>
        <li id="link20">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur dignissimos ducimus
            illo nam nulla numquam pariatur perferendis perspiciatis quae suscipit!
        </li>
        <li id="link19">Ipsam, libero, repellat? Accusamus aliquam aspernatur dolorum ducimus error ex, expedita
            impedit iure magnam, maiores, perspiciatis qui rem sunt ut.
        </li>
        <li id="link18">Dignissimos inventore, laboriosam laborum nam odio officiis optio perspiciatis possimus
            quaerat sapiente. Animi blanditiis impedit maiores voluptate! Autem numquam, quam!
        </li>
        <li id="link17">Eum molestias mollitia optio quasi voluptas. Dicta doloribus eveniet impedit iste itaque
            officiis quo ratione rerum? Corporis quibusdam quos sed.
        </li>
        <li id="link16">Architecto aut consequuntur cum cumque delectus doloremque dolores enim fugiat labore
            laboriosam laudantium libero minus modi, nisi quisquam saepe soluta.
        </li>
    </ul>
</div>

css缩写：当使用缩写定义css属性时，Emmet会自动附加兼容不同浏览器的前缀

<style type="text/css">
    body {
        /* bdrs */
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;

        /* bg */
        background: #000;
        
        /* lh */
        line-height: 1000px;
        
        /* fs */
        font-style: italic;
        
        /* co */
        color: red;
        
        /* fl */
        float: left;
        
        ... ...
    }
</style>

注意事项：

1.表达式中不能使用空格，空间是停止符号，Emmet停止缩略语解析的地方，如果使用空格，Emmet会停止解析
2.每个表达式可以写在支持Emmet文本的任何地方，不用另起一行

Programmer.杨

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML开发神器-Emmet学习

Emmet简介：       通常大多数的文本编辑器都会允许我们存储和重用一些代码块，我们称之为 “片段或代码模板”。虽然片段能很好地推动我们的生产力，但大多数的实现都有这样一个缺点：我们必须先定义代码片段，并且不能再运行时进行拓展。而Emmet把片段这个概念提高到了一个新的层次：我们可以设置CSS形式的能够动态被解析的表达...
复制链接

扫一扫

专栏目录