emmet简单使用教程

最新推荐文章于 2022-12-04 21:46:37 发布
最新推荐文章于 2022-12-04 21:46:37 发布
阅读量1k 收藏
点赞数
分类专栏： web开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/coolcaosj/article/details/21301485
版权 
Emmet基本语法学习
虽然我不是做前端的，但是作为web开发者，经常编写html,jsp等文件，当我无意中知道了emmet这个神奇的利器时，我被深深的折服，于是上网搜索一下，简单学习一下基本语法，做个笔记。

1、初始化html文档
!和html:5 			生成html文档类型
例如，输入以下命令，然后按tab键：
html:5
生成以下内容：
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>

2、id操作符 #
如果要生成一个指定id的div,则可以使用如下命令：
div#foo
得到的如下：
<div id="foo"></div>

3、类操作符.
生成一个指定class的元素时，使用.号（英文点号）
div.center
<div class="center"></div>

4、元素文本 {}

p.center{文章查看}

按tab键后会生成如下html
<p class="center">文章查看</p>

5、属性操作符 []
a[href=www.baidu.com]{百度一下}

<a href="www.baidu.com">百度一下</a>

注意：{}和[]貌似有前后顺序，属性[]要在文本{}之后才可以，如上一个命令，

a[href=www.baidu.com]{百度一下}
如果写成下面命令，得到错误的结果：
a{百度一下}[href=www.baidu.com]
<a href="">百度一下</a>

6、子节点操作符 >
如果我们要生成嵌套的标签，就要用到子节点操作符
div.main>div.wrap>div.content>ul>li
<div class="main">
	<div class="wrap">
		<div class="content">
			<ul>
				<li></li>
			</ul>
		</div>
	</div>
</div>


7、父节点操作符 ^
div.center>div.h1^div.center>div.h2^div.center>div.h3
<div class="center">
	<div class="h1"></div>
</div>
<div class="center">
	<div class="h2"></div>
</div>
<div class="center">
	<div class="h3"></div>
</div>
div.center>div.content>ul>li^^div.content>ul>li^^div.content>ul>li
<div class="center">
	<div class="content">
		<ul>
			<li></li>
		</ul>
	</div>
	<div class="content">
		<ul>
			<li></li>
		</ul>
	</div>
	<div class="content">
		<ul>
			<li></li>
		</ul>
	</div>
</div>

8、兄弟节点操作符 +
div.title>p{标题}+^div.content>p{内容}
<div class="title">
	<p>标题</p>
</div>
<div class="content">
	<p>内容</p>
</div>

9.多个兄弟节点操作符 * 
一个ul下面肯定不止一个li,如果一个一个的输入，肯定不合适，这时使用*
ul.menu>li*5
<ul class="menu">
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>
ok ,5个li出来了。

10、计数器 $
ul.menu>li#id${item$}*5
<ul class="menu">
	<li id="id1">item1</li>
	<li id="id2">item2</li>
	<li id="id3">item3</li>
	<li id="id4">item4</li>
	<li id="id5">item5</li>
</ul>

11、分组操作符()
(div.foo>h1)+(div.bar>h2)
<div class="foo">
	<h1></h1>
</div>
<div class="bar">
	<h2></h2>
</div>

12、隐式标签
我们可以直接输入.center来输入class="center"的div:
.center
<div class="center"></div>
支持的隐式标签有如下：
li :用在ul和ol中
tr :用在table,tbody,和tfoot中
td :用在tr中
option :用在select 和optgroup中 

ul.menu>.item*5
<ul class="menu">
	<li class="item"></li>
	<li class="item"></li>
	<li class="item"></li>
	<li class="item"></li>
	<li class="item"></li>
</ul>
table.tb>.tbrow*3>.tbd*4
<table class="tb">
	<tr class="tbrow">
		<td class="tbd"></td>
		<td class="tbd"></td>
		<td class="tbd"></td>
		<td class="tbd"></td>
	</tr>
	<tr class="tbrow">
		<td class="tbd"></td>
		<td class="tbd"></td>
		<td class="tbd"></td>
		<td class="tbd"></td>
	</tr>
	<tr class="tbrow">
		<td class="tbd"></td>
		<td class="tbd"></td>
		<td class="tbd"></td>
		<td class="tbd"></td>
	</tr>
</table>

emmet编写html的基本语法差不多就这些，要想快速编写，得多加练习才是。

注意，其实生成相同一段html段，可以有好几种不同的组合语法，大家可以在平时练习的时候，对比一下效率和适用性，选择自己觉得最适合，效率最高的一种语法组合。我在上面的例子中，可能并不是最好的，只是为了演示单个操作符的效果。

Emmet使用技巧
12-25
Emmet使用技巧 里成包括安装过程,写代码过程中提高写代码速度用到的html缩写，css缩写
Emmet中文文档
10-08
Emmet通过简单的缩略语来快速生成HTML标签。例如，输入`div`，Emmet会自动扩展为`<div></div>`；输入`p`，扩展为`<p></p>`。Emmet的缩略语覆盖了HTML5中大部分的标签。 ### 语法 Emmet的语法功能非常强大，其中包含...
Emmet的简单使用
liuxinghai123的博客
12-20 434
Emmet的简单使用 快速编写html代码 初始化 添加类id文本和属性 嵌套 分组 隐式标签 定义多个元素 CSS缩写 值 附加属性 模糊匹配 渐变 附加功能 定制 针对不同的编辑器Emmet的简单使用  如果你目前在搞前段的事情，写页面HTML和CSS，而对于每一对标签，你需要去认真的去敲打，就算使用工具提供的提示。那么这是你应该看一下的，因为所有工具都是用来节约时间，把时间放在思考之上。
emmet教程
JarvisLau的博客
04-14 286
https://www.zfanw.com/blog/zencoding-vim-tutorial-chinese.html https://www.zfanw.com/blog/zencoding-vim-tutorial-chinese.html http://www.jianshu.com/p/67fa1e2114c5   emmet安装在eclipse中后,在jsp文件中使用时,不
emmet简易教程
xiaolin9902的专栏
10-05 453
在编写HTML及CSS代码时，emmet会极大地提高我们的编码速度。官网（https://emmet.io/）提供了很多编辑器的插件，同时也提供了文档说明。如果英文看得速度慢，这里有一份中文翻译版本：http://yanxyz.github.io/emmet-docs/。如果没有时间读这么多文档，同时你和我一样使用的是HBuilder或者HBuilderX，那么看看这份简易的教程，就可以熟悉大部分...
Emmet：HTML/CSS代码快速编写神器
04-26 3773
Emmet的前身是大名鼎鼎的Zen coding，如果你从事Web前端开发的话，对该插件一定不会陌生。它使用仿CSS选择器的语法来生成代码，大大提高了HTML/CSS代码编写的速度，比如下面的演示：    Zen coding下的编码演示 去年年底，该插件已经改名为Emmet。但Emmet不只改名，还带来了一些新特性。本文就来直观地演示给你。  一、快速编写HTML代码
Emmet官方文档教程指南
本Emmet文档和教程主要包含Emmet的介绍、使用方法、扩展机制和在不同编辑器中的配置指南，以及Emmet的源代码结构。 ### Emmet文档和教程知识点： 1. **Emmet简介**：Emmet最初是集成在集成开发环境（IDE）中的一个...
Sublime3中Emmet插件的安装与使用教程
- **快捷键的使用**：Emmet插件的使用离不开快捷键，尤其是`Tab`键。在Sublime Text中，当输入Emmet的缩写后按下`Tab`键，编辑器会自动将其展开成完整的代码片段。掌握快捷键的使用是提高编码效率的关键。 - **前端...
dreamweaver Emmet插件：提升编码速度的神器使用教程
安装Emmet插件到Dreamweaver相对简单，以下步骤供参考： - 下载Emmet插件的安装包（例如`Emmet.zxp`）。 - 打开Dreamweaver。 - 选择菜单栏中的`帮助` > `管理扩展`。 - 在弹出的扩展管理器中选择`安装`按钮，然后...
Emmet使用教程
小书包的博客
01-10 222
选择器 >子类选择器 div>ul>li <div> <ul> <li></li> </ul> </div> +兄弟选择器 div+p+bq <div></div> <p></p> <blockquote>&lt...
Emmet入门教程（原zen coding），编写HTML提速神器
管子（zero）的杂乱空间
12-16 284
简写输入 Emmet的简写的原理有点像CSS技术里面的Class选择器，区别是它使元素分层结构以及其标签的属性表达起来更轻便。 译者注：如果你不知道我说的是什么，这有个视频，应该更直观一些。 http://v.youku.com/v_show/id_XMTM4NDQwNzgw.html 输入标签 你可以用标签名如div、p直接生成完整的HTML标签。Emmet可没有定义什么标签合法，因此...
【Emmet 的使用手册（知识点超全版本）】
以爱护甲,爱满枫林。
01-04 1713
Emmet 使用手册目录 Emmet 简介 1. Emmet 生成 HTML 的缩写语法 1.1 HTML 文档类型和结构初始化 1.2 注释 1.3 HTML 标签 1.4 嵌套 ⑴ 后代-下一级 ⑵ 兄弟-同一等级 ⑶ 父亲-上级 1.5 分组 1.6 乘法-数量 1.7 分组和乘法结合 1.8 自增符号-给项目编号 1.9 ID 1.10 类 1.11 属性和属性值 1.12 文本 1.13 隐式标签-自动补全
Emmet使用
Ice_cap1995的专栏
04-02 311
对于开发web前端来说，尤其是编写html文件，emmet无疑是一个神器 1、生成html基本框架！+tab   == &gt;&gt; 生成HTML5 的标准文档初始结构   &lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta
Emmet语法的使用
weixin_45328723的博客
04-22 1673
一、Emmet语法是什么？ Emmet语法的前身是Zen coding,它使用缩写，来提高html/css的编写速度,Vscode内部已经集成了该语法。 1.快速生成HTML结构语法 1.生成标签，直接输入标签名，按下tab即可 例如： 输入div 后面直接tab 2.如果想生成多个相同标签，加上就可以的 例如： div3 3.如果有父子级关系的标签，可以用> 例如： ul>li 4.如果是兄弟关系的标签，用+就可以的 例如： div+P 5.如果有生成带有类名，或者id名字的，直接写 例如：
Emmet详解
李宥的博客
12-04 2724
Emmet 的前身就是 Zen Coding。 Emmet可以使用简化的标签生成复杂的html标签，提升编写 HTML/CSS 代码效率。 Emmet是文本编辑器插件，几乎支持大多数常用的编辑器，vscode内置。
07emmet使用笔记
WLB 的博客
09-14 648
文章目录小样例: div基本上是转移的~生成兄弟,父`div+p+bq`,兄弟元素`div+div>p>span+em^bq`,父元素自定义类名,id`ul>.item`,指定是li元素的类名`#name`自动生成id=name直接明确生成的结构生成内容编号`ul>li.item$*3`,生成item1,...反向生成序号指定起始数,不从1开始自定义属性,标签文本自定义属性自定义文本练习3个小样例注意事项 安装VScode并使用Miniconda环境: 参考: 视频-教你配置Pyt
Emmet,快速编辑HTML【学习记录】
qq_41670382的博客
02-27 143
对Emmet的简单了解 Emmet是一款插件， 可以方便HTML或CSS编程， 此处仅总结了再HTML中的用法： 只要能安装它的编辑器都能使用， 大部分编辑器都可以使用该语法规则, 笔者亲测DW中可用，以下结果均为在DW中实践所得： 更多语法及Emmet的安装可见此页面： https://code.z01.com/Emmet/index.html 注意：按tab键时，光标需要在最后 新建.html文件 然后输入! 或者 !html:5 按下Tab键 Q左边的按键： 结果： html:5 与上面的
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值