標籤：快速開啟檔案 等等 編輯 定義 其他 完成 ctr 自訂 代碼
Done is better than perfect（完成比完美更好）1、提高HTML頁面的編輯速度
（1）Emmet文法，對於emmet文法的熟練運用，可以在很大程度上提高你的html編輯速度
//html的注釋為<!-- -->的形式 此處使用"//"只是為了更加快捷 文法上說是錯誤的//後代（一層套一層時使用）：>縮寫：nav>ul>li代碼：<nav> <ul> <li></li> </ul></nav>//兄弟（相鄰同胞元素的時候使用）：+縮寫：div+p代碼：<div></div><p></p>//父級：^（可以使用多個^^.... 表示的父父....級）//Class/ID名縮寫：div>p^div.hello+div#world代碼：<div> <p></p></div><div class="hello"></div><div id="world"></div>//分組（當某標籤和父元素為兄弟元素的時候使用）：（）縮寫：div>(ul>li>a)+p>span代碼：<div> <ul> <li><a href=""></a></li> </ul> <p><span></span></p></div>//乘法有很多使用方法//單純的乘法（用來建立多個相同的標籤）：*縮寫：ul>li*2代碼：<ul> <li></li> <li></li></ul>//和自增號連用（用來建立多個相同卻帶序號的文本）：$//用在Class/ID上縮寫：ul>li.item$*2+li#hello$*2代碼：<ul> <li class="item1"></li> <li class="item2"></li> <li id="hello1"></li> <li id="hello2"></li></ul>//同時自增多個元素縮寫：h$[title=item$]{hello $}*2代碼：<h1 title="item1">hello 1</h1><h2 title="item2">hello 2</h2>//規定自增的起始數字縮寫：ul>[email protected]*2代碼：<ul> <li class="item3"></li> <li class="item4"></li></ul>//自減縮寫：ul>[email protected]*2代碼：<ul> <li class="item2"></li> <li class="item1"></li></ul>//多個數字縮寫：ul>li.item$$*2代碼：<ul> <li class="item01"></li> <li class="item02"></li></ul>//ID和類屬性//ID和類（不多說了"#"和"."）//ID和類同時設定縮寫：div.hello#world代碼：<div class="hello" id="world"></div>//多類名縮寫：div.hello.world代碼：<div class="hello world"></div>//自訂屬性（屬性選取器可能更好記）：[ ]縮寫：[a="value1" b=‘value2‘ c=value3 d]（雙引號、單引號、沒引號都沒區別）代碼： <div a="value1" b="value2" c="value3" d=""></div>//文本（用來編輯標籤內的文本）：{}//縮寫：p>{hello}+a{world}+{!} || p{hello}>a{world}+{!} //此處的後代選取器是一定要有的 不然p和a就為兄弟元素了//代碼：<p>hello<a href="">world</a>!</p>//文檔重複結構：！縮寫：！代碼：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title></head><body> </body></html>//主要是這些 還有其他的自行連結
2、瞭解你的編輯器（主要是學會安裝一些有用的外掛程式和使用快速鍵VS Code）
（1）快速鍵：如快速注釋ctrl+/、快速開啟檔案夾ctrl+k ctrl+o、快速選擇整行ctrl+i等等（可以通過ctrl+shift+p查看）
（2）外掛程式：Auto Close Tag（自動補充結束標籤）、Auto Rename Tag（更改開始標籤時改變相應的結束標籤）、HTML Snippets（html標籤包括H5）、HTML CSS Support（自動補全樣式表）、Class autocomplete for HTML（自動補全html）、Path Intellisense（自動路徑補全）、View In Browser（顯而易見跑預設瀏覽器），未完待續....
如何提高web效率
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
