Emmet插件的常用语法

article/2025/9/22 9:49:36

本人使用的代码编辑工具是SublimeText，Emmet是一个代码的缩写插件，使用代码缩写快速完成代码编写，前提条件需要安装emmet插件，如下图，打开SublimeText 使用快捷键 Ctrl + Shift + P，显示 Package Control功能，你也可以直接在首选项>>Package Control 使用功能，输入 install ，选择第一项，鼠标单击：

输入Emmet，选择第一个，稍等片刻，窗口左下角会有来回移动的加载动画

安装完成会弹出配置文件，你可以在Package Control中输入remove，点击remove package，再输入Emmet，就可以看到这个插件出现在可删除的列表里，说明插件安装成功。

下面是快捷缩写的使用方式：

<!DOCTYPE html>
<html lang="en">
<!-- 以下注释中的代码缩写，都是输入之后按tab键才会自动补全 -->
<head><!-- 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=edge"><!-- link:css --><link rel="stylesheet" href="style.css"><script src="bootstrap"></script><!-- <meta charset="UTF-8"> --><title>Document</title>
</head>
<body><!-- 以下都是输入之后按tab键才会自动补全 --><p>1. 生成带类样式的标签 "." </p><!-- p.info --><p class="info"></p><!-- .red --><div class="red"></div><p>2. 生成带ID的标签 "#" </p><!-- h2#header --><h2 id="header"></h2><!-- #header --><div id="header"></div><p>3. a标签 ":"</p><a href=""></a><!-- a:link --><a href="http://"></a><p>4. 根据标签之间的位置关系来生成标签 "+" ">" </p><!-- 生成同级别兄弟标签 h2.header+p.info --><h2 class="header"></h2><p class="info"></p><!-- 后代标签，也叫下级标签 --><!-- ul>li+li --><ul><li></li><li></li></ul><!-- 生成当前标签的父级，也叫上级标签 --><!-- h2>span^p.info --><h2><span></span></h2><p class="info"></p><p>5. 可以在生成标签时，创建内部的文本</p><!-- a{php中文网} --><a href="">php中文网</a><!-- p[title="这是一段说明文字"] --><p title="这是一段说明文字"></p><!-- a[href="http://www.php.cn"]{php中文网} --><a href="http://www.php.cn">php中文网</a><p>6. 重复生成功能</p><!-- ul>li*5 --><ul><li></li><li></li><li></li><li></li><li></li></ul><p>7. 快速生成有8个列表项的导航：</p><!-- ul.list>li.item*8>a{导航} --><ul class="list"><li class="item"><a href="">导航</a></li><li class="item"><a href="">导航</a></li><li class="item"><a href="">导航</a></li><li class="item"><a href="">导航</a></li><li class="item"><a href="">导航</a></li><li class="item"><a href="">导航</a></li><li class="item"><a href="">导航</a></li><li class="item"><a href="">导航</a></li></ul><p>8. 给标签自动添加编号或者排序：$(编号),@(升降序)</p><!-- ul.list>li.item*8>a{导航$$} --><ul class="list"><li class="item"><a href="">导航01</a></li><li class="item"><a href="">导航02</a></li><li class="item"><a href="">导航03</a></li><li class="item"><a href="">导航04</a></li><li class="item"><a href="">导航05</a></li><li class="item"><a href="">导航06</a></li><li class="item"><a href="">导航07</a></li><li class="item"><a href="">导航08</a></li></ul><!-- ul.list>li.item*8>a{导航$$@-} --><ul class="list"><li class="item"><a href="">导航08</a></li><li class="item"><a href="">导航07</a></li><li class="item"><a href="">导航06</a></li><li class="item"><a href="">导航05</a></li><li class="item"><a href="">导航04</a></li><li class="item"><a href="">导航03</a></li><li class="item"><a href="">导航02</a></li><li class="item"><a href="">导航01</a></li></ul><!-- ul.list>li.item*8>a{导航$$@100} --><ul class="list"><li class="item"><a href="">导航100</a></li><li class="item"><a href="">导航101</a></li><li class="item"><a href="">导航102</a></li><li class="item"><a href="">导航103</a></li><li class="item"><a href="">导航104</a></li><li class="item"><a href="">导航105</a></li><li class="item"><a href="">导航106</a></li><li class="item"><a href="">导航107</a></li></ul><!-- ul.list>li.item*8>a{导航$$$$@100} --><ul class="list"><li class="item"><a href="">导航0100</a></li><li class="item"><a href="">导航0101</a></li><li class="item"><a href="">导航0102</a></li><li class="item"><a href="">导航0103</a></li><li class="item"><a href="">导航0104</a></li><li class="item"><a href="">导航0105</a></li><li class="item"><a href="">导航0106</a></li><li class="item"><a href="">导航0107</a></li></ul><!-- ul.list>li.item*8>a{导航$$$$@-100} --><ul class="list"><li class="item"><a href="">导航0107</a></li><li class="item"><a href="">导航0106</a></li><li class="item"><a href="">导航0105</a></li><li class="item"><a href="">导航0104</a></li><li class="item"><a href="">导航0103</a></li><li class="item"><a href="">导航0102</a></li><li class="item"><a href="">导航0101</a></li><li class="item"><a href="">导航0100</a></li></ul></body>
</html>