Emmet 文本编辑器插件提升编写 HTML/CSS 代码效率

最新推荐文章于 2023-05-20 14:16:06 发布

Mr.E5

最新推荐文章于 2023-05-20 14:16:06 发布

阅读量197

点赞数 1

文章标签： css html5

本文链接：https://blog.csdn.net/weixin_45591980/article/details/108894575

版权

HTML快速创建文档标签框架

emmet创建, pycharm自带

新建一个HTML文档，输入“!”或“html:5”，然后按Tab键：

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

基本语法：

1、生成后代元素：> 大于号表示后面要生成的内容是当前标签的后代

命令：nav>ul>li

每个命令输完后按下Tab键即可快速得到代码

<div>
    <ul>
        <li><span></span></li>
    </ul>
</div>

2、生成兄弟元素：+ 加号表示后面的元素和前面的元素是兄弟元素

命令：div+p+bq 得到代码如下：

<div></div>
<p></p>
<blockquote></blockquote>

3、生成上级元素：^ 表示^{后面的元素与}前面的元素的父元素是平级，即兄弟元素。一个^表示提升一个层级，两个提升两级

命令：div+div>p>span+em^bq 得到代码如下：

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

命令：div+div>p>span+em^^bq 得到代码如下：

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

4、生成类名： . Emmet 默认的标签为 div ，如果我们不给出标签名称的话，默认就生成 div 标签。Emmet会根据父标签进行判定。比如在<ul>中输入.item，就会生成<li class="item"></li>。

命令：.container 得到代码如下：

<div class="container"></div>  直接在body输入.container

<div>  div 下输入还是div
    <div class="item"></div>
</div>

<ul>   在ul标签下输入item
    <li class="item"></li>
</ul>

如果想生成多个类名可连续写

命令： .container.wrapper.more 得到代码如下：

containerwrappermore 直接写回不识别后面的内容  如下:
<div class="container"></div>wrappermore

<div class="container wrapper"></div>more  正确

5、生成ID：#

命令：#container 得到代码如下：与上方用法一样

<div id="container"></div>

<ul>
    <li id="container"></li>
</ul>

6、生成分组：() 用括号进行分组，这样可以更加明确要生成的结构，特别是层次关系

命令：(.foo>h1)+(.bar>h2) 得到代码如下：分组是一次性能生成多个div class或id 标签

<div class="foo">
    <h1></h1>
</div>
<div class="bar">
    <h2></h2>
</div>

7、重复生成多份：* *号后面是想重复生成的份数

命令：ul>li*5 得到代码如下：

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

8、对生成内容依次编号：$ $就表示一位数字，只出现一个的话，就从 1 开始。如果出现多个，就从 0 开始。如果我想生成三位数的序号，那么要写三个$

命令：ul>li.item$*5 得到代码如下：

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
</ul>

只能这样单调的生成序号？对于强大的 Emmet 来说，肯定不会了，我们也可以在 $ 后面增加 @-来实现倒序排列：
命令：ul>li.item$@-*5 得到代码如下：

<ul>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
    <li class="item2"></li>
    <li class="item1"></li>
</ul>

同样，我们也可以使用 @N 指定开始的序号

命令：ul>li.item$@3*5 得到代码如下：

<ul>   其实是这样的, 从3开始, 累加5个数
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    <li class="item6"></li>
    <li class="item7"></li>
</ul>

9、生成自定义属性：[attr] 中括号里面的内容是你想添加的属性

命令：td[rowspan=2 colspan=3 title]得到代码如下： td是可以换成任意标签, 需要注意的是, 中括号内容必须是标签内有的属性

<td rowspan="2" colspan="3" title=""></td>
div[id style]----> <div id="" style=""></div>

10、生成文本内容：{} 大括号里面是你想添加的文本内容

命令：a{Click me} 得到代码如下：

<a href="">click me</a>

还可以这么用 p>{Click }+a{here}+{ to continue} 得到代码如下：

<p>click<a href="">here</a>to continue</p>

注意： 在写命令的时候，你可能为了代码的可读性，使用一些空格什么的排版一下，这将会导致代码无法使用。但是{}[]中可存在空格

更多使用方法

输入inp
<input type="text" name="" id="">

input:url  url可选, 可以是很多值
如: search, hidden, text, email, url, password, datetime, date, month, week, time, ...
<input type="url" name="" id="">

select
<select name="" id=""></select>

option
<option value=""></option>

textarea
<textarea name="" id="" cols="30" rows="10"></textarea>

最后一个 .header>ul.nav>li*5>a[style=color:#fff]>span{name}

<div class="header">
    <ul class="nav">
        <li><a href="" style="color:#fff"><span>name</span></a></li>
        <li><a href="" style="color:#fff"><span>name</span></a></li>
        <li><a href="" style="color:#fff"><span>name</span></a></li>
        <li><a href="" style="color:#fff"><span>name</span></a></li>
        <li><a href="" style="color:#fff"><span>name</span></a></li>
    </ul>
</div>

解释;

pass

Mr.E5

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Emmet 文本编辑器插件提升编写 HTML/CSS 代码效率

HTML快速创建文档标签框架emmet创建, pycharm自带新建一个HTML文档，输入“!”或“html:5”，然后按Tab键：<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-sc
复制链接

扫一扫