emmet语法

最新推荐文章于 2024-12-05 19:33:34 发布

山茶-峰

最新推荐文章于 2024-12-05 19:33:34 发布

阅读量123

点赞数

分类专栏： HTML基础文章标签： html

本文链接：https://blog.youkuaiyun.com/weixin_44651559/article/details/117387475

版权

HTML基础专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何利用Emmet语法在编辑器中快速生成HTML标签，包括带ID、类的标签，同级和子级标签的生成，以及嵌套标签和顺序内容的创建，大大提高了HTML编写效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML的快速生成嵌套标签

emmet语法，现在大多数编辑器都支持该语法，不支持的下载该插件安装就行

生成简单的HTML页面
！/html5
生成标签
直接输入标签名
-生成含有id的标签
div#div_1
表示生成div标签且ID为div_1
生成含有类的标签
div.div_1
表示城市带有类div_1的div
生成标签5
div5
生成5个div标签
生成同级的不同ID或者不同类的标签
div#d1+div#d2
生成两个div，ID分别是d1和d2
div.d1+div.d2
生成连个div类分别是d1，d2
生成子标签
div.d1>div.d2
生成div，类d1，子标签div,类d2
生成多个子标签
div.d1>div>d2*5
结果

<divclass="d1">
<divclass="d2"></div>
<divclass="d2"></div>
<divclass="d2"></div>
<divclass="d2"></div>
<divclass="d2"></div>
</div>

生成多个嵌套标签
div.d1*5>div.d2
结果

<divclass="d1">
<divclass="d2"></div>
</div>
<divclass="d1">
<divclass="d2"></div>
</div>
<divclass="d1">
<divclass="d2"></div>
</div>
<divclass="d1">
<divclass="d2"></div>
</div>
<divclass="d1">
<divclass="d2"></div>
</div>

创建有顺序的内容
div#my_id*5{ $KaTeX parse error: Expected 'EOF', got '}' at position 1: }̲>div.my_id {$ }表示内容，$符号表示通配符。表示数字，会从1开始

<divid="my_div">
        1
<divclass="my_id"></div>
</div>
<divid="my_div">
        2
<divclass="my_id"></div>
</div>
<divid="my_div">
        3
<divclass="my_id"></div>
</div>
<divid="my_div">
        4
<divclass="my_id"></div>
</div>
<divid="my_div">
        5
<divclass="my_id"></div>
</div>

生成不同ID的多个嵌套标签
div#d1*5>div.d2$

<divid="d1">
<divclass="d21"></div>
</div>
<divid="d1">
<divclass="d22"></div>
</div>
<divid="d1">
<divclass="d23"></div>
</div>
<divid="d1">
<divclass="d24"></div>
</div>
<divid="d1">
<divclass="d25"></div>
</div>

div#d1>div.d2$*5{4}

<divid="d1">
<divclass="d21">1</div>
<divclass="d22">2</div>
<divclass="d23">3</div>
<divclass="d24">4</div>
<divclass="d25">5</div>
</div>