8

快捷生成HTML代码的实现

 3 years ago
source link: https://blog.csdn.net/weixin_46561196/article/details/115361272
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

sublime / vscode 快捷生成HTML代码的实现



提示：以下是本篇文章正文内容，下面案例可供参考

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>

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK