HTML常用的标签快捷生成方式

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

qq_46381729

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

阅读量2k

点赞数

分类专栏：前端开发文章标签： html

本文链接：https://blog.csdn.net/qq_46381729/article/details/124773798

版权

前端开发专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!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>
    <!-- 快速生成标签 -->
    <!-- 1、快速生成无属性值和内容的单个标签：输入标签名后按tab键，如输入div后按tab键 -->
    
    <div></div>
 
    <!-- 2、生成多个相同标签：标签名后加上*及生成的个数，如生成3个p，输入p*3 -->
    
    <p></p>
    <p></p>
    <p></p>
 
    <!-- 3、生成父子级关系的标签：用>连接，如ul下面的li，输入ul>li -->
    
    <ul>
        <li></li>
    </ul>
 
    <!-- 4、生成兄弟关系的标签：用+连接，如p后面有img,输入p+img-->
    
    <p></p>
    <img src="" alt="">
 
    <!-- 5、生成带有属性名的标签：直接写.或者# ，如div的id为name，class为ip，输入div#name.ip -->
    
    <div id="name" class="ip"></div>
    <input type="text" class="ip1 ip2 ip3">
    <!--一个属性有多个属性值，如input.ip1.ip2.ip3 -->
    <div st="myset,hehe,pp" id="me"></div> <!--  div[st=myset,hehe,pp]#me -->
 
    <!-- 6、生成的标签：用自增符号$，如生成三个div的class属性依次递增，输入.name$*3 -->
    
    <div class="name1"></div>
    <div class="name2"></div>
    <div class="name3"></div>
    
    <!-- 多位序号：使用多个$,如#li$$$*4name -->
    
    <div id="li001name"></div>
    <div id="li002name"></div>
    <div id="li003name"></div>
    <div id="li004name"></div>
 
    <!-- 7、生成带有文本内容且内容递增的标签：使用自增符号$表示递增内容，用{}包裹表示标签内容，如内容依次递增的三个li,输入ul>li{代号$}*3 -->
    
    <ul>
        <li>代号1</li>
        <li>代号2</li>
        <li>代号3</li>
    </ul>
 
    <!-- 8、上级关系: ^ ，例 div+div>p>span+em^p -->
    
    <div></div>
    <div>
        <p><span></span><em></em></p>
        <p></p>
    </div>
 
    <!-- 9、分组:() ，例 div>(header>ul>li*2>)+div>img ,可以使用多个()分成更多的组-->
    
    <div>
        <header>
            <ul>
                <li></li>
                <li></li>
            </ul>
        </header>
        <div><img src="" alt=""></div>
    </div>
 
    <!-- 10、倒序：@-， 如ul>li.item$@-*3 -->
    
    <ul>
        <li class="item03"></li>
        <li class="item02"></li>
        <li class="item01"></li>
    </ul>
</body>
 
</html>

qq_46381729

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
HTML常用的标签快捷生成方式

<!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>D
复制链接

扫一扫