Emmet学习笔记

最新推荐文章于 2021-01-24 21:51:33 发布
最新推荐文章于 2021-01-24 21:51:33 发布
阅读量401 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liyuxing6639801/article/details/77430473
版权

学习网址：Emmet使用手册

语法：

后代：>

缩写：nav>ul>li

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

兄弟：+

缩写div+p+bq

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

上级：^

缩写：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>

分组：( )

缩写：div>(header>ul>li*2>a)+footer>p

<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>
缩写：(div>dl>(dt+dd)*3)+footer>p 

<div>
    <dl>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
    </dl>
</div>
<footer>
    <p></p>
</footer>

乘法：*

缩写：ul>li*5


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

自增符号：$

缩写：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>
缩写：h$[title=item$]{Header $}*3 

<h1 title="item1">Header 1</h1>
<h2 title="item2">Header 2</h2>
<h3 title="item3">Header 3</h3>
缩写：ul>li.item$$$*5 

<ul>
    <li class="item001"></li>
    <li class="item002"></li>
    <li class="item003"></li>
    <li class="item004"></li>
    <li class="item005"></li>
</ul>
缩写：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>

缩写：ul>li.item$@3*5

<ul>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    <li class="item6"></li>
    <li class="item7"></li>
</ul>

ID和类属性

缩写：#header

<div id="header"></div>

缩写：.title 

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

缩写：form#search.wide 

<form id="search" class="wide"></form>

缩写：p.class1.class2.class3 

<p class="class1 class2 class3"></p>

自定义属性

缩写：p[title="hello world"]

<p title="hellow world"></p>


缩写：td[rowspan=2 colspan=3 title]

<td rowspan="2" colspan="3"></td>


缩写：[a='value1' b='value2']

<div a="value1" b="value2"></div>


文本：{ }

缩写：a{Click me}

<a href="">Click me<./a>


缩写：p>{click}+a{here}+{to continue}

<p>Click <a href="">here</a> to continu</p>


隐式标签

缩写：.class

<div>

缩写：em>.class

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


缩写：ul>.class

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


缩写：table>.row>.col

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


HTML

所有未知的缩写都会转换成标签，例如，foo——<foo></foo>

缩写：!

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

</body>
</html>

缩写：a

<a href""></a>


缩写：a:link

<a href="http://"></a>


缩写：a:mail

<a href=mailto:"></a>


缩写：abbr

<abbr title=""></abbr>


缩写：acronym

<acronym title=""></acronym>


缩写：base

<base href="" />


缩写：basefont

<basefont />


缩写：br

<br />


缩写：frame

<fream />


缩写：hr

<hr />


缩写：bdo

<bdo dir=""></bdo>


缩写：bdo:r

<bdo dir="rtl"></bdo>


缩写：bdo:l

<bdo dir="ltrL></bdo>


缩写：col

<col />


缩写：link

<link rel="stylesheet" href="" />


缩写：link:css

<link rel="stylesheet" href="style.css" />


缩写：link:print

<link rel="stylesheet" href="print.css" media="print" />


缩写：link:favicon

<link rel="stylesheet" href="shortcut icon" type="image/x-icon" href="favicon.ico" />


缩写：link:touch

<link rel="apple-touch-icon" href="favicon.png" />


缩写：link:rss

<link rel ="alternate" style="application/rss+xml" title="RSS" href="rss.xml" />


缩写：link:atom

<link rel="alternate" type="application/auto+xml" title="Auto" href="auto.xml" />


缩写：meta

<meta />


缩写：meto:utf

<meta http-equiv="Content-Type" context="text/html;charset=UTF-8" />


缩写：meto:win

<meta http-equiv="Content-Type" content="text/html;charset=windows-1251" />


缩写：meto:vp

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />


缩写：meto:compat

<mmeta http-equiv="X-UA-Compatible" content="IE=7" />


缩写：style

<style></style>


缩写：script

<script></script>


缩写：script:src

<script src=""></script>


缩写：img

<img src="" alt="" />


缩写：iframe

<iframe src="" frameborder="0"></iframe>


缩写：embed

<embed src="" type="" />


缩写：object

<object data="" type=""></object>


缩写：param

<param name="" value="" />


缩写：map

<map name=""></map>


缩写：area

<area shape="" coords="" href=="" alt="" />


缩写：area:d

<area shape="default" href="" alt="" />


缩写：area:c

<area shape="circle" coords="" href="" alt="" />


缩写：area:r

<area shape="rect" coods="" href="" alt="" />


缩写：area:p

<area shape="poly" coords="" href="" alt="" />


缩写：form

<form action=""></form>


缩写：form:get

<form action="" method="get"></form>


缩写：form:post

<form action="" method="post"></form>


缩写：label

<label for=""></label>


缩写：input

<input type="text" />


缩写：inp

<input type="text" name="" id="" />


缩写：input:hidden

别名：input[type=hidden name]

<input type="hidden" name="" />


缩写：input:h

别名：input:hidden


缩写：input:text,input:t

别名：inp


缩写：input:search

别名：inp[type=search]

<input type="search" name="" id="" />


缩写：input:email

别名：inp[type=email]

<input type="email" name="" id="" />


缩写：input:url

别名：inp[type=url]

<input type="url" name="" id="" />


缩写：input:password

别名：inp[type=password]

<input type="password" name="" id="" />


缩写：input:p

别名：input:password


缩写：input:datetime

别名：inp[type=datetime]

<input type="datetime" name="" id="" />

   

缩写：input:date

别名：inp[type=date]

<input type="date" name="" id="" />


缩写：input:datetime-local

别名：inp[type=datetime-local]

<input type="datetime-local" name="" id="" />


缩写：input:month

别名：inp[type=month]


缩写：input:week

别名：inp[type=week]


缩写：input:time

别名：inp[type=time] 


缩写：input:number

别名：inp[type=number]


缩写：input:color

别名：inp[type=color]


缩写：input:checkbox

别名：inp[type=checkbox]


缩写：input:c

别名：input:checkbox


缩写：input:radio

别名：inp[type=radio]


缩写：input:r

别名：input:radio


缩写：input:range

别名：inp[type=range]


缩写：input:file

别名：inp[type=file]


缩写：input:f

别名：input:file


缩写：input:submit

缩写：input:s

别名：input:submit


缩写：input:image

缩写：input:i

别名：input:image

<input type="image" src="" alt="" />


缩写：input:button

缩写：input:b

别名：input:button

<input type="button" value="" />


缩写：isindex

<isindex />


缩写：input:reset

别名：input:button[type=reset]

<input type="reset" value="" />


缩写：select

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


缩写：option

<option value=""></option>


缩写：textarea

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


缩写：menu:context

别名：menu[type=context]

缩写：menu:c

别名：menu:context

<menu type="context"></menu>

缩写：menu:toolbar

别名：menu[type=toolbar]

<menu type="toolbar"></menu>


缩写：video

<video src=""></video>


缩写：audio


缩写：html:xml

<html xmlns="http://www.w3.org/1999/xhtml"></html>


缩写：keygen

<keygen />


缩写：command

<command />


缩写：bq

别名：blockquote

<blockquote></blockquote>


缩写：acr

别名：acronym

<acronym title=""></acronym>


缩写：fig

别名：figure

<figure></figure>


缩写：figc

别名：figcaption

<figcaption></figcaption>


缩写：ifr

别名：iframe

<iframe src="" frameborder="0"></iframe>


缩写：emb

别名：embed

<embed src="" type="" />


缩写：obj

别名：object

<object data="" type=""></object>


缩写：src

别名：source

<sourrce></source>


缩写：cap

别名：caption

<caption></caption>


缩写：colg

别名：colgroup

<colgroup></colgroup>


缩写：fst,fset

别名：fieldset

<fieldset></fieldset>


缩写：btn

别名：button

<button></button>


缩写：btn:b

别名：button[type=button]

<button type="button"></button>


缩写：btn:r

别名：button[type=reset]

<button type="reset"></button>


缩写：btn:s

别名：button[type=submit]

<button type="submit"></button>

blinkbean
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Emmet 总结
10-30
Emmet 总结 比较全！ 基本上，大多数的文本编辑器都会允许你存储和重用一些代码块，我们称之为“片段”。虽然片段能很好地推动你得生产力，但大多数的实现都有这样一个缺点：你必须先定义你得代码片段，并且不能再...
Emmet 使用手册
03-06
Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具: 基本上，大多数的文本编辑器都会允许你存储和重用一些代码块，我们称之为“片段”。 虽然片段能很好地推动你得生产力，但大多数的实现都有...
Emmet，让你爱上敲代码
yuyurenjie的博客
12-06 2026
Emmet 是一个可用在许多流行文本编辑器上的极大简化HTML和CSS工作流程的插件。Emmet的所有功能，都是在输入后按tab键，就会显示出你所想要的。本文中所有例子是基于windows下的Sublime Text3HTML文档初始格式化html:5 -> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
emmet 快捷键总结
MaRain
06-08 7843
emmet快捷键
前端开发神器：Emmet插件
xuxuan1997的博客
10-22 265
今天在逛CSDN时，发现了一个前端神器，IDEA内置了这个插件。所有操作按下“Tab”键完成 生成HTML基本结构 ！或html:5或html:4s，按下Tab键 嵌套操作 使用“&gt;”生成子元素 使用“+”生成兄弟元素 使用“^”生成父元素 使用“”生成多个相同元素，例如div&gt;ul&gt;li5 使用“()”将元素分组 属性操作 id：属性值之间用#隔开；class：用.隔开 ...
使用 Emmet 生成 HTML 的语法详解
Winn的程序世界
12-23 1042
在上篇文章前端开发神器 Emmet 介绍中，我简单的介绍了一下 Emmet ，并且用了一句指令迅速生成了一大片 HTML 代码。本文，就会介绍 Emmet 的 HTML 语法，看完之后，你就会看懂并且写出那句代码了。 现在，打开你的 ST2 然后新建一个 HTML 文档，跟着文章，即时输入对应的指令然后亲自尝试一下！ 生成 HTML 文档初始结构 HTML 文档的初始结构，就是包
Emmet：HTML/CSS代码快速编写神器
04-26 3679
Emmet的前身是大名鼎鼎的Zen coding，如果你从事Web前端开发的话，对该插件一定不会陌生。它使用仿CSS选择器的语法来生成代码，大大提高了HTML/CSS代码编写的速度，比如下面的演示：    Zen coding下的编码演示 去年年底，该插件已经改名为Emmet。但Emmet不只改名，还带来了一些新特性。本文就来直观地演示给你。  一、快速编写HTML代码
coc-emmet：coc.nvim的Emmet扩展
02-01
coc-emmet Emmet完成对支持 VSCode的emmet扩展的，仅具有完成支持。 注意：这个。 扩展仅支持emmet的完成功能，您应该使用 安装 在您的vim / neovim中，运行命令： :CocInstall coc - emmet 选件 emmet....
Emmet中文文档
10-08
前端最优秀的插件之一Emmet的中文文档，个人参照官网翻译，欢迎下载
eclipse emmet插件包
07-06
Emmet是一个强大的代码快速编写工具，使用emmet可以提高代码输入效率，特别是前端工程师在编写HTML和CSS代码时，是一个前端开发的利器
一文学会HTML速写Emmet语法
手写我对你的温柔
08-16 949
Emmet: 高级的代码补全，让我们写代码更快。 话不多说，开干！ 1.写某个标签然后按tab键自动补全【缩写补全】 2. 嵌套的缩写 其中 嵌套中有这些字符：> + ^ * () > 代表父子关系 * 代表重复 + 所以，+代表同级元素 ^ 代表 所以^ 代表网上爬升一级。 ()代表让逻辑关系更加清晰： 3. 属性： 特殊符号：# . # 代表id . 代表class 关于自定义属性:[] 4. 带有数...
Emmet 食用指北
weixin_34256074的博客
11-15 64
Emmet 是书写 HTML 元素时的简易标记，它有各种规则，帮助你快速生成 HTML 标签。 比如仅输入一个!, 再按下键盘上的Tab按键，一个HTML基本模板就生成了（前提是安装了 Emmet 插件）。 伟大的 VS Code 内置了这个插件。 如果当时老师有这么个酷酷的东西，我可能就不会对.jsp混乱的标记的学习感到厌烦了。 最重要的：解决了什么问题 规则的细枝末节是其次的，想想它解决了什...
emmet详解
雷雨天的雷胖子
06-29 1805
目录 一、概念 二、隐式符号 三、关系符号 四、占位标记 一、概念 emmet是一种介于标记性语言（如html、xml）和规范之外的逻辑输入方法，是一种能大幅提高前端开发效率的工具。 二、隐式符号 html:5 html:5和叹号，二者作用相同。 html:5 ! <!DOCTYPE html> <html lang="en"> <hea...
Emmet快速开发
weixin_34124577的博客
04-23 74
标签元素关系展开 div.wrap&gt;div.content&gt;(div.inner_l+div.inner_r)^div.sider ------缩写展开如下---------------------------------------------- &lt;div class="wrap"&gt; &lt;div class="content"&gt; ...
Emmet语法
底层码农
04-28 289
Emmet语法
前端Emmet语法小结
热门推荐
诗水人间
12-15 13万+
emmet语法名称 操作符 Child（子标签） > Sibling (兄弟标签) + Climb-up（上级元素） ^ Grouping（分组） () Multiplication（重复多份） * Item numbering(编号) $ ID # Class（类） . custom attrib...
前端开发必备！Emmet语法
weixin_33802505的博客
08-27 177
使用方法 emmet的使用方法也非常简单，以sublime text为例，直接在编辑器中输入HTML或CSS的代码的缩写，然后按tab键就可以拓展为完整的代码片段。（如果与已有的快捷键有冲突的话，可以自行在编辑器中将拓展键设为其他快捷键） 语法: 后代：&gt; 缩写：nav&gt;ul&gt;li &lt;nav&gt; &lt;ul&gt; &lt;li&...
Emmet语法快速学习
持续学习中
01-24 452
在进行前端开发的时候，经常要手动写一些Html和CSS代码，有时候手写比较的繁琐。所以Emmet语法就出现了，主要作用就是类似于快捷键的作用，只需要敲出几个字母就可以快速自动生成一段代码，大大提高开发效率。 Emmet是一款插件，只要能安装他的编辑器都能使用，大部分编辑器都可以使用该语法规则,我们平时开发的Sublime Text、Eclipse、Notepad++、VS code、Atom、Dreamweaver等等编辑器都可以使用。 那么接下来，就通过官方的文档给大家讲解，简单直接。 一、基础..
2020-12-13【web前端HTML5（emmet插件）篇】
tudouzibututou的博客
12-13 828
@[Emmet—写HTML/CSS快到飞起] Emmet—写HTML/CSS快到飞起 在前端开发的过程中，最费时间的工作就是写 HTML、CSS 代码。一堆的标签、属性、括号等，头疼。这里推荐一个Emmet语法规则，让你写的时候爽到飞起，能大大提高代码书写，只需要敲一行代码就能生成
emmet 语法手册
最新发布
09-02
我们还能学习到如何使用 Emmet 表达式来生成 CSS 选择器和规则，并设置它们的样式。 此外，Emmet 语法手册还介绍了一些高级的 Emmet 技巧和功能，如使用数字增量、自动生成重复模式、快速选取兄弟结点等。这些技巧...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值