sublime / vscode 快捷生成HTML代碼的實作
文章目錄
- sublime / vscode 快捷生成HTML代碼的實作
- 1、*基本html結構*
- 操作： ==輸入 !+Enter鍵==
- 實作效果：
- 2、*生成div加類名的快捷鍵*
- 操作： ==輸入 div.list>div.item_$*6==
- 實作效果：
- 3、*帶類名的div*
- 操作： ==輸入 div.wrapper==
- 實作效果：
- 4、*帶id的div*
- 操作： ==div#wrapper==
- 實作效果：
- 5、*屬性 []*
- 操作： ==span[title=“test”]==
- 實作效果：
- 6、*后代 >*
- 操作： ==輸入div>span>a==
- 實作效果：
- 7、*兄弟 +*
- 操作： ==div+p+span==
- 實作效果：
- 8、*上級 ^*
- 操作： ==div>span^i==
- 實作效果：
- 9、乘法 *
- 操作： ==ul>li*2==
- 實作效果：
- 10、*文本 {}*
- 操作： ==div>span{這是文本}==
- 實作效果：
提示：以下是本篇文章正文內容，下面案例可供參考
1、基本html結構
操作： 輸入 !+Enter鍵
注意：這里輸入“！”+回車鍵前，需要清空原來生成的基本結構
實作效果：
<!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、生成div加類名的快捷鍵
操作： 輸入 div.list>div.item_$*6
實作效果：
<div class="list">
<div class="item_1"></div>
<div class="item_2"></div>
<div class="item_3"></div>
<div class="item_4"></div>
<div class="item_5"></div>
<div class="item_6"></div>
</div>
3、帶類名的div
操作： 輸入 div.wrapper
實作效果：
<div class="wrapper"></div>
4、帶id的div
操作： div#wrapper
實作效果：
<div id="wrapper"></div>
5、屬性 []
操作： span[title=“test”]
實作效果：
<span title="test"></span>
6、后代 >
操作： 輸入div>span>a
實作效果：
<span title="test"></span>
7、兄弟 +
操作： div+p+span
實作效果：
<div></div>
<p></p>
<span></span>
8、上級 ^
操作： div>span^i
實作效果：
<div><span></span></div>
<i></i>
9、乘法 *
操作： ul>li*2
實作效果：
<ul>
<li></li>
<li></li>
</ul>
10、文本 {}
操作： div>span{這是文本}
實作效果：
<div><span>這是文本</span></div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/271579.html
標籤：python