1、Emmet语法_emmet abbreviation 随机内容

作者：小蓝xlanll | 2024-05-06 10:53:30

踩

emmet abbreviation 随机内容

提示：1、快速生成HTML结构语法。

2、快速生成CSS样式语法。

（1）、生成标签直接输入标签按“tab”键或者回车键即可，比如：

div然后按tab键，生成<div></div>

（2）、如果想要生成多个相同标签，加上“*”号就可以了比如：

标签名+一个“*”号4就可以快速生成4个

（3）、如果有父子级关系的标签，可以用“>”比如：

ul>li

ol>li

dl>dt>dd

就可以自动生成

（4）、如果有兄弟关系标签，用“+”号就可以了比如：

div+p

<div></div>

<p>,</p>

（5）、如果生成带有类名或者id名字，直接.der或#der或p.der，比如：

.der{

}

#der{

}

（6）、如果生成div类名顺序，可以用自增符号“$”,比如：

.div$*5

（7）、如果你是想要生成标内部内容可以用“{}”表示，比如：

div{

你是猪头

}

<div>你是猪头</div>

还有一种生成5个div：

div{$}*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>
    <style>
        p {
            width: 100px;
            text-emphasis: none;
            text-align: center;
        }
    </style>
 
</head>
 
<body>
    <p>你好</p>
    <!-- 父子关系 -->
    <!-- 这个是快速生成标签：方法就是div*4可以快速生成4个div标签、注意一下：div与乘号之间没有空格 -->
    <div></div>
    <div></div>
    <div></div>
    <div></div>
 
 
    <ul>
        <!-- 父子关系 -->
        <!-- 这里Emem语法快捷键就是：在ul>li表示lu包含（>）li,有包含标签就用这个标签 -->
        <li></li>
    </ul>
 
 
    <div></div>
    <!-- 这个就是兄弟关系 -->
    <!-- 在div+p可以自动生成标签并列 -->
    <p></p>
 
 
    <div class="dir"></div>
    <!-- 自动生成带有类与id名字、直接.dir或者#der -->
    <div id="dir"></div>
 
 
 
    <div class="der1"></div>
    <!-- 这个就是div让他有顺序：例如“.der$*5” -->
    <div class="der2"></div>
    <div class="der3"></div>
    <div class="der4"></div>
    <div class="der5"></div>
 
 
    <div>pink老师</div>
    <!-- 这个就是让div里面有内容就：div{pink老师}按tab键 -->
    <div>这个就是你</div>
    <!-- 这个就是div{这个就是你}*5 -->
    <div>这个就是你</div>
    <div>这个就是你</div>
    <div>这个就是你</div>
    <div>这个就是你</div>
    <dir>1</dir>
    <!-- 这个就是div{$}*5 -->
    <dir>2</dir>
    <dir>3</dir>
    <dir>4</dir>
    <dir>5</dir>
 
</body>
 
</html>

显示结果：

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了快速生成HTML结构语法、css样式语法。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小蓝xlanll/article/detail/543857