代码拉取完成，页面将自动刷新
同步操作将从 Molio-tan/linux_config 强制同步，此操作会覆盖自 Fork 仓库以来所做的任何修改，且无法恢复！！！
确定后同步将在后台操作，完成时将刷新页面，请耐心等待。
emmet
emmet前身为ZenCoding,是能提高前端开发效率的工具
以插件形式支持各种编辑嚣
快捷键(vim)
补全: ctrl + y ,
div>p>a 生成标签代码
<div>
<p><a href=""></a></p>
</div>
关联补全: ctrl + y ;
关联上一行补全
<div
>p ctrl + y ;生成以下代码
<div
><p></p>
更新属性: ctrl + y u
可以更新现有元素属性
<div></div> 在现有元素按ctrl + y u会弹出命令行输入新属性
输入.body
<div class="body"><div>
输入#body
<div id="body"><div>
输入[title=]
<div title=""><div>
如果元素已经存在输入属性则会更新属性值
选择内容补全: v_ctrl + y ,
在可视模式下选择内容输入ctrl + y ,
会进入命令行(Tag:)输入新标签对其内容生成标签元素
选取内容如下:
content1
content2
content3
Tag: div
<div>
content1
content2
content3
</div>
Tag: ul>li*
<ul>
<li>content1</li>
<li>content2</li>
<li>content3</li>
</ul>
其它快捷键操作
ctrl + y d 会选取光标所在标签元素内容(包括元素名)
ctrl + y D 会选取光标所在标签元素子元素内容(包括元素名)
ctrl + y n 将光标移动到下一个编辑点进入插入模式
ctrl + y N 将光标移动到上一个编辑点进入插入模式
ctrl + y k 将光标所在标签元素内容删除(包括元素)
ctrl + y m 将光标所在元素合并为一行(与vim标记快捷键冲突)
ctrl + y / 将光标所在元素内容注释切换
ctrl + y a 将输入链接自动生成a元素
http://www.baidu.com
<a href="http://www.baidu.com">百度一下，你就知道</a>
ctrl + y A 将输入链接自动生成引用元素
http://www.baidu.com
<blockquote class="quote">
<a href="http://www.baidu.com">百度一下，你就知道</a>
<br>
<p>把百度设为主页 关于百度 About Baidu 百度推广 ©2016 Baidu 使用百度前必读 意见反馈 京ICP证030173号 京公网安备11000002000001号 ...</p>
<cite>http://www.baidu.com</cite>
</blockquote>
ctrl + y c 将选取内容自动转换为特定编程语言样式代码格式
#include <stdio.h>
int main(void)
printf("hello world\n");
return 0;
选取以上内容输入ctrl + y c会提示输入什么语言
自动按输入语言样式格式化以上代码生成pre元素
语法
> 子元素
div>ul>li 补全生成以下代码
<div>
<ul>
<li></li>
</ul>
</div>
+ 相邻元素
div+p+img 补全生成以下代码
<div></div>
<p></p>
<img src="" alt="">
div>img+p+ul>li 补全生成以下代码
<div>
<img src="" alt="">
<p></p>
<ul>
<li></li>
</ul>
</div>
^ 返回上一级
div>ul>li^p 补全生成以下代码
<div>
<ul>
<li></li>
</ul>
<p></p>
</div>
div>ul>li^p+img^span 补全生成以下代码
<div>
<ul>
<li></li>
</ul>
<p></p>
<img src="" alt="">
</div>
<span></span>
() 分组
使用^容易出错，可以用()分组来代替
div>(ul>li)+(p>a)+img 补全生成以下代码
<div>
<ul>
<li></li>
</ul>
<p><a href=""></a></p>
<img src="" alt="">
</div>
* 乘法
生成多个相同元素
ul>li*3 补全生成以下代码
<ul>
<li></li>
<li></li>
<li></li>
</ul>
div>ul*2>li*3 补全生成以下代码
<div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
# ID属性
div#body>div#header 补全生成以下代码
<div id="body">
<div id="header"></div>
</div>
. 类属性
div.body>p.txt 补全生成以下代码
<div class="body">
<p class="txt"></p>
</div>
div#body.content>p.txt 补全生成以下代码
<div id="body" class="content">
<p class="txt"></p>
</div>
[] 自定义属性
用于指定元素其它属性, 可以空格为分隔写多个自定义属性
div[title='This is body Div'] 补全生成以下代码
<div title="This is body Div"></div>
div#body.content[border=1 title='Div']
<div id="body" class="content" border="1" title="Div"></div>
指定生成标签里的内容
<div>
<p>这是一个段落</p>
</div>
$ 自增
一次性生成多个相同元素时需要递增某些属性或值
$需要与*配合使用
$*3 代表从1开始递增到3
ul>li.item$*3
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
</ul>
$$*3 代表从01开始递增到03
ul>li.item$$*3
<ul>
<li class="item01"></li>
<li class="item02"></li>
<li class="item03"></li>
</ul>
$$$*3 代表从001开始递增到003
ul>li.item$$$*3
<ul>
<li class="item001"></li>
<li class="item002"></li>
<li class="item003"></li>
</ul>
$@3*5 代表从3开始递增到7
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>
$@-*3 代表从3开始递减到1
ul>li.item$@-*3
<ul>
<li class="item3"></li>
<li class="item2"></li>
<li class="item1"></li>
</ul>
隐式标签
.class 会自动生成div元素的类属性
.body
<div class="body"></div>
em>.class 会自动生成span元素的类属性
em>.txt
<em><span class="txt"></span></em>
ul>.class 会自动生成li元素的类属性
ul>.item
<ul>
<li class="item"></li>
</ul>
ol>.class 会自动生成li元素的类属性
ol>.item
<ol>
<li class="item"></li>
</ol>
table>.row>.col 会自动生成行和列元素的类属性
table tbody thead tfoot后可以以类属性来指定tr元素
tr后可以以类属性来指定td元素
table>.row>.col
<table>
<tr class="row">
<td class="col"></td>
</tr>
</table>
select>.item 会自动生成option元素的类属性
select optgroup后可以以类属性来指定option元素
select>.item
<select id="" name="">
<option class="item" value=""></option>
</select>
所有未知和缩写都会转换成标签
例： kyo 会生成<kyo></kyo>
缩写
!或html:5 生成html5文档主体代码
html:xs 生成xhtml文档主体代码
html:4s 生成html4严格主体代码
a
<a href=""></a>
a:link
<a href="http://"></a>
a:mail
<a href="mailto:"></a>
link/
<link rel="stylesheet" href="" />
link:css/
<link rel="stylesheet" href="style.css" media="all" />
link:print/
<link rel="stylesheet" href="print.css" media="print" />
link:favicon/
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
meta:utf/
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
meta:vp/
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
meta:compat/
<meta http-equiv="X-UA-Compatible" content="IE=7" />
iframe
<iframe src="" frameborder="0"></iframe>
img/
<img src="" alt="" />
form
<form action=""></form>
form:get
<form action="" method="get"></form>
form:post
<form action="" method="post"></form>
input/
<input type="" />
input:h/
<input type="hidden" name="" />
input:t/
<input id="" type="text" name="" />
input:p/
<input id="" type="password" name="" />
input:email/
<input id="" type="email" name="" />
input:r/
<input id="" type="radio" name="" />
input:c/
<input id="" type="checkbox" name="" />
input:f/
<input id="" type="file" name="" />
input:s/
<input type="submit" value="" />
过滤嚣
过滤嚣是将生成代码进一步过滤输出, 过滤嚣需要在命令后输入|过滤嚣命令
e 将<>转换为实体名称输出
ul>li*2|e
<ul>
<li></li>
<li></li>
</ul>
c 自动输出注释
div#page>ul#list>li.item|c
<!-- #page -->
<div id="page">
<!-- #list -->
<ul id="list">
<!-- .item -->
<li class="item"></li>
<!-- /.item -->
</ul>
<!-- /#list -->
</div>
<!-- /#page -->
s 合并一行输出
div>ul>li*3|s
<div><ul><li></li><li></li><li></li></ul></div>
t 删除空白字符及列表字符(- 1. 2. 3....)
1. AAAAA
2. AAAAA
3. AAAAA
选取以上内容补全输入: ul>li*|t
会自动删除1. 2. 3.等列表数字再使用li元素包含
css
必须在css文件中才能使用ctrl + y ,补全
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手