html快速生成标签：tab或回车快速补全标签或css样式

最新推荐文章于 2024-08-09 17:44:45 发布

觅远

最新推荐文章于 2024-08-09 17:44:45 发布

阅读量3.3k

点赞数 6

本文链接：https://blog.csdn.net/JBY2020/article/details/118662446

版权

HTML CSS 代码生成快捷键前端开发

关键词由CSDN通过智能技术生成

1、快速生成html结构

输入 html: 或者 ! 后，回车或tab

2、快速格式化代码：右键格式化文档或者直接快捷键 shift+alt+f

3、快速补全css及标签，css只举例几个常用的。

<!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>
    <style>
        /* 快速生成css样式 */
        div {
            width: 200px;
            /* w200 */
            height: 300px;
            /* h300  */
            line-height: 30px;
            /* lh30px  */
            text-align: center;
            /* tac  */
            text-indent: 5em;
            /* ti5em  */
        }
    </style>
</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>