sublime text 3 快捷键 - 快速创建多个标签

最新推荐文章于 2022-04-25 19:42:18 发布
最新推荐文章于 2022-04-25 19:42:18 发布
阅读量6k 收藏 39
点赞数 14
分类专栏： Html&CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jason156/article/details/104073923
版权

需要安装好emmet包

1, div*5按tab. 创建多个空的div. 

<!-- div*5按tab. 创建多个空的div. -->
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

2, div#id$*5按tab, 创建多个带id的div.

<!-- div#id$*5按tab, 创建多个带id的div. -->
<div id="id1"></div>
<div id="id2"></div>
<div id="id3"></div>
<div id="id4"></div>
<div id="id5"></div>

3, div.item*5按tab, 创建多个带class的div,class的名称是item.

<!-- div.item*5按tab, 创建多个带class的div,class的名称是item. -->
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>

4,div#id$.item*5按tab, 创建多个带id, 带classs的div.

<!-- div#id$.item*5按tab, 创建多个带id, 带classs的div. -->
<div id="id1" class="item"></div>
<div id="id2" class="item"></div>
<div id="id3" class="item"></div>
<div id="id4" class="item"></div>
<div id="id5" class="item"></div>

扩展知识1:

Emmet 默认的标签为 div ，如果我们不给出标签名称的话，默认就生成 div 标签。

#item,按tab,机会默认生成一个 id为item的div标签.

<div id="item"></div>

.item,按tab,默认是会生成一个类名为item的div标签

<!-- 输入.item,按tab,生成下面的代码. -->
<div class="item"></div>

所以输入 #item.classname,就会默认生成自带id和classname的div标签.

<!-- 所以输入 #item.classname,就会默认生成自带id和classname的div标签. -->
<div id="item" class="classname"></div>

既然默认为div,如果指定标签呢? 比如span.item

<!-- 输入span.item,生成 -->
<span class="item"></span>
<!-- 输入span#name,生成 -->
<span id="name"></span>
<!-- 输入span#name.classnames,生成 -->
<span id="name" class="clas"></span>snames
<!-- 输入span#name.item$*5生成 -->
<span id="name" class="item1"></span>
<span id="name" class="item2"></span>
<span id="name" class="item3"></span>
<span id="name" class="item4"></span>
<span id="name" class="item5"></span>
<!-- 输入span#name$.item$*5生成 -->
<span id="name1" class="item1"></span>
<span id="name2" class="item2"></span>
<span id="name3" class="item3"></span>
<span id="name4" class="item4"></span>
<span id="name5" class="item5"></span>
<!-- ul#idname.classname -->
<ul id="idname" class="classname"></ul>
<!-- ul#idname$.classname$*5 -->
<ul id="idname1" class="classname1"></ul>
<ul id="idname2" class="classname2"></ul>
<ul id="idname3" class="classname3"></ul>
<ul id="idname4" class="classname4"></ul>
<ul id="idname5" class="classname5"></ul>

扩展知识2:  生成后代：>

<!-- div.item>ul>li -->
<div class="item">
	<ul>
		<li></li>
	</ul>
</div>

<!-- div#idname.classname>ul>li -->
<div id="idname" class="classname">
	<ul>
		<li></li>
	</ul>
</div>


<!-- div#idname.classname>ul>li$*5 -->
<div id="idname" class="classname">
	<ul>
		<li1></li1>
		<li2></li2>
		<li3></li3>
		<li4></li4>
		<li5></li5>
	</ul>
</div>

<!-- div#idname$.classname$*3>ul>li$*5 -->
<div id="idname1" class="classname1">
	<ul>
		<li1></li1>
		<li2></li2>
		<li3></li3>
		<li4></li4>
		<li5></li5>
	</ul>
</div>
<div id="idname2" class="classname2">
	<ul>
		<li1></li1>
		<li2></li2>
		<li3></li3>
		<li4></li4>
		<li5></li5>
	</ul>
</div>
<div id="idname3" class="classname3">
	<ul>
		<li1></li1>
		<li2></li2>
		<li3></li3>
		<li4></li4>
		<li5></li5>
	</ul>
</div>

<!-- div#idname$.classname$*3>ul*3>li*5 -->
<div id="idname1" class="classname1">
	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</div>
<div id="idname2" class="classname2">
	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</div>
<div id="idname3" class="classname3">
	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</div>

扩展知识3, 生成生成兄弟：+

<!-- div+span -->
<div></div>
<span></span>

<!-- div+span+p -->
<div></div>
<span></span>
<p></p>



<!-- (div#idname$.classnames$+span#idname$.classname$+p)*3 -->
<div id="idname1" class="classnames1"></div>
<span id="idname1" class="classname1"></span>
<p></p>
<div id="idname2" class="classnames2"></div>
<span id="idname2" class="classname2"></span>
<p></p>
<div id="idname3" class="classnames3"></div>
<span id="idname3" class="classname3"></span>
<p></p>

扩展知识4, 生成上级元素：^

<!-- div>ul>li^span -->
<div>
	<ul>
		<li></li>
	</ul>
	<span></span>
</div>

<!-- div>ul>li$*5^span>ul>li$*5 -->
<div>
	<ul>
		<li1></li1>
		<li2></li2>
		<li3></li3>
		<li4></li4>
		<li5></li5>
	</ul>
	<span>
		<ul>
			<li1></li1>
			<li2></li2>
			<li3></li3>
			<li4></li4>
			<li5></li5>
		</ul></span>
</div>

<!-- (div>(ul>li$*5)*2^span>(ul>li$*5)*2)*2 -->
<div>
	<ul>
		<li1></li1>
		<li2></li2>
		<li3></li3>
		<li4></li4>
		<li5></li5>
	</ul>
	<ul>
		<li1></li1>
		<li2></li2>
		<li3></li3>
		<li4></li4>
		<li5></li5>
	</ul>
</div>
<span>
	<ul>
		<li1></li1>
		<li2></li2>
		<li3></li3>
		<li4></li4>
		<li5></li5>
	</ul>
	<ul>
		<li1></li1>
		<li2></li2>
		<li3></li3>
		<li4></li4>
		<li5></li5>
	</ul></span>
<div>
	<ul>
		<li1></li1>
		<li2></li2>
		<li3></li3>
		<li4></li4>
		<li5></li5>
	</ul>
	<ul>
		<li1></li1>
		<li2></li2>
		<li3></li3>
		<li4></li4>
		<li5></li5>
	</ul>
</div>
<span>
	<ul>
		<li1></li1>
		<li2></li2>
		<li3></li3>
		<li4></li4>
		<li5></li5>
	</ul>
	<ul>
		<li1></li1>
		<li2></li2>
		<li3></li3>
		<li4></li4>
		<li5></li5>
	</ul></span>

<!-- (div>(ul>li$*5)*2+span>(ul>li$*5)*2)*2 -->
<div>
	<ul>
		<li1></li1>
		<li2></li2>
		<li3></li3>
		<li4></li4>
		<li5></li5>
	</ul>
	<ul>
		<li1></li1>
		<li2></li2>
		<li3></li3>
		<li4></li4>
		<li5></li5>
	</ul>
	<span>
		<ul>
			<li1></li1>
			<li2></li2>
			<li3></li3>
			<li4></li4>
			<li5></li5>
		</ul>
		<ul>
			<li1></li1>
			<li2></li2>
			<li3></li3>
			<li4></li4>
			<li5></li5>
		</ul></span>
</div>
<div>
	<ul>
		<li1></li1>
		<li2></li2>
		<li3></li3>
		<li4></li4>
		<li5></li5>
	</ul>
	<ul>
		<li1></li1>
		<li2></li2>
		<li3></li3>
		<li4></li4>
		<li5></li5>
	</ul>
	<span>
		<ul>
			<li1></li1>
			<li2></li2>
			<li3></li3>
			<li4></li4>
			<li5></li5>
		</ul>
		<ul>
			<li1></li1>
			<li2></li2>
			<li3></li3>
			<li4></li4>
			<li5></li5>
		</ul></span>
</div>

扩展5, 生成网站结构.

<!-- 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>((header>ul>li*2>a)+(body>ul>li*5>a))+footer>p -->
<div>
	<header>
		<ul>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
		</ul>
	</header>
	<body>
		<ul>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
		</ul>
	</body>
	<footer>
		<p></p>
	</footer>
</div>



<!-- div>((header>ul>li*2>a)+(body>ul*5>li*5>a)+footer>p -->
div>(<header>
	<ul>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
	</ul>
</header>
<body>
	<ul>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
	</ul>
	<ul>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
	</ul>
	<ul>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
	</ul>
	<ul>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
	</ul>
	<ul>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
	</ul>
</body>
<footer>
	<p></p>
</footer>

 

功能真的很强大. 👍👍👍👍👍👍

<!-- div#name$.detail$*3 -->
<div id="name1" class="detail1"></div>
<div id="name2" class="detail2"></div>
<div id="name3" class="detail3"></div>

<!-- (div#name$.detail$*3)*2 -->
<div id="name1" class="detail1"></div>
<div id="name2" class="detail2"></div>
<div id="name3" class="detail3"></div>
<div id="name1" class="detail1"></div>
<div id="name2" class="detail2"></div>
<div id="name3" class="detail3"></div>

<!-- div#name$$.detail$$*3 -->
<div id="name01" class="detail01"></div>
<div id="name02" class="detail02"></div>
<div id="name03" class="detail03"></div>

<!-- span#name$.item$*3 -->
<span id="name1" class="item1"></span>
<span id="name2" class="item2"></span>
<span id="name3" class="item3"></span>


<!-- div#name$.detail$*3>span#name$.item$*3 -->
<div id="name1" class="detail1">
	<span id="name1" class="item1"></span>
	<span id="name2" class="item2"></span>
	<span id="name3" class="item3"></span>
</div>
<div id="name2" class="detail2">
	<span id="name1" class="item1"></span>
	<span id="name2" class="item2"></span>
	<span id="name3" class="item3"></span>
</div>
<div id="name3" class="detail3">
	<span id="name1" class="item1"></span>
	<span id="name2" class="item2"></span>
	<span id="name3" class="item3"></span>
</div>


<!-- div#name$.detail$*2>span#name$.item$*2>ul*2>li*2 -->
<div id="name1" class="detail1"><span id="name1" class="item1">
		<ul>
			<li></li>
			<li></li>
		</ul>
		<ul>
			<li></li>
			<li></li>
		</ul>
	</span><span id="name2" class="item2">
		<ul>
			<li></li>
			<li></li>
		</ul>
		<ul>
			<li></li>
			<li></li>
		</ul>
	</span></div>
<div id="name2" class="detail2"><span id="name1" class="item1">
		<ul>
			<li></li>
			<li></li>
		</ul>
		<ul>
			<li></li>
			<li></li>
		</ul>
	</span><span id="name2" class="item2">
		<ul>
			<li></li>
			<li></li>
		</ul>
		<ul>
			<li></li>
			<li></li>
		</ul>
	</span></div>

<!-- div#idname$.ClassName$>span#idname$.ClassName$*3 -->
<div id="idname1" class="ClassName1">
	<span id="idname1" class="ClassName1"></span>
	<span id="idname2" class="ClassName2"></span>
	<span id="idname3" class="ClassName3"></span>
</div>

<!-- (div#idname$.ClassName$>span#idname$.ClassName$*3)*2 -->
<div id="idname1" class="ClassName1">
	<span id="idname1" class="ClassName1"></span>
	<span id="idname2" class="ClassName2"></span>
	<span id="idname3" class="ClassName3"></span>
</div>
<div id="idname2" class="ClassName2">
	<span id="idname1" class="ClassName1"></span>
	<span id="idname2" class="ClassName2"></span>
	<span id="idname3" class="ClassName3"></span>
</div>

<!-- (div#idname$.ClassName$>span#idname$.ClassName$*2>ul*2>li*3)*2 -->
(<div id="idname1" class="ClassName1">
	<span id="idname1" class="ClassName1">
		<ul>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		<ul>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</span>
	<span id="idname2" class="ClassName2">
		<ul>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		<ul>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</span>
	<span id="idname1" class="ClassName1">
		<ul>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		<ul>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</span>
	<span id="idname2" class="ClassName2">
		<ul>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		<ul>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</span>
</div>

带属性.


<!-- (div#Dividname$.DivClassname${DivName$})*3>span>ul#Spanidname$.Spanclassname$*2>li{LiItemTodo$}*2 -->




<!-- (div[style="background-color: red;"]#DivIdname$.DivClassName${DivName$})*3>span>ul#SpanIdname$.SpanClassname$*2>li{LiItemTodo$}*2 -->
<div style="background-color: red;" id="DivIdname1" class="DivClassName1">DivName1</div>
<span>
	<ul id="SpanIdname1" class="SpanClassname1">
		<li>LiItemTodo1</li>
		<li>LiItemTodo2</li>
	</ul>
	<ul id="SpanIdname2" class="SpanClassname2">
		<li>LiItemTodo1</li>
		<li>LiItemTodo2</li>
	</ul></span>
<div style="background-color: red;" id="DivIdname2" class="DivClassName2">DivName2</div>
<span>
	<ul id="SpanIdname1" class="SpanClassname1">
		<li>LiItemTodo1</li>
		<li>LiItemTodo2</li>
	</ul>
	<ul id="SpanIdname2" class="SpanClassname2">
		<li>LiItemTodo1</li>
		<li>LiItemTodo2</li>
	</ul></span>
<div style="background-color: red;" id="DivIdname3" class="DivClassName3">DivName3</div>
<span>
	<ul id="SpanIdname1" class="SpanClassname1">
		<li>LiItemTodo1</li>
		<li>LiItemTodo2</li>
	</ul>
	<ul id="SpanIdname2" class="SpanClassname2">
		<li>LiItemTodo1</li>
		<li>LiItemTodo2</li>
	</ul></span>

 

深圳老张
关注
  • 14
    点赞
  • 踩
  • 39
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
Sublime Text3快捷键
07-19
收录了Sublime Text3的3类（选择类，编辑类，搜索类）快捷键操作
Sublime Text3快捷键汇总
10-14
主要介绍了Sublime Text3快捷键汇总，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
sublime快捷方式
Liyunhao_haoge的博客
10-05 144
sublime快捷方式 sublime可以快速提高代码的书写方式: 1)生成标签直接输入标签名按tab键即可,比如div,然后tab键,就生成了:<div></div> 2)如果想要生成多个相同的标签,加上*就可以了,比如 div*3就生成3个div 3)如果有父子关系的标签,可以用>,比如 ul>li就可以了 4)如果有兄弟关系的标签,用+可以了,比如:div...
sublime常用的快捷键操作emmet语法
qq_44850917的博客
02-17 252
sublime常用的快捷键操作emmet语法 生成标签直接输入标签名 按tab键即可，比如 div然后tab键就可以生成< div >< /div> 如果想要生成多个相同标签 加上*就可以了比如 div*3 就可以快速生成3个div如果有父子级关系的标签，可以用>比ul>li就可以了 如果有兄弟关系的标签，用+就可以了比如div+p 如果生成带有类名或者id...
【编程工具】Sublime Text3 之 Emmet 插件的详细使用的方法
weixin_30869099的博客
03-29 126
这篇关于 Emmet 插件使用的博文之前就想写了，今天刚好闲暇时间，就花了一些时间进行了总结。 我们都这道 Emmet 这款插件在前端设计里被称为神器，确实，神器称号名不虚传。因为这款插件可以帮助我们高效的编写代码，以后写前端代码就不用复制粘贴了。仅仅寥寥几行代码，就可以把一个网页的整体框架给建立起来。好了话不多说，我们马上进入主题吧！ HMTL部分 1.创...
sublime text 你所不知道的12个秘密
laokdidiao的专栏
05-17 9729
package control安装： 第一种方法是在控制台中复制粘贴代码按回车，https://sublime.wbond.net/installation 第二种办法下载pc文件，百度一下很多方案，这里不详说了 emmet安装： 1、按Ctrl+Shift+P命令板 2、输入PCIC，回车进入Package Control：install 3、输入Emmet和Emme
Sublime Text同一个窗口打开多个标签页
欢迎来到“無昂博奥”的博客
12-18 4508
环境： Mac 使用场景： Sublime Text默认的是依新窗口方式打开新文件。现在要阅读android源码，使用多个窗口打开java文件，不是特别方便查阅。 目的： 在同一个窗口中通过多标签页方式打开新文件。 方法如下： 在设置页面搜索open_，将open_files_in_new_window的值改为false，如下图。 再次打开新文件就可以看到效果了。 感谢阅读，如果能帮到你，倍感荣幸。 ...
修改sublime text配置，使得同一个窗口中可以打开多个标签页
lww1993的专栏
10-14 2334
1. Sublime Text --- Preferences --- Settings; 2.
HTML——1.Sublime快捷键、HTML常用标签
m0_46279684的博客
04-25 1489
目录 Sublime快捷键 页面骨架 浏览页面 选中多行 注释 页面语言lang 字符集 排版标签 标题标签h 段落标签p 水平线标签hr 换行标签br div和span标签 文本格式化标签 图像标签img 链接标签 注释标签 路径 相对路径 绝对路径 Sublime快捷键 页面骨架 html:5 + Tab ! + Tab 浏览页面 直接在空白处，右键——在浏览器中打开 选中多行 按住滚轮往下拉 注释 Ctrl + /（?）：把光标定在想要注释
sublime快捷方式--快速生成HTML结构语法
li520_fei的博客
01-12 983
sublime快捷方式–快速生成HTML结构语法 生成标签 直接输入标签名 按tab键即可 比如 div 然后tab 键， 就可以生成 如果想要生成多个相同标签 加上 * 就可以了 比如 div*3 就可以快速生成3个div 按住滚轮往下拉可以快速选择每一行同一水平位置 如果有父子级关系的标签，可以用 > 比如 ul > li就可以了 ul>li*5 也可以 如果有兄弟关系的标签，用 + 就可以了 比如 div+p 如果生成带有类名或者
Sublime Text3快捷键大全
最新发布
08-26
Sublime Text3快捷键大全
sublime text 3快捷键
02-22
sublime text 3的基本操作和一些快捷键
Sublime Text快捷键
09-13
Sublime Text快捷键，Sublime Text快捷键Sublime Text快捷键Sublime Text快捷键Sublime Text快捷键。。。。。
Div 用图片作为背景
jason156的专栏
01-25 3970
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
img 单标签 图片标签
jason156的专栏
01-22 1261
<!DOCTYPE html> <html lang="en"> <head> <title>Img Demo</title> <meta charset="utf-8"> </head> <body> <!-- 图片引用的3种方式: 1,url; 2,本地绝对路径; 3,本地相对路径....
html css 基础： 制作仿淘宝的菜单栏
jason156的专栏
01-22 850
<!DOCTYPE html> <html lang="en"> <head> <title>Menu Demo</title> <meta charset="utf-8"> <style type="text/css"> *{ margin:0; padding: 0; } ul{...
Sublime Text 快速产生html文档的初始结构.
jason156的专栏
01-23 780
输入!,按tab或者ctl+e,即可生成下面的基础结构. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> &...
Html 基本标签
jason156的专栏
01-22 458
Html 最常用的基本标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="lesson2.cs...
sublime text3快捷键设置
03-16
Sublime Text 3的快捷键设置可以通过菜单栏中的Preferences -> Key Bindings打开。在打开的文件中，可以看到默认的快捷键设置和用户自定义的快捷键设置。用户可以在文件中添加自己的快捷键设置，也可以修改默认的快捷键设置。快捷键设置可以帮助用户更快速地完成编辑、查找、替换等操作，提高工作效率。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值