emmet 很nice的前端插件（安装和使用详解）

最新推荐文章于 2024-08-08 08:24:10 发布

autism_执生

最新推荐文章于 2024-08-08 08:24:10 发布

阅读量467

点赞数 1

分类专栏： html 文章标签：前端利器

本文链接：https://blog.csdn.net/qq_38595560/article/details/86154897

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

emmet的安装

emmet是一款可以快速编写HTML和css的插件，下面先来介绍如何安装这个插件。因为每个人使用的编辑器不同，所以方法也不一样，我使用的webstorm，我就针对webstorm来说。使用其他编辑器的同学可以打开emmet官网点击download，选择自己在使用是编辑器来进行相应的安装。
在这里插入图片描述

webstorm中，可以直接搜索emmet然后安装即可，setting->plugins,
在这里插入图片描述
找不到的同学可以Search in respositories

安装好之后，重新启动一次webstorm就可以开始使用了。
html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>emmet的使用方法</title>
</head>
<body>
<!--元素名+tab 可以直接生产一个完整的标签-->
<!--div+tab-->
<div></div>
<!--btn -> <button></button>-->

<!--元素名+.类名     元素名+#.ID 创建带有类名|id的标签 ,不加元素名会默认为div-->
<!--div.myDiv-->
<div class="myDiv"></div>

<!--往标签里添加内容-->
<!--h1{这是标签的内容}-->
<h1>这是标签的内容</h1>

<!--标签的嵌套-->
<!--div>ui>li>a{111}-->
<div>
  <ui>
    <li><a href="">111</a></li>
  </ui>
</div>

<!--多个子元素及内容-->
<!--ul>li*3>a{item}-->

<ul>
  <li><a href="">item</a></li>
  <li><a href="">item</a></li>
  <li><a href="">item</a></li>
</ul>

<!--让内容加序号-->
<!--ul>li*5>{item$}-->
<ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
</ul>

<!--相同层级-->
<!--div+div-->
<div></div>
<div></div>

<!--成组的结构-->
<!--div.container>(header>ul>li*5>a)+div.content+footer>p{2019}-->

<div class="container">
  <header>
    <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>
  </header>
  <div class="content"></div>
  <footer>
    <p>2019</p>
  </footer>
</div>

<!--添加属性-->
<!--a[href="https://www.baidu.com"]-->
<a href="https://www.baidu.com"></a>

<!--form-->
<!--form:post-->
<form action="" method="post"></form>

<!--input-->
<!--inp-->
<input type="text" name="" id="">
<!--input:s-->
<input type="submit" value="">

<!--组合标签-->
<!--select+-->
<select name="" id="">
  <option value=""></option>
</select>
<!--table+-->
<table>
  <tr>
    <td></td>
  </tr>
</table>

<!--内置结构    !     -->
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

</body>
</html>

<!--html:5-->
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

</body>
</html>

<!--lorem 后面可以加个数-->
Lorem ipsum dolor sit amet, consectetur adipisicing elit. At corporis excepturi,
exercitationem illum in itaque magni officiis perferendis repellendus totam?
Aut autem hic in iusto magnam natus quo saepe ut.

</body>
</html>

css:

#app{
  /*c:#000*/
  color: #000000;
  /*position* p:首字母/
  /*p:s*/
  position: static;
  /*float*/
  /*fl:r*/
  float: right;
  /*fl:n*/
  float: none;

  /*overflow*/
  /*ov*/
  overflow: hidden;

  /*margin*/
  /*m*/
  margin: ;
  /*mt*/
  margin-top: ;
  /*padding 和margin类似*/

  /*sizing*/
  /*w:100*/
  width: 100px;
  /*h:a*/
  height: auto;

  /*border*/
  /*bd*/
  border: ;
  /*bdr:2*/
  border-right: 2px;

  /*list*/
  list-style-type: ;

  /*text align*/
  /*ta*/
  text-align: left;

  /*text-decoration*/
  text-decoration: ;
  /*td:n*/
  text-decoration: none;
  /*td:u*/
  text-decoration: underline;
  
  /*font*/
  /*ff:s*/
  font-family: serif;
  /*ff:ss*/
  font-family: sans-serif;
  /*fw*/
  font-weight: ;
  /*fw:b*/
  font-weight: bold;
  
  /*import*/
  /*!*/
  !important;

  /*组合*/
  /*p50+m20+fw:b */
  padding: 50 px;
  margin: 20px;
  font-weight: bold;
}

我的总结就是以上这些，如有错误请各位纠正。