<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 200px;
        width: 200px;
        / w200 /
        background-color: red;
        background-color: red;
        / bgc /
      }
    </style>
  </head>
  <body>
    <!-- id,class -->
    <!-- 一键注释:先选中代码按ctal+k,再ctal+c -->
    <!-- 一件取消注释:先选中代码按ctrl+k,再ctrl+u,也可以再按一次ctrl+k+u/ctrl+k+c -->
    <!-- id,class也可以再按一次ctrl+k+u/ctrl+k+c -->
    <!-- -------------- -->
    <div id="box"></div>
    <!-- 上一行是手打的,一下都是使用emmet语法写的 -->
    <div id="box"></div>
    <!-- #box -->
    <div class="box"></div>
    <!-- div.box -->
    <div class="actie"></div>
    <!-- .actie -->
    <!-- -------------- -->
    <p>hello world</p>
    <!-- 上一行是手打的,一下都是使用emmet语法写的 -->
    <p>hello world</p>
    <!-- p{hello woeld} -->
    <!-- -------------- -->
    <!-- 下面是层级快速生成 -->
    <div>
      <p>
        <a href=""></a>
      </p>
    </div>
    <!-- 以上是手打的,一下都是使用emmet语法写的 -->
    <div>
      <p><a href=""></a></p>
    </div>
    <!-- div>p>a 上下级-->
    <div></div>
    <p></p>
    <a href=""></a>
    <!-- div+p+a 兄弟平级 -->
    <div>
      <p></p>
    </div>
    <a href=""></a>
    <!-- div>p^a 在上下级里面 写出上级的兄弟级 -->
    <!-- 下面是重复标签快速生成 -->
    <!-- 重复*n -->
    <a href=""></a>
    <a href=""></a>
    <a href=""></a>
    <a href=""></a>
    <a href=""></a>
    <!-- a*5 -->
    <a href="">link</a>
    <a href="">link</a>
    <a href="">link</a>
    <a href="">link</a>
    <a href="">link</a>
    <!-- a{link}*5 -->
    <ul>
      <li>
        <a href="">link</a>
        <a href="">link</a>
        <a href="">link</a>
        <a href="">link</a>
        <a href="">link</a>
      </li>
    </ul>
    <!-- ui>li>a{link}*5 -->
    <!-- -------------- -->
    <!-- 下面是属性快速写入 -->
    <a href="https//www.baidu.com">baidu</a>
    <!-- a[href="https//www.baidu.com"]{baidu}  属性内容用中括号-->
    <div id="header"></div>
    <!-- div#header -->
    <div id="header"></div>
    <!-- #header -->
    <div id="header"></div>
    <!-- div[id="header"] -->
    <!-- 下面是序号$快速写入 -->
    <ui>
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>item4</li>
      <li>item5</li>
    </ui>
    <!-- ui>li{item$}*5 此为正序-->
    <ui>
      <li><a href="">link1</a></li>
      <li><a href="">link2</a></li>
      <li><a href="">link3</a></li>
      <li><a href="">link4</a></li>
      <li><a href="">link5</a></li>
    </ui>
    <!-- ui>li*5>a{link$} -->
    <ui>
      <li><a href="">link01</a></li>
      <li><a href="">link02</a></li>
      <li><a href="">link03</a></li>
      <li><a href="">link04</a></li>
      <li><a href="">link05</a></li>
    </ui>
    <!-- ui>li*5>a{link$$} 前导0-->
    <ui>
      <li><a href="">link5</a></li>
      <li><a href="">link6</a></li>
      <li><a href="">link7</a></li>
      <li><a href="">link8</a></li>
      <li><a href="">link9</a></li>
    </ui>
    <!-- ui>li*5>a[link$@5] 从某个数字开始-->
    <ui>
      <li><a href="">link9</a></li>
      <li><a href="">link8</a></li>
      <li><a href="">link7</a></li>
      <li><a href="">link6</a></li>
      <li><a href="">link5</a></li>
    </ui>
    <!-- ui>li*5>a{link$@-5} 倒序-->
  </body>
</html>
 
                 
                        
                    Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号