HTML快速创建标签，生成代码的语法

最新推荐文章于 2024-04-12 21:07:13 发布

燕sky

最新推荐文章于 2024-04-12 21:07:13 发布

阅读量6k

点赞数 9

分类专栏：创建快捷标签 html快速创建文章标签： html html5

本文链接：https://blog.csdn.net/qq_43712580/article/details/116235456

版权

创建快捷标签同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

html快速创建

1 篇文章 0 订阅

订阅专栏

在写代码的时候有时候要创建很多个相同的标签，如何快速生成标签。
所有的操作都是按下tab键即可瞬间完成。

!或者输入html:5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

在编辑器中输入ul>li*n，n代表创建n个li标签

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

在编辑器中输入ul>(li>a)*n

<ul>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
</ul>

在编辑器中输入dl>(dt+dd)*n,+代表在同级创建兄弟标签

<dl>
    <dt></dt>
    <dd></dd>
    <dt></dt>
    <dd></dd>
    <dt></dt>
    <dd></dd>
    <dt></dt>
    <dd></dd>
</dl>

在编辑器中创建标签含Id、class类名的标签,其他属性用[]

<!--输入div#content-->
<div id="content"></div>
<!--输入div.content-->
<div class="content"></div>
<!--输入div[title='hello' colspan=3]-->
<div title="hello" colspan="3"></div>

创建5个div类名为content1-5,用@n来修改起始值

<!--输入div.content$*5-->
<div class="content1"></div>
<div class="content2"></div>
<div class="content3"></div>
<div class="content4"></div>
<div class="content5"></div>
<!--输入div.content$@3*3-->
<div class="content3"></div>
<div class="content4"></div>
<div class="content5"></div>

创建5个div类名为content、内容为1-5

<!--输入div.content{$}*5-->
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content">5</div>

总结：
1.用 >创建父子结构标签，生成子元素
2. 用+创建兄弟标签，生成同级元素
3. 用.或者#创建类标签
4. 用[]来创建属性标签
5. 用{}在标签的内容
6. 用$来实现编号
7. 用@n来修改起始值

燕sky

关注

9
点赞
踩
35

收藏

觉得还不错? 一键收藏
2
评论
HTML快速创建标签，生成代码的语法

HTML快速创建标签在写代码的时候有时候要创建很多个相同的标签，如何快速生成标签。所有的操作都是按下tab键即可瞬间完成。!再按下tab键补齐或者输入html:5<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta nam
复制链接

扫一扫

专栏目录