Emmet插件的使用方法

Emmet插件的使用方法

Emmet插件官网地址：https://www.emmet.io/

<!DOCTYPE html>
<html lang="en">
<head>

  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <!-- 1.上方meta:utf信息更加完善，注释下方信息 -->
  <!-- <meta charset="UTF-8"> -->

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 上方是视口信息，生成方式为meta:vp，注释下方信息 -->
  <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->

  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!-- 上方meta信息是为兼容IE8，生成方式为meta:compat -->
  <!-- <meta http-equiv="X-UA-Compatible" content="IE=7"> -->

  <!-- link:css -->
  <link rel="stylesheet" href="style.css">

  <!-- script:src -->
  <script src=""></script>

  <title>Document</title>
</head>
<body>
  <!-- html或者！可以生成html5文档结构  -->

  <!-- 1.生成带有类样式的标签  -->
  <!-- p.info -->
  <p class="info"></p>
  <!-- div.red -->
  <div class="red"></div>
  <!-- div为默认标签,所以.red -->
  <div class="red"></div>

  <!-- 2.生成带id的标签 -->
  <!-- div#header -->
  <div id="header"></div>
  <!-- #header -->
  <div id="header"></div>

  <!-- 3.a标签 -->
  <!-- a:link -->
  <a href="http://"></a>
  <!-- a:mail -->
  <a href="mailto:"></a>

  <!-- 4.根据位置关系生成标签 -->
  <!-- 同级标签 -->
  <!-- h2.header+p.info -->
  <h2 class="header"></h2>
  <p class="info"></p>
  <!-- 后代标签，也叫下线标签 -->
  <!-- ul>li -->
  <ul>
    <li></li>
  </ul>

  <!-- ul>li+li+li -->
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>

  <!-- 生成上级标签 -->
  <!-- h2>span^p.info -->
  <h2><span></span></h2>
  <p class="info"></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>

  <!-- 重复生成，前端工程师的最爱 -->
  <!-- ul>li*6 -->
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>

  <!-- 快速生成8个列表项的导航 -->
  <!-- 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>

  <!-- 给标签自动添加编号或排序：$,@ -->
  <!-- ul.list>li.item*8>a{导航$} -->
  <ul class="list">
    <li class="item"><a href="">导航1</a></li>
    <li class="item"><a href="">导航2</a></li>
    <li class="item"><a href="">导航3</a></li>
    <li class="item"><a href="">导航4</a></li>
    <li class="item"><a href="">导航5</a></li>
    <li class="item"><a href="">导航6</a></li>
    <li class="item"><a href="">导航7</a></li>
    <li class="item"><a href="">导航8</a></li>
  </ul>

  <!-- 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>
</body>
</html>
posted @ 2019-02-20 19:57  山峰的风  阅读(307)  评论(0)  编辑  收藏  举报