Vscode 前端快捷鍵及字符補全方法

歡迎大家訪問我的主頁:西城Gether學習網(wǎng)

我的博客:淺作序

1. 快捷鍵的使用

2. 字符補全( ? 為常用項 )
   • ?多項：* , 縮寫：ul>li*5

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

   • ?Class類：. , 縮寫：div.top*2（Class類可以多次使用）

     <div class="top"></div>
     <div class="top"></div>
     

     縮寫：p.class1.class2.class3

     <p class="class1 class2 class3"></p>
     

   • ?Id類：**# ** , 縮寫：div#top(一個Id類只能使用一次)

     <div id="top"></div>
     

     縮寫：form#search.wide

     <form id="search" class="wide"></form>
     

   • ?自增符號：*5`

     <ul>
         <li class="item1"></li>
         <li class="item2"></li>
         <li class="item3"></li>
         <li class="item4"></li>
         <li class="item5"></li>
     </ul>
     

   • ?子元素：> , 縮寫： nav>ul>li

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

   • ?兄弟元素：+ , 縮寫：div+div >p> span+em

     <div></div>
     <div>
         <p><span></span><em></em></p>
     </div>
     

   • 自定義屬性：[]
     縮寫：p[title=”Hello world”]

     <p title="Hello world"></p>
     

     縮寫：td[rowspan=2 colspan=3 title]

     <td rowspan="2" colspan="3" title=""></td>
     

     縮寫：[a=’value1’ b=”value2”](a,b為屬性，value為屬性值。具體使用見上面的例子)

     <div a="value1" b="value2"></div>
     

   • 文本：{}
     縮寫：a{Click me}

      <a href="">Click me</a>
     

查看更多方法

歡迎大家訪問我的主頁:西城Gether學習網(wǎng)

我的博客:淺作序

2018/9/3 晚上23:37:08