在notepad++编辑器中使用emmet插件快速编辑代码

Hostjl

2年前发布

0406

前文我们写过一篇文章：

如何给notepad++编辑器安装emmet快速编辑插件

前文我们写过一篇文章：本文我们再来介绍一下，如何在安装了 emmet插件的notepad++编辑器中快速编...

推荐 2022-08-09

本文我们再来介绍一下，如何在安装了 emmet插件的notepad++编辑器中快速编辑代码。所谓快速，只是针对常用的html代码标签而言。下面就一起来看看常用的快速编辑简码。

一、html5 ：输入一个 ! 或 html:5 ，就可输出如下代码：

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

二、html4 ：输入html:4s

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>

三、其它常用标签

缩写：a:link <a href="http://"></a>
缩写：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="shortcut icon" type="image/x-icon" href="favicon.ico" />
缩写：meta:utf <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
缩写：script:src <script src=""></script>
缩写：form:post <form action="" method="post"></form>
缩写：input:h <input type="hidden" name="" />
缩写：input:t <input type="text" name="" id="" />
缩写：input:email <input type="email" name="" id="" />
缩写：input:url <input type="url" name="" id="" />
缩写：input:p <input type="password" name="" id="" />
缩写：input:c <input type="checkbox" name="" id="" />
缩写：input:f <input type="file" name="" id="" />
缩写：input:s <input type="submit" value="" />

四、常规语法：

1、后代：> 缩写：nav>ul>li

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

2、兄弟：+ 缩写：div+p+bq

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

3、分组：() 缩写：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>

4、乘法：* 缩写：ul>li*5

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

5、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>

以上是我在使用notepad++快速编辑插件时所经常使用到的快捷方法，使用它们可以大大地节省我们在编辑html代码的时间，有效提升我们的编程效率。

图片[1]-在notepad++编辑器中使用emmet插件快速编辑代码-HostJL-VPS主机交流

1、本站网址：hostjl.com
2、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

帝国CMS教程

喜欢就支持一下吧

在notepad++编辑器中使用emmet插件快速编辑代码

如何给notepad++编辑器安装emmet快速编辑插件

搬瓦工VPS推荐方案