VSCode中快捷輸入HTML代碼

dailybird 發布于2019-04-23 11:49 / 3532人閱讀

VSCode中有一些快捷編輯HTML的方法，能大大提高工作效率，在這記錄一些。

1.輸入html:5，然后按tab鍵或enter鍵，效果如下：

 1 
 2 DOCTYPE html>
 3 <html lang="en">
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>Documenttitle>
 9 head>
10 <body>
11     
12 body>
13 html>

2.輸入link:css引入css樣式文件，輸入script:src引入js

1 
2 <link rel="stylesheet" href="">
3 
4 <script src="">script>

3.輸入標簽名自動補齊

1 
2 <h1>HTML快捷輸入練習h1>
3 
4 <h2>填充文本h2>

4.隨機文本的輸入

1 
2 Lorem ipsum dolor sit amet consectetur adipisicing elit. At illum doloremque accusantium est, expedita tenetur minus nostrum perspiciatis. Repudiandae voluptatum mollitia corrupti adipisci pariatur accusantium praesentium quas, quisquam tempore debitis?
3 
4 Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, dolorem.
5 
6 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nihil, debitis.
7 Sit accusamus nisi mollitia doloremque cumque praesentium quod velit vitae.
8 Quisquam qui ipsam beatae eaque non voluptatibus obcaecati voluptate exercitationem.

5.使用"#"輸入id，"."輸入class，"[]"輸入屬性

1 
2 <div id="main" class="content">div>
3 <div id="foot" class="foot" data="結束">div>
4 
5 <div alt="到底了">結束div>

6.使用">"輸入嵌套標簽，"+" 輸入并列的兄弟標簽，"^"上級元素

 1 
 2 <div>
 3     <div id="imgs">put some imgs herediv>
 4 div>
 5 
 6 
 7 <div id="left">I am leftdiv>
 8 <div id="right">I am rightdiv>
 9 
10 
11 
12 <div id="div1">
13     <p>p>
14 div>
15 <div id="div2">div>
16 
17 <div>
18     <div id="div1">
19         <p>p>
20     div>
21     <div id="div2">div>
22 div>
23 
24 
25 <div>
26     <p><img src="" alt="">p>
27     <div>
28         <ul>
29             <li>li>
30         ul>
31     div>
32 div>
33 
34 <div>
35     <div>
36         <div>div>
37     div>
38     <div>div>
39 div>
40 
41 <div>
42     <div>div>
43 div>
44 <div>div>

7.使用"{}"對標簽分組及使用"*"生成多個相同的標簽

 1 
 2 <div id="list1">
 3     <ul>
 4         <li>li>
 5         <li>li>
 6     ul>
 7 div>
 8 <div id="list1">
 9     <ul>
10         <li>li>
11         <li>li>
12     ul>
13 div>

8.自增符號$

 1 
 2 
 3 <ul>
 4     <li><img src="./imgs/1.jpg" alt="img 1">li>
 5     <li><img src="./imgs/2.jpg" alt="img 2">li>
 6     <li><img src="./imgs/3.jpg" alt="img 3">li>
 7 ul>
 8 
 9 
10 <ul>
11     <li><img src="./imgs/001.jpg" alt="img 001">li>
12     <li><img src="./imgs/002.jpg" alt="img 002">li>
13     <li><img src="./imgs/003.jpg" alt="img 003">li>
14 ul>
15     
16 
17 <ul>
18     <li><img src="./imgs/04.jpg" alt="img 04">li>
19     <li><img src="./imgs/05.jpg" alt="img 05">li>
20     <li><img src="./imgs/06.jpg" alt="img 06">li>
21 ul>

?這些快捷操作需要Emmet插件，本文是在VSCode下編寫的，其他編輯器如Atom、Sublime Text都支持Emmet，其功能還有很多，待以后慢慢學習。

GPU云服務器云服務器 html聯想輸入代碼 html輸入文字代碼 html代碼輸入框 html代碼中橫線

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1198.html

宇宙最強vscode教程（基礎篇）

摘要：在命令面板中你可以輸入命令進行搜索中英文都可以，然后執行。命名面板中可以執行各種命令，包括編輯器自帶的功能和插件提供的功能。本文主要介紹vscode在工作中常用的快捷鍵及插件，目標在于提高工作效率本文的快捷鍵是基于mac的，windows下的快捷鍵放在括號里 Cmd+Shift+P(win Ctrl+Shift+P) [TOC] 零、快速入門有經驗的可以跳過快速入門或者大致瀏覽一...

Jason_Geng 2019-08-23 14:50 評論0 收藏0
VS Code配置及插件推薦

摘要：宋體以像素為單位控制字號。將其設置為可隱藏窗格。是否已啟用自動刷新是否啟用自動拉取以像素為單位控制終端的字號，這是的默認值。要求工作區使用高于版本的。用戶設置打開文件 > 首選項 > 用戶設置(U)，（忽略覆蓋工作區提示） { // 一個制表符等于的空格數。該設置在 `editor.detectIndentation` 啟用時根據文件內容進行重寫。 editor.tabS...

wpw 2019-08-20 14:42 評論0 收藏0
21 個VSCode 快捷鍵，讓代碼更快，更有趣

摘要：在這篇文章中，我將列出我最喜歡的快捷鍵，這些快捷鍵讓我更快的編寫代碼，也讓編碼變得更有趣，以下是個快捷鍵，分享給你。打開鍵盤快捷鍵或，搜索。在中，啟動性能是很重要的。逐個選擇文本可以通過快捷鍵右箭頭右箭頭和左箭頭左箭頭逐個選擇文本。為了保證的可讀性，本文采用意譯而非直譯。想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等著你！注意：自己嘗試的時候，Mac(17, p...

elina 2019-08-26 10:15 評論0 收藏0
如何優雅地使用 VSCode 來編輯 vue 文件？

摘要：注本文首發在我的個人博客最近有個項目使用了，本來一直使用的是來進行開發，可是遇到了很多問題。此外，還有很多規范是幫助我們寫出更加優雅而不容易出錯的代碼的。，終于基本搞定了，可以愉快地開發應用了。注：本文首發在我的個人博客最近有個項目使用了 Vue.js ，本來一直使用的是 PHPStorm 來進行開發，可是遇到了很多問題。后來，果斷放棄收費的 PHPStorm ，改用 vsco...

pekonchan 2019-08-20 15:14 評論0 收藏0
前端開發VScode常用插件

摘要：名稱功能自動閉合標簽自動提示修改標簽時，自動修改匹配的標簽格式化編寫更加人性化的注釋添加行書簽的瀏覽器兼容性檢查運行選中代碼段支持大量語言，包括單詞拼寫檢查在中彈出瀏覽器并搜索，可編輯搜索引擎顏色值在代碼中高亮顯示小窗口顯示顏色值，等等拾色名稱功能 Auto Close Tag 自動閉合HTML標簽 Auto Import...

hellowoody 2019-08-21 18:21 評論0 收藏0